Customized Modern Search Experiences with PnP Search Web Parts 

November 23, 2023

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:

Custom modern search

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

Custom modern search

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.

Custom modern search

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.

Custom modern search

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.

Custom modern search

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.

Custom modern search

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.

Custom modern search
Custom modern search

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.

Liam is passionate about onboarding and wanted to share his experience with his positive Imaginet onboarding process.

Discover More

Microsoft Fabric

SQL Saturday Part 2: Learning About Microsoft Fabric 

Mike DiehlFeb 29, 20246 min read

SQL Saturday Part 2: Learning About Microsoft Fabric   February 29, 2024 I’ve been digging into Microsoft Fabric recently – well overdue, since it was first released about a year ago.…

SQL Saturday

My Trip to SQL Saturday Atlanta (BI Edition): Part 1 

Mike DiehlFeb 23, 20245 min read

My Trip to SQL Saturday Atlanta (BI Edition): Part 1  February 23, 2024 Recently, I had the opportunity to attend SQL Saturday Atlanta (BI edition), a free annual event for…

Enabling Bitlocker

Enabling BitLocker Encryption with Microsoft Intune 

Rasmin PatiuFeb 15, 20245 min read

Enabling BitLocker Encryption with Microsoft Intune   February 15, 2024 In today’s data-driven world, safeguarding sensitive information is paramount, especially with the increase in remote work following the pandemic and the…

Let’s build something amazing together

From concept to handoff, we’d love to learn more about what you are working on.
Send us a message below or call us at 1-800-989-6022.