Microsoft 365 Community SharePoint, 17 Dec 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Introduction to PnP Search Web Parts Version 4.0 – new capabilities and features

Description

In this 28-minute Developer - focused demo, Franck Cornu highlights the PnP Modern Search Solution - a collection of community-built and maintained SharePoint Online web parts (Search Result, Search filters, Search verticals, Search box) for creating flexible and personalized search-based experiences - enhancing OOTB capabilities. V4.0 foundation is a completely rearchitected code base. New features are reviewed including integrations with Microsoft Search API and Microsoft Graph Toolkit. Deploy at tenant or site collection levels, new documentation, download the preview today. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on December 17, 2020.

Demo Presenter - Franck Cornu (aequos) | @FranckCornu

Supporting materials:
• Repo - PnP Modern Search Solution | https://github.com/microsoft-search/pnp-modern-search/
• Repo - Modern Search - V4 preview | https://github.com/microsoft-search/pnp-modern-search/releases/tag/4.0.0-preview
• Sample - PnP Modern Search - Extensibility samples | https://github.com/microsoft-search/pnp-modern-search-extensibility-samples/tree/develop

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

Welcome everybody: uh my name is uh franconia, I'm microsoft, 65, developer and founder of the company named acos. uh Today I will show you the latest version of the pnp important search called the v4.

A

I will go through a quick introduction about the the v4 and the pit motor search solution in general and jump to the demo for the new features. So first of all is to uh to start what is the the solution, the pnp module for for those who don't know already it's a set of support online web parts. It's only a solution available for support online. Only it's a set of web parts allowing to uh to create like uh highly flexible search experiences within the modeling experience, the sharepoint modeling experience.

A

So it includes multiple web parts like the search results, such filters verticals and the search box. So you can put it together to create the whole search center for extent. For instance, the the main goal of the solution is to enhance the capabilities of the out out-of-the-box web parts, for instance the iot content web part, which is quite limited right now in the out-of-the-box web part. So the the code is free to offer you a set of web parts to customize your results.

A

The way you want leverage or information architecture from your project and build your experience. The way you want, so it's an open source solution, it's maintained by the community for the community I'll. I want to just thank all the people who contributed to these solutions since the beginning, so this solution was first released in 2017, so the it's uh yeah longer long time.

A

The current version is version 3.16 and today I will show you the new version, which is the version four to present to you today, so about the version four 4 just to get started. There is really distinction between the v3, the current v3 version and the v4, since they are not really compatible.

A

The reason is the v3 was like, let's say, hold it's an old code base, so it is quite complicated to uh to maintain and to uh to add new features, and so on. So we decided to completely review the architecture, um it's very complicated, to maintain the v3 right now, so we decided to completely reorganize the code with architecture and also um we had to integrate the new microsoft search api.

A

So we needed a way to uh to do it correctly in the code and that's why we we took the decision to completely start from scratch, basically, but keeping some feature from v3. Not all features from v3 are in the v4. Yet uh there is a lot of features in the v4, uh but not com. It's not complete uh compared to the v3.

A

First of all, if you want to download the latest release, so it's currently in preview so go to this uh url pnp modern search within the the microsoft search organization, and you will see the v4 preview. So it's a preview version you can. It can change so don't use it for now in your production environment. So just for testing purpose and it allows us to uh to gather feedback and fix each issues before the official release. uh There is a documentation also available, so we'll just jump into the documentation.

A

To give you an overview, uh so documentation has been completely uh written, so um it's the main documentation of the reports targets the uh v4 currently, but thanks to michael, we have now a v3 documentation included in the portal. So if you use the v3, you can still see the documentation associated so just go to the v3 tab here and we'll you will get the the the v2 documentation for uh for the current version.

A

Otherwise, the uh the the documentation targets the via the v4, like I said the v3 is not compatible with the v4 and will not be maintained in the future, except for major issues, but the focus is now on the v4, of course, and the microsoft search integration.

A

So let me go back to my slides so, like I said, the documentation is online, so go uh go. Take a look on this and your feedback and issues are welcome. If you find any issues, please let us know, especially on the v4. We are trying to to fix the lot of issues before the uh the official uh release so uh feel free to uh to go to this url and raise your your issues about the new feature.

A

