How to Build Modern Search PnP Web Parts

Learn How to Build Personalized Search Experiences

Klarinet Solutions virtually hosts monthly Tech Talks for our clients and partners, covering several topics around Microsoft 365, SharePoint, and the modern digital workplace. In our April 2021 Tech Talk, Matt Fishman, Director of Solutions Delivery, led the main discussion on building engaging and personalized search experiences using Modern Search PnP Web Parts. If you would like to learn more about PnP Web Parts or schedule a specific SharePoint demo, talk to one of our experts now: Click here.

What are Modern Search PnP Web Parts?

Modern Search PnP Web Parts are a set of SharePoint SPFx web parts that allow administrators (SharePoint Super Users, Webmasters, and Developers) to create highly custom and flexible web-based experiences in SharePoint.

Before modern pages and web parts built on SPFx were introduced, search-driven scenarios were covered by classic search web parts, which allowed any developer to add any HTML, CSS, or JavaScript they wanted in their specific environment. If some of you are familiar with Classic SharePoint, you must remember that there used to be basic content search web parts and refiner web parts, but those never materialized in the switch to Modern SharePoint. Therefore, this outdated and classic configurable search solution for Microsoft Search was replaced by the Highlighted Content Web Parts in the modern world. Microsoft’s PnP team produced a sophisticated open-sourced solution composed of multiple web parts – Search Results, Search Filters, Search Verticals, and Search Box. These Modern Search PnP Web Parts were first released in 2019. In December 2020, the current PnP Modern Search v4 was rebuilt from the ground up to take advantage of SharePoint APIs and Microsoft Search API.

Overwhelmed with Web Parts – Customize Your Intranet Experience

It can be overwhelming to keep up with all the updates Microsoft releases on SharePoint, especially the open-source features like PnP Web Parts. If you want to avoid manual labor, leverage custom PnP Web Parts, and jump straight into a modern intranet & employee experience, we have you covered. Klarinet Solutions can enable intuitive search web parts, custom templates, and a collaborative experience in your intranet. Learn more about our Modern workplace solutions!

How Do We Get Started with PnP Web Parts?

1. Download the Latest v4 Release: Here.
2. More information to get started can be found in the documentation of this repository: Documentation.
3. If you come across any questions, issues, or concerns, you can receive feedback and advice: Here.
4. If you encounter a Troubleshooting issue, please use the GitHub issues list of this repository.
5. Once you deploy the packages to your SharePoint app catalog, you should see all four PnP Modern Search v4 Web Parts available in your SharePoint web part toolbox.

PnP Modern Search v4 – 4 Main Web Parts 

With the push for Modern SharePoint, Microsoft’s PnP team created a powerful open-sourced search solution made up of various web parts:: Search Results, Search Filters, Search Verticals, and Search Box. This section breaks down the 4 main Web Parts that make up PnP’s Modern Search v4.

1. Search Results Web Part

Basically, it receives data from a data source and then renders it using a specific layout. The ‘Search Results’ Web Part is the fundamental building block of the whole global solution. This Web Part can be used alone or can connect to other web parts to add dynamic interactions. The Search Results Web Part configuration is divided into four parts, each corresponding to a property pane page:

• Data source: From where to retrieve the data. Includes the slot configuration and ability to use tokens.
  Tokens help you build more dynamic queries for your data sources by using your own special syntax (e.g., instead of using {Page.<FieldName>} you can customize this token to {Page.Content Owner})
• Layouts: How do you want to render the data. There are around 5-6 built-in Handlebar templates you can leverage. These Handlebars layout templates (open-sourced) look like a regular text with embedded Handlebars expressions. In other words, it is simple templating language with HTML and CSS is included.
• Connections: How the web part will be connected to others in the page
• Extensibility: This solution supports two levels of customization depending on your requirements. Basic customizations will require minor HTML, CSS, and Handlebar skills that change custom settings for data sources, search box, verticals, and filters Web Parts + minor updates to existing layouts if needed. Meanwhile, advanced customizations are built from scratch and require front-end/SharePoint developers to include major updates like adding a new data source, layout, component, or suggestions provider.

2. Search Filters Web Part

Filters and refiner data is are displayed in ‘Search Results’ Web Parts. Also, Search Filters connects to the Search Results Web Part and lays out metadata related to the Search Results in a format that you can then drill or pear down into your search results to find exactly what you are looking for. This component is highly configurable to meet your requirements, and it works for all data sources.  Ultimately, this allows you to filter the current loading results into the SP Search Results box.

3. Search Verticals Web Part

The Search Vertical Web Part allows you to have on-page navigation to change the type of data you are searching for. You can conditionally render a ‘Search Result’ Web Parts according to the selected vertical and browse data as silos from multiple data sources. Verticals allow users to limit their search results to a specific kind of result, too – this will allow you to build a complete search center with various sources. Below are some of the setting descriptions you will come across when using Search Verticals.

4. Search Box Web Part

Allows users to enter free text queries sent to ‘Search Results’ Web Parts. The Search Box Web Part allows users to easily connect to other web parts or navigate other pages. Most importantly, you can pull in a Query string parameter from the URL and pass that as a Query. For example, if you were linking to a page and wanted to pass “department is equal to marketing” in the URL, you can pull the string parameter and pass that through the Query.

PnP Search Web Part – Demo 

Now that you have a basic understanding of the 4 main Modern Search PnP Web Parts let us move on to the demo. If you would like to watch our live Modern PnP Demo, opt-in now. Between the four main PnP Web Part, there are around 100 different configuration options, which can be configured into countless combinations. Although we will not go through every combination, we will show you a few examples that you can leverage in your environment. We will send you our recent webinar demo and answer any questions you may have – Watch Demo Today!

Want to deploy these Modern Search PnP Web Parts in SharePoint?

If you would like to learn more about SharePoint PnP Search Web Part or talk to one of our experts now: Contact Us. We can help you optimize your digital workplace and leverage these Web Parts into your system in real-time. Klarinet Solutions is a digital workplace consultancy with experts in SharePoint, Microsoft 365, and Intranets. Our goal is to empower organizations to make the most of their Microsoft 365 and SharePoint investment by utilizing all the best tools, staying up to date with new features, and navigating any roadblocks or hurdles.

References: 

1. https://techcommunity.microsoft.com/t5/microsoft-365-pnp-blog/using-the-pnp-modern-search-web-parts/ba-p/2239771 
2. https://microsoft-search.github.io/pnp-modern-search/ 
3. https://microsoft-search.github.io/pnp-modern-search/usage/search-results/