Microsoft 365 Community Microsoft Search, 16 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Custom query suggestions functionality in the PnP modern search solution

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 16, 2020.

In this 8-minute video, Premier Field Engineer at Microsoft Office 365 Development, Brad Schlintz, shares a new capability recently added to the PnP search web part that allows organizations to include their own rich query suggestions. The webpart draws upon functionality found in the PnP extensibility library. There are 2 suggestion scenarios. "Zero query suggestion" – user types nothing in search box and yet suggestions are rendered on webpage as well as the more typical scenario that returns results after the user types a few letters.

Presenter:
• Brad Schlintz (Microsoft) | @bschlintz

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Hello, everybody, my name is Brad Lantz I work within Microsoft services. As a premier field engineer and my focus is SharePoint and office 365 development. You can find me on github and twitter at beech, lence or my blog at crank code comm.

A

So today, I'm going to demonstrate the custom query, suggestions, functionality that was recently added to the PNP modern search web part. This capability allows an organization to use the P and P search webparts. That Frank showed but then add their own rich query, suggestions and may come from either a SharePoint list, Microsoft graph or another system.

A

So if this functionality leverages the same extensibility library that Frank showed earlier, but by adding an additional function, called get custom suggestion providers which returns one or more suggestion providers, so a provider may work in sort of one or two ways. The first way is when you, you can offer zero query suggestions. So this is the show when you place the cursor into the search box, but the user hasn't yet typed anything.

A

So this might be useful for showing suggestions relevant to the current users, such as their recently modified files, or provide quick access to a frequently visited link such as the.

B

A

Practices site so a suggestion kind of have a few different components here, so it can be composed of a icon that you can specify. You can also specify the display text as well as description text and a suggestion group.

A

So this is just sort of arbitrary group text, and so, if you have multiple suggestions that get returned and you use the same group, they sort of all get merged together when they actually render in the browser view and then the last thing is, if you add a target, URL you'll also see this little icon here when the URL is specified, the suggestion actually becomes a link, and so when I would go ahead and click on this, it would actually launch this in a new tab.

A

So the other type of suggestion would be the type of head, so the more of the traditional sense right. So if you type in this case SPF X, we can see we have a few different suggestions. Returning the first two are from our custom suggestion provider.

A

So the same as that 0 query suggestion and the second set is actually coming from SharePoint, and this is calling the built in REST API, and so you can select a suggestion by either clicking on them with your mouse or you can use your keyboard up and down arrows to kind of cycle through the suggestions. Once you have a suggestion that you want to to see, you can either just press Enter or click on it. So I'll, just press ENTER you, and so you can see we're actually doing a search for that now.

A

So how is this all working? One thing I do want to show, though, before we jump into the code, is you can actually toggle each suggestion provider on or off? So if we go to edit the page and then go to our search search box here and hit edit when you have an extensibility library deployed and that extensibility library returns one or more custom suggestion providers, then you will see this additional button show up here, and so this allows you to see all of the suggestion providers that are available to the search box.

A

The very first one here is the one that's built into the PNP search webparts. So this is really just the one that that calls the SharePoint suggestions. Rest API, the second one is the custom, one that we created in our extensibility library, and so with each of these you can toggle them on or off, and so you could really have a lot of flexibility in terms of which providers are enabled all right.

A

So let's switch over and take a look at some code, so the first file that we're gonna take a look at here is the company library component. So this is the entry point for where you will register both your custom web components that Frank demo just a little bit ago, as well as the custom suggestion providers. So for each suggestion provider you can provide a name which is used internally to track whether or not a particular Pro Rider is enabled or not. So this is saved in the web.

A

Part settings also a display name that you'll see in that property configuration pane as well as the description and then lastly, you'll provide the class, and so this is the actual class that implements the providers functionality. So, let's jump to the class.

A

Here, there's two getter methods or getter properties that we want to pay attention to first, so the first one here is: is suggestions enabled so if this property returns true, then you must also implement the get suggestions method, and so this is the traditional suggestions as you type in the search box and as you type the this mess that will get called for every time, and you also get the query text that the user is typing in and so for this example, you know we're just calling in our get sample suggestions so down here.

A

We can actually see we have a few hard-coded samples in here for SPF, x, training and SPF x, documentation and then down here at the bottom. We're actually just filtering that list of sample suggestions by the query text of the user's typed in the second type of suggestion is a zero term suggestion. So this is the is zero term suggestions enabled property. If you return true from this getter, then you must also implement the get 0 term suggestions, proper method down here and so you'll notice.

A

This is just returning an array of suggestions that we have defined on our class, so this is a good time to introduce the on init method. So on an it is actually called it's.

A

It can be an asynchronous method, so this would allow you to call let's say into your own custom, API or some service to get a list of 0 term suggestions that you can then display when whenever you need to when the provider gets called, and so here we just have one that's hard-coded, but here you can see the different properties that are available on a particular suggestion. So here you can see the display text, the group name the icon description, as well as the hover text.

A

So as you hover over this suggestion in the browser, this will show up as a tooltip and then as well as an optional URL. So if you don't specify a target URL, then when you click on it or select it you'll search for the display text, that's fired up here. If you do have a target URL, then that's when the suggestion does become a link.

A

The other property I want to call attention to you is the on suggestion, selected method. This allows you to pass in essentially a callback. So whenever this suggestion gets selected, you can fire some some logic here right so I'm just logging it to the console, but you can think of some scenarios where you might use this to track analytics or other things right. So that's that's kind of one example, one additional piece there that we can show that really is kind of it for the the suggestions.

A

If we kind of jump back to the browser here, you can kind of see, there's a couple different ways that this will work. I just want to show one more thing, so we saw like if you search for like SPF X right. If I start completing this out and start typing training, you can actually see it does filter it down. So this is all happening inside of that that suggestion provider called that filtering logic, and that's that concludes my demo.

A

Are there any questions on any of the PNP modern search stuff that other Frank did or I did hear.

C

Any questions by the way Brad this is just awesome.

A

This is a fun contribution to work on this, with lots.

C

A

Lots of nuances here, yeah.

C

Pr accepted are accepted in these people. So if you want to add a like cool feature like this, you you can submit your your poor request right.

B

Now the timeline of Oh, getting that suit navigation and the customer source web page and not within maybe upcoming days that within upcoming weeks, definitely not months. So it's coming and you can see then more wider communications when that's up.