So I tried to uh summarize all the features we added to the to the v4 pair uh web parts. So the first one is the search for the web part. So, basically, like I said we refactor the old code base to be more modular and um essentially we added the microsoft search api. So now the web part in the main web part. We have the shop on search and you have the microsoft search api. So I will show you in in a minute, but uh this is really the main difference.

A

I will say we also added a slot feature to uh to define the field mapping between the layouts and the data source. I would show you also this in in a minute uh we improved some layouts and added some options and we support now the microsoft graph toolkit within the template. So for those who already use the pinky modern phones, we, you know this is the handlebars templates behind the scene.

A

So now in the html markup, you can use the microsoft graph toolkit and I will show you a concrete example of that in a few minutes and also we added a new connection, extensibility option. So basically, these are the same web parts, but the way they work together, it's quite different, so I will show you again regarding the search filter web part. We added the like the search result. We added the ability to create templates for filters. So you now you have.

A

You have access to the underlying html markup, it's an under bar template just like the search results. So now you can customize this web part as well, and we added new filters and templates for the for refiners. Basically, regarding the search verticals, it's pretty much the same thing except the behavior has been refactored, so it's not really the same as before, because we had to support the new microsoft search data source. So I will show you also and the search web part. We added the multiple suggestions provider to the extensibility library.

A

Currently in the v3, it's you can only add only one suggestions provider, let's go to the demo and show you all these new features. So, first of all, you can download, like I said, the release. The latest release the modem search before in the pmp modern search repo.

A

There are two sp pkg packages. The first one is the main ones for the web parts and you have the extensibility one. The extensibility one is like the uh shared library.

A

It's like an npm package if you want, but it contains interfaces and common methods for the core, webparts, and also the extensibility library that we'll show you later so for your own extensions.

A

So to use the v4 you have to to deploy the two packages and also these packages can be deployed at tenant level or site collection level. For instance, here I mean isolated site collection and I have the v4 and v3 together within the same site collection. So you can deploy both version together without any conflict because they don't share the same ids, the web part ideas and so on. These are not the same. So that's. Why that I said that these are not compatible.

A

This has read. This is really two completely different packages, so you can deploy it together with the same app catalog. So when you deploy this package, you will still have the option to uh to add the web parts on your page, but the difference is, for instance, they type search result. As you can see, there are a lot of search result, web parts actually or pnp modern central parts. So you have the new one with the pnp prefix here.

A

This is the new ones and the old ones are only the search box, such features and so on. So you can add them both on the page. uh I recommend you to just use one version on the page uh for this reason, but uh you can still use the v3 if you want, so I will start with the first one, the pnp search results, which is the the main component of the of the set.

A

um So if I go to the property paying them, as you can see, the first choice you have to make is either to use the sharepoint search or the microsoft search api. So if I select the sharepoint search, uh this is pretty much the same options we had in the v3 version, except a couple of things. Like the query text, connection to the search box has been moved to another property, paying configuration page.

A

I will show you in a minute and basically, you have the same option for the data source and you have a common options for all data sources like the paging options and so on.

A

So uh if I go to the new one, I won't go through the sharpen search option, because this is uh approaching unknown stuff, so I will jump to the microsoft search uh api, so this is for now. This is really uh simple, very basic. The options we have. Basically, you can search for entity types. So this is the supported entity types. I suggest you to uh to read the documentation about microsoft.

A

Search some of entities are not compatible together, so you have to make sure you have a the correct combination between the entities, for instance the drive items external item and so on and for specific entity types like external items, make sure you authorize the correct permission with your tenant. There be permission to get this kind of entities and again, if you have any uh any uh question about it, it's really. I suggest you to really read the doc for microsoft search api. It's all explained what you can do with entities and so on.

A

So the options are pretty. Like I said the uh simple, the selected fields, the drive items. uh We will add more options in the future, but we want to stop uh with a restroom set of features to to begin and yeah. So the first page data source, like I said- and if I go back to the next page, we will see the the layout. So it's pretty much the same as the v3 we added some options and so on in in the layouts, but the next page.

A

All the connections to other web parts are move move to the connection page, so the search box filters and vertical. So you configure all the connection in the same property pane page. So let's say I want to use a query text.

A

I can use a static value or a dynamic value for how will the static value, for instance, if I type the whitehead character, as you can see here it would, it will write the it will put the query here. So this query text is used in the microsoft search and sharpen such data sources like mentioned here.

A

