Microsoft 365 Community Community Demos, 9 Feb 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Consuming Search API in Viva Connections Adaptive Card Extension

Description

In this 12-minute developer-focused demo, Marcin Wojciechowski shares a method to expose content search almost natively in mobile. In this ACE see implementing the Search API client and exposing the setQuery method, creating an adaptive card with input and search button, creating an adaptive card to present the results (template by João Mendes), and adding navigation events. You can use SharePoint Search API or Graph Search API, use the quickViewNavigator.

This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 9, 2023.

Demo Presenter
• Marcin Wojciechowski (Valo) | @mgwojciech

Supporting materials
• Sample - primary-text-card-search | https://github.com/pnp/sp-dev-fx-aces/tree/main/samples/PrimaryTextCard-Search
• npm Package - MGWDEV M365 Helpers | https://www.npmjs.com/package/mgwdev-m365-helpers
• Code snippet - sp-browser-utils | https://github.com/mgwojciech/sp-browser-utils/blob/main/utils.js

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

B

Let's talk about why why anyone would like to play around with searching Aries and I strongly believe that first of all, adaptive cards got quite a lot of traction. Last year it's a big investment from Microsoft the whole Viva stories with shaping really nice people available.

B

Which would do the same thing so another good thing. A good point in using adaptive cards is that we can actually expose our ascensionisms almost natively in Mobile, but it's almost because we know there is actually a new bridge and uh useful technical details back to end User. It's effect, ively native mobile experience when you can use Ace and you can actually call search a support for the new and the lovely feature, maybe not so new.

B

For me, it's still new and lovely, so new Viva from experience on on desktop and finally necess relatively simple and relatively easy solution. So, even if you not want to copy the sample and use it somewhere, it's really easy to actually Implement something like this yourself, which I hope I will justify in a second. So how to do this? We need such API client, and the key is that this client needs something like set query.

B

This is a little bit more implementation related. Nevertheless, that's the key. We need set query to give you all. That will be some heads up, because you can use both SharePoint Central API and you can use a graph search. Api I tend to use Graph Search API only because in the web, search API I believe has much nicer a response model, so you don't have to go through that key value, at least to actually extract your objects from the search results.

B

This is by go with graph API sense, but, to be perfectly honest, SharePoint API will be a little bit faster but, on the other hand, will have a bigger response, so, whatever you feel like more fun, absolutely fine. Once we have that we need to actually create adaptive card extension. I didn't pay much attention to be honest to the card itself. I focused on the quick view, and in that quick view we need to Define our search input and our search button.

B

Finally, thanks to rang, I was able to implement or actually copied from his solution, a very lovely, a quick view to actually render the documents that are the results. And finally, it would be nice to have some kind of navigation events and by navigation events, I mean. If you don't like the query. Rented you go back. You can enter different query without closing them.

B

uh Without closing that they have a quick view itself, so that's it and finally, you have to enjoy yourself implementing something like that and I see I've been talking for over three minutes right now, only with presentation. So this is the time we hit the demo lovely. So, let's take a look at what we have here and here we do have new, beautiful Visa, home experience and, as you can see, I have two search adaptive cards here. One is just a generic search and the other is news search.

B

If I want a quick view, I want to find some test documents. Normally, let's search, we have some test documents, I click test and I'm, opening that native green teams. What a lovely lovely thing let's go back, let's say: I want to actually look for some news again. This is my testing for environment, so documents in the news usually test named test.

B

As you can see, we click it and we get navigated to you. So, as you can see one adaptive card, but quite versatile, quite a lot of quite a lot of contamination. We can do. Let's take a look on how we can do it.

B

This adaptive card has just some very simple thing called initial query. Initial query is something that will be applied or appended actually to user query. Here we have just. We are looking for documents, but not aspfx files, and in that case we are looking for specific content type. Not so nothing too crazy, I believe as a final step, because I believe now them of mine will be fully completed without some proper tracking and something a little bit unsupported.

B

Let's say we would like to debug stuff directly in the new experience.

B

If we want to do that, we hit F12 as usual: let's inspect our lovely home experience and bear in mind at the end of the day, this is actually new beautiful new page in SharePoint, hive and I have my new teams snippet right here. It is available on my GitHub I believe run, and here we have login method called debug page debug page, and here we go now you're actually selling our world adaptive cards from from localhost lovely.

B

We like it now, let's dive a little bit deeper into the implementation, details and I believe I, have it here and already properly zoomed in I hope the zoom is correct. Yes, yes, yes, so adaptive card entry point so self-adaptive card extension.ts. Of course this sample is also available in the Adaptive card, PNP samples.

B

So you can walk through this on your own. What is happening here is first of all, we are building graph, client and I mentioned. We need some kind of search provider here, I'm using search provided from my LPM Library I'm, not sure if we want to go too much into the details, just maybe to show you roughly how it looks like we have that set quality methods and effectively it abstracts away all the building of Century, Quest, pagination and I. Believe. That's it nothing too special.

B

Let's look at that data, provided we have to register our quick views. As you can see, the current is just out of the box card view, but we have quick view which is the out of the box. Click View and essential results, quick view. The important thing here is that we are available.

B

To Fancy the trick is: let's go to the quick view. It's very simple. What we are doing is on action, so when we click our Etc, maybe I should actually search shows from the search words and then indeed that input. So we have input. We have sub bit button when we click that submit button. We are setting the query to our data provider.

B

You can see here is this data provided- and this is something I also highly recommend to play around with, because every quick view or to be honest, everything you the life, you had it from a base adaptive card you can play around with dependence injection here just to clearly clear up stuff, a little bit more play around with separation of concerns.

B

So we have our data, provided here we said query we call get data and then, when the data is obtained, we set our state of adaptive card extension and we use crypto navigator to push New View and start new view. Is click somewhere here search results in a quick view, whether we are just pass to our adaptive card the results which are currently added to State object.

B

Now, if you're interested in templates preview template very simple stuff, as I mentioned, we have one input. We have one option, nothing too fancy. When it comes to the search results, it is a little bit more complex as I said, I, wouldn't do it myself. So once again, so thank you very much. We have some columns images, title I, believe last minute find location and just modify date, and here the only action is Select action, open, URL and that is effectively eat, open, URL, lovely and I believe that will be.

B

It is only some few words to finish up, because few importantities I might have missed quickly.

B

Navigator object very nice, highly useful, uh as I mentioned I'm using my own language, that is, for instance, client, but if you feel more comfortable with pnp.js, if you want to just call search directly using a speech, tipe, client or graph client, whatever works best for you and as I mentioned, that initial credit property can significantly change the context of our search, because my limitation was effectively. My imagination was a little bit limited by my own experience.

B

My experiences I either would use on documents, but you can imagine even by getting to our search Side by search. Do you remember that correctly? Yes,.

B

We can look for five sides: people news images whatever you like, you can actually have a nice search with relatively nice and adaptive candy a little set. Okay.

A

B

So I believe that would be all from my side as always clever being here. Thank you very much.

A

Thank you that was great and I like how you're saying you know it was very simple when uh you know it doesn't look that simple, but uh thank you for making it uh simple for us all right.

B

I was told, I might be a little bit dismissive when it comes to complexity. So this is why, if benefit was not clear, don't hesitate to ask I love talking about the code.

A

No, it was, it was fantastic.