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

Software Development Trends

5 Software Development Trends for 2024 

Darren KuikFeb 1, 20244 min read

In the last few years, we have witnessed unprecedented changes and advancements in technology, which have impacted the world of software development. These changes have presented organizations with additional opportunities…

Microsoft Fabric

Microsoft Fabric: OneLake Provides a Unified Data Lake  

Mike DiehlJan 25, 20245 min read

Have you been hearing the buzz about Microsoft Fabric?   The Data Engineering and Business Intelligence team at Imaginet has been watching with interest the development of Fabric since it was…

Microsoft Loop

Microsoft Loop: Seamless Co-Working in One Place

Dominic MandayagJan 18, 20243 min read

Years ago, Microsoft introduced digital collaboration with MS Word, Excel, Power Point, Outlook, and most significantly, MS Teams. Microsoft continues to push the boundaries with its innovations that reshape 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.