So it's a little bit different of the from the v3 so make sure you are you use the the correct option to pass your your query text. Another feature that uh we add is the slot feature. As you can see, you have a layout slot for all data sources, uh the slots. Basically, I will just use another layers to make it more relevant.

A

The layout slots are basically a way to match your fields in built-in layouts the data source fields in built-in layouts. So let's say you have your data source and you want to use another field for the title slot. So slots are in the built-in layout, and so this is placeholders.

A

Basically, so you can not any data source field on this particular placeholder, for instance, in the title I can choose to use the name. So this is the response of my search, query or I can choose to use whatever else and, as you can see, I I just changed the value dynamically without going in the handlebar templates.

A

So it's a quick way to to make like reusable templates between sharpen search and microsoft search using the slots, and if I go to the specific underbar template here to see what's going on here, the detail is, for instance, and I go to the column the specific column here.

A

As you can see, there are special handlebar helpers that will look up the configure slot and output the result in the in the column, so you can use it in a layout option or in the global thunderbolt template okay, so that is, for the slot feature to make basically to make your uh your layouts and templates usable for any data source.

A

Another improvement we've made is the microsoft graph integration so to show you this part, I will just use the people layout and the people data source using the sharpen search.

A

So I go to the support servers and now I can select a result source, so the default one is people for instance, so I will just look up for all the people in my organization and I switch to the people layout and I have a special option here so personal calendar over enable this option, as you can see, enable enabling this option will see the actual picture and a card detail card for all the people. Basically behind the scene. These are microsoft, graph, toolkit integration. So to show you the integration.

A

If I go to the template, as you can see here, this is a microsoft graph, toolkit integration, so it means you can use this kind of components anywhere within your handlebars template. This is a concrete example. The pre-built example for the people layout, but basically you can inject any context. Any data from the handlebar context in your microsoft graph toolkit components.

A

So it's a cool option to create beautiful templates. If you want a custom template but remember when you use this kind of component, you have to authorize of permissions, for instance, for the people layout. As you can see here, you have to authorize this attribute permission for your tenants to get it worked. So when you will deploy the package, you will be asked to authorize this uh this ap permission. These are not mandatory, of course, but if you don't uh to write them, this feature won't work, obviously, okay.

A

So this is for the microsoft graph toolkit integration next for the extensive video accessibility option. So, like I said all the connections are made through the last to the specif in a specific page in the property pane, so I use, for instance, an input, quiz text and static value. But if I want to use a search box, I will just add a search box on my page here.

A

It's a one-way connection, so I go to the search result, the connection page and now I can map the dynamic value and from here I can either choose the search box or page environment, for instance, a query, string, parameter and so on and inject it to my uh search filter. So this is pretty much the same as v3. You can still use the default value, for instance during the page load or grab the value from a search box.

A

A

So this is for the search box. Pretty uh simple. Now I will connect another web part which is the vertical web part. So we started the vertical report and we clicked the filter way, possibly for the end, the vertical wave pass has changed for the v4, so I will add another pnp search results here and, for instance, I will choose another data source, for instance, microsoft search and I will map to the search box here to dynamic value, search box, search, query, yeah great and then I will add a vertical web part.

A

So basically, the vertical web parts controls visibility of connected search results web parts, so I can still configure my tabs here. So, for instance, here I created a people directory and here showcase of microsoft search. I can still use a an official fabric or sorry fluent icon name, if I want, but as you can see, there is no more query template or are such options within the verticals. It's only tabs and a link if you want to redirect to a specific link.

A

So I go there and now from my search web parts. I can use this tabs to connect to control like the visibility, so, for instance, the people who are part here will only be displayed if the people tab is selected and this particular web part, the search, the microsoft search web part will be displayed only if the microsoft search tab is controlled and, as you can see in edit mode, you will prompt, you will be.

A

A message will be a display saying the current tab is not the one you select you selected in the web part, so in display mode this won't be displayed. So if I save my page you can. You can now build like uh search experiences here just by clicking on tabs and displaying the correct, pnp search result you want, according to the tab, so you this way you can really build complex queries and layouts for specific tab. This was a limitation for the v3, but because the v3 only had the option to configure the query template.

A

So this is an improvement in the v4, it's ctrl v and, of course, you can map multiple pnp search results to one tab for for now. I just uh took the example of one one configuration: then you can still map many uh with search results to a specific tab, so this is for the search vertical.

A

Now I will jump to the other way parts. The filter wipers, the refinery parts. So I will add it here.

