![](https://imaginet.com/wp/wp-content/uploads/2023/02/ImaginetBlogBackground.png)
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](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-jpg.webp)
To create a search page such as the above example, the first step is to include a search box.
![Custom modern search](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-2-jpg.webp)
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](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-3-1024x542.webp)
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](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-4-863x1024.webp)
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](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-5.png)
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](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-6.png)
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](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-7.png)
![Custom modern search](https://imaginet.com/wp/wp-content/uploads/2023/11/BPP-BLOG-8.png)
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.](https://imaginet.com/wp/wp-content/uploads/2022/11/Yilin-jpeg.webp)
Discover More
Secret Manager to Protect Sensitive Data in App Development
Secret Manager to Protect Sensitive Data in App Development September 5, 2024 Secret Manager to Protect Sensitive Data in App Development How you deal with sensitive data is critical to…
Protecting Sensitive Data: Ensuring Privacy from a Data Engineering Perspective
Protecting Sensitive Data: Ensuring Privacy from a Data Engineering Perspective August 29, 2024 Protecting Sensitive Data: Ensuring Privacy from a Data Engineering Perspective In a bank call center, staff members…
Custom Script Setting in SharePoint & OneDrive Removed
Custom Script Setting in SharePoint & OneDrive Removed August 22, 2024 Last week, we published a blog discussing Microsoft retiring SharePoint Add-Ins. In that blog, we briefly discussed how the…
![](https://imaginet.com/wp/wp-content/uploads/2023/05/calm-consultant.webp)
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.