A quick overview of the new improvements for the ‘PnP Modern Search’ solution

A quick overview of the new improvements for the ‘PnP Modern Search’ solution


A quick blog post to get an overview of recent improvements for the #SPFx PnP Modern Search solution.

A new ‘Search Verticals’ Web Part

A new Web Part has been introduced since the 3.3.0 version. It allows users to search through predefined scopes (i.e videos, people, etc.). The behavior is different from the existing search navigation Web Part because here, we simply replace the query template and result source dynamically for a chosen vertical. It doesn’t redirect to a new page or send a new query using a query string parameter. Let see a quick demo:

Click to play

To get it work, you simply need to connect the search verticals Web Part to a search results Web Part using the associated option. Also, if you want to display counts for each verticals when a new query is performed (for instance a search box query or an URL fragment update), connect the search results Web Part to the search verticals one (two ways connection in this case).

Along a query template, you can also specify a result source id for a vertical.

Site classification using indexed taxonomy property bag values and the refiners Web Part

If your solution requires to classify SharePoint sites with taxonomy values, you can now use them with site property bag values and the search refiners Web Part. To create and indexed property bag value using a taxonomy value, you can use the Set-PnPPropertyBagValue PnP PowerShell cmdlet:

Pay attention to the format. Your values must follow the « L0|#0<TermGuid>|<TermLabel> » pattern to get it work with the search refiners Web part. To support multiple values, split them with the « ; » character. You will also have to enable scripts for you to be able to set the property bag value before:

Then, map your crawled property (ex: ‘PnPSiteClassification‘) to a RefinableString slot and use it with the Web Part. Note it seems to work only in the global search schema and not at the site collection level.

Then your taxonomy values will be available as refiners to search for your sites:

Improved results previews

An other improvements is about the result preview. In the previous versions, result previews were generated using several DOM manipulations and were only available for the ‘List’ layout. We replaced these manipulations by the Office UI Fabric ‘Callout’ React control. This way, previews are now also able in the ‘Tiles’ layout as well and can be used easily in your custom templates by providing the following HTML attributes:

data-src: the URL of the preview image.
data-url: the URL of the iframe source or the video.
data-fileext: the file #for the video (for video only).
Preview on documents
Preview on videos

Sort refiner values

A new option by Thomas White allowing to sort refiner alphabetically or by result number:

Search box clear option

And finally a option by Yannick Reekmans to clear the search box to reset to the previous value. Pressing the ‘escape’ key also works.

Happy searching!

+ There are no comments

Add yours

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.