A

Pnp filters, this one changed a lot actually, because now you can connect filters from multiple web parts, so it's uh one-to-many configuration. So, as you can see, I have the option to connect the such the two search results and, as you can see, you have the id here of the web part. So if you don't know which is the one the correct one, you can still use the id and if you go here on the lattice page, you have the instance id.

A

If you want to make sure this is the right webpart to connect okay, uh so I go there. I connect my two web parts and I will edit my filters. So, basically, you can use the fields from your data sources, so this these are only the fields available in the current uh response: okay, for instance, if you created a custom, managed property or a refine number string. This won't show up here and you have to type the field and press enter to use it in the filters okay.

A

So this is not the complete list you see here, it's just uh an help for you to select the right field. So let's say I will use the file type and I will select a template. So, as you can see, these are pretty much the same check, box, combo box and so on. I will use the check box for the for the instance and a couple of other options: external defaults and another option is the multi-value control in the v3 v3. You had one template for multi or single filter behavior.

A

Now you have only one template, but it's an option in the template to select if it's multi-values or not. So if I used a single value here,.

A

So I connected the two-way connection, so I connect from uh to my search result and from the search result. I need. I still need to connect to the filter web parts to send actually the refiner to the filter web part. So if I go there here and for the other one I can go there.

A

B

The other people yeah okay,.

A

Yeah, the people don't have filed up actually yeah my mistake, uh yeah I will select another um data source actually, like sharpen people. Reason sharpened wizards much better. Here we go sorry for the dumb.

A

The dump configuration this couldn't work anyway. uh Okay, so we'll go to a more friendly layout yeah. So, as you can see, uh you can filter a web part here uh using the the template and the selected field. You want and connect to multiple web parts. So just for my other configuration quickly come on.

A

Just want to show you thing: okay,.

B

A

Connect to the other one, I forgot another thing here:.

A

Okay should be good, so I have all my value together for my two web parts and I can now filter my two web parts using the the only only one filter web parts here.

A

So it's a new addition for v4 and I can also choose multi-values, like I said, and the behaviors between the values so and is it the end condition on the or condition?

A

So if I choose, for instance, all condition now, you will add the option here to select multiple and apply multiple filters to the to your web parts. So it's a new way to handle filters. Compare to the vitra e3 configuration another things I want to cover in this. In this session. I have only five minutes left, so I will go quick. Is the extensibility feature so in the latest?

A

Last page, sorry of the configuration, the property pane, you have the extensibility configuration and from here, if I click to configure, you will see your extensibility library and the manifest id. So the manifest id com comes from your library, specifics project that you can build to enhance capabilities of the built-in web parts. So in the modern search organization you you have now a pnp modern, search, extensibility sample.

A

Okay, if you go to the developer branch still work in progress, but you will have spfix projects here. It's a library, component project- and from here you can add your own extension. Extensions can be custom, web components, custom suggestions, providers for the search box, custom, handlebars helpers and we are trying to implement the layouts configuration the the extension layout. So you can use it as a replacement of the custom renderers you add in v3. So basically it will allow you to add your own tile here within the web part.

A

So to use it. Basically, you will have to click on this repository and I'm going to show you just here. It's a quick uh demo. This sample provide you some built-in methods that you can just use to register your old components. If you want to to know how to uh to do this in the documentation, you have an extensibility tab here with a step-by-step tutorial to create all kind of extensions, so web components, suggestion provider and so on.

A

So the goal is really for you to create, like uh extension, in a separate project and use it in the main web part. So this is a cool way to enhance the uh the the co-work part with your customization and according to your to your requirements. So you can use it for your own project and uh you will be fine as well. I think cut cover pretty much I'm running out of time, so a quick recap use the uh v4 preview version from github use it in your tenant use the issue tab.

A

If you have some feedback and issues with the v4 and let us know what you think of the of this version- and probably this will go up next year. Early next year january, probably will still have some issue to fix, but pretty much stable now, but we have some issue to fix. So let us know what you think of this. Of this solution uh go back to uva and patrick. I think I'm running out of time. So thank you for all.

B

Right, thank you very much. Fantastic demo. There really great to see the progress on the search web parts uh coming back together um excited to get that out there for folks, a lot of work has gone into that a lot of great innovation has gone into that so great great great. To see that, finally, getting out there encourage everyone to try that check that out. Let us know what kind of feedback you have.