Microsoft 365 Community Microsoft Search, 2 Dec 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started with using PnP Search Web Parts v4

Description

In this 19-minute developer-focused demo. Mikael Svenson and Franck Cornu create and configure a modern Search Center page in minutes using 4 key PnP web parts - Search Results, Search Filters, Search Box and Search Verticals. Get the v4 package on GitHub and add to App Catalog. Add web parts to a page, configure data sources – SharePoint or Microsoft Search, layouts, create search queries, connections between web parts, and refine filtering. Updated package by year end. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on December 2, 2021.

Demo Presenters:
• Franck Cornu | @FranckCornu
• Mikael Svenson (Microsoft) | @mikaelsvenson

Supporting materials:
• Repo - PnP Modern Search Solution | https://github.com/microsoft-search/pnp-modern-search
• GitHub - PnP Modern Search v4 | https://microsoft-search.github.io/pnp-modern-search/

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

For those who don't know me, my name is mikhail sanson, I'm a pm working on microsoft search.

A

I do some development on these web parts every now and then so I just wanted to share a page which has been set up using the pmp modern search reports, so I actually had to call call up one of my former colleagues at the puzzle part. So there's a guy called loftus-ness to set up this page. So this is a page using the home layout. That means you have a right column here and then the main line. So we have a filter web part in the right hand, column.

A

We have a search box, we have a vertical web part and then we have the result. Web parts- I also hidden the search box in the header to just use this page, so just to show that you can have pretty nifty pages actually set up using these web parts. Now, if I just switch between the verticals, then it just changes the the the queries and also the templates used.

A

Also, I think, there's there's a custom template used on these results. So these are not tags. This is actually the site name. So it's just a custom template used and then we have some filters, so I can do site say if I pick my like pnp demo site, I will get whatever files is on there. So that's just showing you what you can do and now I'll hand it over to frank and he will start with a blank page and let's see if he can get up to look something. Looking like this.

B

Yeah, thank you, michael uh okay. So quick introduction about me. My name is fran corney, I'm a producer 365, specialist and office development mvp. uh Today we wanted to make this call to do a quick, quick, the more about the modern search and how to use it and how to get started with this solution, especially for new people uh who don't already know this solution. So this will be a very basic uh demo about the installation and the basic usage of this uh web parts.

B

So, first of all uh this solution, uh how you you can get it that's all on github you have the microsoft search organization and the php model search repository and you can get the latest. uh The last release sorry uh directly from here. So the last version is the october version. As I said earlier in this call, there will be another version in december, adding new features, so the demo I will show you here will be based on the upcoming version.

B

I won't go through all of these features, but maybe for another call, but I will focus on on basic usage so to get the package. Basically, you get the really is here, and you have some package here to download you have this.

B

It is a regular sharpen firmware package, so you can use it in a site, collection, app, catalog or tenant app catalog uh in this demo, for instance, I have a site here and I just I just enable the site collection up catalog and I use it like in an isolated way in my site collection. So just put your solution in the app catalog click on deploy and the web part will be available on your site.

B

So as a demo, we'll just take a a blame page uh and see how you can make such center, like uh michael uh just shown to you uh um a search center using this component, so I will start with the very basic components.

B

Basically, when you install the solution, you have like four web parts included the most important one and the main one is the pnp search result. So from here. Basically, you can configure you have to. You will have to choose the the data sources and we expose the sharp one search, which is the the original uh source from the v3 uh and earlier and now the microsoft search source. So the first step is to choose which source you want to use. So I will do my demo with the shop on search.

B

So basically, when you click on the source, you will have a lot of options uh specific to that source. So if I go to shop and search, I will basically farm find sorry the option for the shop on search like query, templates, visual source and and so on and microsoft search. I will have other options like entity ties and so on, so hb depends on the on the source. So, first of all I will configure the start point search so to get result from here. The easy way is to configure the query template.

B

So in this specific field, you can add your query in the keyword, query, language format so refer to the documentation to see how you can build this kind of query. But basically, let's say I want to grab all the documents from my site. You can use manage properties like paths, for instance, and you can all you can also use tokens. Tokens are resolved from the context from the temps context, and this way you can build like dynamic queries to get your results. So let's say I want to use.

