Menu

Today, PnP Search is often used in SharePoint to create customized search pages and result displays. This results in a fully custom modern search experience. It is equipped with features such as Refiners, Pagination, Sorting, and Highlighting, which make it easier to refine and present search results.

PnP search is made up of four web parts:

1. PnP search results
2. PnP search box
3. PnP search filters
4. PnP search vertical. 

Below is an example of how to tailor the search experience:

To create a search page such as the above example, the first step is to include a search box.

Search box allows you to type in search queries, and the results will be pushed automatically to the search results component once the connections between the two are defined. You can set opening behavior, enable and configure query suggestions, and more.

Next, we require a Search result web part to display the search results. In our example, this component is fully customized. To enable filtering of search results for managed metadata fields or lookup fields, we need to use Refinable strings. These special managed properties in SharePoint Online search can be mapped to crawled properties to create custom search refiners, which further enhance your search capabilities.

Refiners are a powerful feature in PnP Search Web Parts. They can be tailored to display various filters based on the user’s search query and other parameters. However, it may take some time (maybe over a week) to get your refiners to function as desired.

Once you Select properties you want displayed on the search result web part, you can add them to layout slots and provide them with more descriptive names.

There are seven different layouts available, such as a list or a grid. In our example, we chose the Custom Layout and added custom code in the “Edit results template” area using Handlebars templating language.

Then connect to Search box, Search filters, and Search verticals webpart as needed. More configuration options are available for features such as paging, hit-highlighted properties, result numbers, etc.

Next, Search Filters web part enables you to apply custom filters to your search results, which are compatible with refinable properties.

Additionally, Search Verticals webpart provides a search navigation that enables you to switch between different search results.

For a deeper dive, custom search web parts can be developed using PnP JS and SharePoint Framework (SPFx). All PnP web parts can be easily added to any modern SharePoint page and configured with extensibility libraries to load.

If you are looking for a custom modern search experience, we’d love to hear from you. If you found this blog helpful make sure to subscribe below. We publish technology tips, tricks, and hints every week.

Discover More