B

I want to use uh the result from I want to see the result from massage specific site and- and I want to show only pdf, for instance.

B

So sorry, so when you do this kind of thing, the condition between managed property will be your end and if you want to specify- and all you have to write it explicitly so by default, is the end. So if I do that- and I click apply, as you can see all my results appear here and from this page I can also control uh some other options.

B

For instance, as you can see uh here in the in the default layout, I have some weird stuff in the um in the layout and let's say I want to use my own managed properly. Sharepoint managed properties. So, as an example, let's say I have a document library with a taxonomy column, and I have all my document tagged with this taxonomy values.

B

I can create a managed property from this column. So if I go to the search schema- and I I go to the refinable stream manage probably which are basically placeholders- that you can use for custom scenarios instead of creating you manage properly, you can map the crawl properly to a specific refinable that you can use in the model shots. So let's say I want to use the refinable speak like zero, two maps to the text version of the taxonomy term form for my column.

B

uh I mapped this and also uh created an alias to uh to be used in in the component. So if I go back to my page and let's say I want this value to be my manageability instead of the default one, I will, I will use something called slots here. The slots are basically placeholders in your layouts, so it depends on the layouts, avoiding avoiding the the necessity to customize the template and refer your specific fields.

B

So, basically, when you configure slots, you have default uh entries in the in this list and this slots here are used in the layout, so you can change dynamically the value uh display in the layout, so, for instance, I I want to replace this value here.

B

I will just go to tags and, let's say add my uh and my manage probably and as you can see here, the manage probably here is not listed, and if you want to be, if you want to use this managed property in this list, you have to first add it to the selected properties and again, if I click there, the list provided here is these are just suggestions.

B

You won't see all the custom managed, probably here. These are just suggestions and sometimes people are confused because they don't see they're managed properly. This is this is the expected behavior and we can't, technically speaking, retrieve all the managed properties from the schema. So if you want to use a custom property, you have to go to the dropdown here and type the name of your probability. So let's say it's refinable stream, zero. Two, I add it and I press enter to be uh to to make this manage probably available for my slots.

B

So if I go back here and want to change this value, I'll go on customize and say tag, and now I will see my manage properly appearing uh in this piece. So if I just switch the value and save as you can see, the value will be changed dynamically without any kind of custom development. So it's really easy to configure the the layout this way regarding the via the layout.

B

Sorry, you have a couple of options in the next page, so the first page is delegated to the source configuration and the next phase is it's delegated to the layout. So we provide like default layouts so, for instance, the the default one is the to the cards, but we have also detail list the the simple list: slider custom.

B

If you want to go, uh if you want to to make a customization on the template and also people, let's say to build a people directory- and you also the latest one- is the debug option to explore the result and our values are retrieved within the search. So let's say I go to the I choose the list here for a template. This is always the same thing. You have the html template so on the behind the scene. We are using handlebars uh html templates, so it's a templating framework to build like dynamic, html templates.

B

You have also a special feature called result. Types. uh The result type is basically to make conditions about your uh results and to make um display condition on it. So I will show you that if I click on edit search result, I can build like conditions to render an items in specific way. So let's say I want to- I don't know, choose the title here and say if the title contains instance, microsoft, it's a good example. I can completely override the display for this specific row in the results. So I can just go here.

B

Let's say completely override the ui. I can go here and add and save and, as you can see, only the result with this specific condition will be processed with the template. You you provided in the result, types configuration. So it's a pretty cool feature again. It does not require a lot of development. All you have to do is know some html or some stuff or some basic css rules.

B

So it's pretty simple or you can start with the default template and just update the default template. It works as well. So the next thing about the layouts. We provide some default option for each layout, so it really depends on what you are uh building, for instance, for the list layout. You can just add the icon show the thumbnail or not uh something like this.

B

We have a couple of options here uh to customize the display. If I go to another, um for instance to stay list, I I will have an other options.

B

So in this, in this case, for instance, I can customize all the columns and how they are rendered within the table, so a pretty uh cool option to customize to to according to your requirements, I won't go through all of this option, but basically you have many options for layouts and if it doesn't do the job for you, you can even customize the templates from scratch and go with the extensibility framework we also provide. This is not the the purpose of this call, but maybe on the network we go.

B

uh uh We will talk about this, uh this option as well, uh so the next thing you're gonna, find in the configuration option. So let me go back to my list, for instance, so we choose the source we choose the layout and the next one is how we connect these things to other web parts on the page. So basically, oh, for instance, I can use refiners with these search results.

B

So I will add another wordpress on my page, for instance, the search filters and I have to make the connections between the search result and the search filters. So the first thing I'm going to do is go back to the search results and on the third page I will have a connect to filter by parts. If I enable this, I can choose the filter.

B

What parts I just added to the page- and I will do the same thing on the search filter, so it is a two ways, connection between the two, it's really important to to do that. Otherwise this won't work uh properly and from here I can edit the filters so the same as before the field here in the list are just the field available in the current results. So if you don't see anything here, it means either.

B

You don't have any results in your search result or the connection is not made properly so in there for something I can um choose to refine on the file type. uh Also, a very important thing here: the fields you are using here for shopping, search or microsoft have to be refinable in the short schema and really important. For instance, if I choose, let's say a title, this is not a refinable managed property and it won't work. So I have to choose: refinable managed, probably when I say, refinance manage property in your search schema here.

B

This column has to have the value refined here, that's why we are using refinables uh date string and blah blah blah placeholders, and that's for this reason. So let's say I want to add the file type I'll, just take a display name. You have also the choice. How many values you want per filter and you can choose the template right before we provide checkbox that range intervals and combo box. I will show, let's say checkbox and you have a couple of options: behavior options.

B

If you want to expand by default, the filter from to show the count if it is multi-values or not, and if it is many values you have the choice, the operator, the default character. You want to use in that filter. So let's say it will be a m and if you add and save as you can see, you will see the filters appearing dynamically depending on the search results. You have you are there, so it means.

B

If I update the query here- and I said it says- wildcat character- I will add other values appearing automatically so from here. You can just select a value, search, a value or select the operator between the value. You can do pretty much what you want here and apply and the values will be filtered here. If you want to see the filters, the current filters combination appearing on the web part, you have an option in the search results in the layout in the common options.

B

You will have this option to see the current combination you selected in the web parts, so it can be, uh it can be, but it can be useful to see what filters are currently applied.

B

Last thing or one option, you can also do with this web parts connect to a search box by parts. So if I want to use the search block paper to filter my results, the thing I have to do is create a search box here. So in this way it just it is just a one-way connection, so the connection is made in the search results on the search page. You will have input query text here and you can. You can choose static, value or dynamic value.

B

In this case I I've added a search box on my page, so I will select the dynamic value and connect to source, select message box and select the search query for the value to be used in the in the query, template or in the in the query. You have to use a special token here, so it can be search terms, so it is the default one for support, or you can also use input, query text to create text.

B

It's the same thing, okay, and this way, if I click apply, and I try to go to say microsoft as you can see, the value will be filtered dynamically and it works also with the filter and so on. The last thing I wanted to show you is the vertical waypoint, the last web part of the set. uh Basically, the vertical parts are used to browse data as silos, and basically this weapon only controls the visibility of connected weapons, there's no magic behind it. It just controls visibility. So let's say I have a news tab.

B

uh I have let's say documents: the configuration is very basic for this web part and I want to show this web parts on the news, tab and another web parts and documents. So I will add another web part. Let's say here, search results, uh search, terms, fight time, blah blah.

B

Apply and I can go to the touchpad, the connection page and I can connect to a vertical tab, so let's say I want this webpart to be displayed on the specific tab. I will select the documents and I can do the same as well with the other webparts, so let's say, connect to vertical search and use. So the final results will be something like this.

B

As you can see,.

B

Here I have only one web part displayed and if I go on the document, the order will be displayed, so it covers pretty much the usage of this web part just the last thing. If you have any issues or questions about the solution, please use the issues tab. We have also a discussion tab. uh We uh we created uh two times ago so for questions prefer to use the discussion stuff instead, instead of issues, so it will be easier for us to uh to manage this. That's it all right. Thank you, frank and mikhail.