Welcome to our PNP Search series! This article will provide an overview of the different web parts related to PnP search and how to connect the Search Results web part to the Search Box, Filter and Verticals web parts.

This is the second installment of a 3-part series on PnP Search. Be sure to check out Part 1: How to Add PnP Search to Your Tenant and Part 3: How to Create Custom Column Filters for PnP Search.

Let’s get into it!

To start, go to a desired site and add the PnP app (if not already added to all sites).

Click the settings gear and select the Add an app option.

Click add on PnP search and then after it will say added.

After being added, the PnP search app will appear under the Site Contents library.

Next, you can create a new page on your SharePoint site to add PnP search. From the home page, press the + New button and select the Page option.

Now click Create page button in the bottom right.

The added blank page will appear like the following screenshot:

To add the Web parts, hover over the page and you should see the prompt to add web parts. This will open a search box to add all the various web parts to the page. All we need to do is search PnP in the search box.

Add the following Web parts:

• Search Box – to dynamically input different search queries

• Search Filters – to preset common filters beyond out of box ones provided

• Search Results – to display files and items returned by the search query

• Search Roll Up – alternative way to display search results without needing to connect other web parts

• Search Verticals - allows to conditionally render a 'Search Results' Web Part according to the selected vertical.

First add the “PnP - Search Box”.

After adding, it will appear as below:

The search box will allow us to perform dynamic queries that can then appear in the results box. If you click edit on the search bar, this will open a right-hand pane to control search settings. But for this example, we will not need to do any extra configuration for this web part.

Next, we will add the PnP - Search Results Web part so we can see the results of our search queries.

After adding the Search Results Web part, click the Configure button.

This will open a righthand configuration pane where we will be able to connect our Search Box.

We review the core settings to get the box set up. The settings is divided into 4 pages:

• Data source -  to define where the search data will be pulled from.

• Layouts  - how search results will appear.

• Connections – how the results web part is connected to other web parts such as the filter web part.

• Extensibility -  allows different levels of customizations for PnP search such as custom settings view HTML, CSS or SharePoint Framework.

We will now proceed to configure the Search Box.

For data sources we have 2 options: SharePoint Search or Microsoft Search.

We will select SharePoint as the source for where files can be searched.

We will briefly outline key areas in the configuration panel for the search results web part.

4 Keys Areas of Configuration Panel

Page 1 - Data Source Settings

Query template - the input query text to pass to the search engine can be related to dynamic or static searches. We will come back here when configuring search verticals.

Selected properties - the SharePoint managed properties to retrieve from the results. We can also connect our own custom properties by mapping columns to refinable strings to make the values in those columns filterable.

Sort settings – allows you to sort the results by any refinable property such as created date. You can define the sort settings or optionally you can allow users to apply sorting or not.

Refinement filters – reflect any refinement filters to apply to search results.

These form the basis of core data source settings.

Page 2 – Layout Settings

This configuration panel will allow you to change how search results appear. By default results will be returned as cards but can also appear in a list or as adaptive cards.

Page 3 – Connections

This configuration panel will allow you to connect the search results to the filters and search vertical web parts to better refine and adjust the search results.

We will return to the page 3 panel after adding the filter and vertical web parts.

Page 4 -  Extensibility Configuration

"Extensibility libraries" can be added to your SharePoint environment (either for the whole organization or just one site) that automatically get used by Web Parts to add more features and options. You can also edit the properties of the PnP search as well from this panel.

For more details please see PnP official documentation here: https://microsoft-search.github.io/pnp-modern-search/usage/search-results/data-sources/

Next, add the PnP - Search Filters Web part.

And click on the Configure button to open the righthand configuration panel.

The configuration panel consists of 3 pages that include the following:

1. connection to the Search Results and edit available filters

2. layout of the filters

3. accessibility to edit the properties

The first page is where we will do all our configuration and looks like the following:

Now (1) we will connect our PnP – Search results web part added previously and then select which filters to include by (2) clicking the edit button.

This will open a pane where you select which filters should be available to end users. We can filter on site properties like Created Date or custom SharePoint columns. In this example we will just use the out of the box property of Created Date.

*Note* A SharePoint Managed Property is a special type of field that you can use to help the search engine organize and filter information. It’s like giving a clear name to a piece of data so that SharePoint can recognize and use it in searches.

For a full list of the out of the box properties we can filter on please see here: https://learn.microsoft.com/en-us/sharepoint/technical-reference/crawled-and-managed-properties-overview

Next (1) we give our filter a name and then (2) we select what property to pull this will be the managed property name of our column so in this instance Created Date would have the managed property of Created.

After selecting the property (1) choose how many values you like to appear, (2) choose the template of how the filter should appear for Created Date we will use date range. (3) Checkmark to expand the filter by default and finally click (4) the Save button.

*Note* if you want to select a custom property, that will require additional configuration which be covered in a future blog post.

Finally, if you have multiple filters can choose to utilize AND or OR Boolean operators between the different filters.

Finally, we will add the PnP - search verticals web part.

Verticals work alongside filters to help narrow the scope of results returned for a given search query.

Click the Configure button to open the configuration panel.

The Search Verticals configuration panel has 2 pages that consist of the following:

• Connect to the Search Results and edit available verticals.

• Access to edit the properties.

From the first page we will click on Configure Verticals.

To create search verticals, you will need to give each vertical tab a name, choose icon type, the tab value and then click save.  For this Demo we will create verticals that relate to the different Content Types that live on our SharePoint site.

We will (1) provide a name for the tab and (2) choose our desired Fluid UI Icon. For a full list of UI icon name please see here: https://uifabricicons.azurewebsites.net/

(3) we will provide the text value of the content type as it appears as visible metadata on files. So within the Content Type column include any of the content type values that exist on your site such as Folders or Documents. So each of these can be their own search vertical. Finally (4) click save and the verticals will be created.

Now to connect all these filters back to the PnP Search Results web part we will go back to that web part and connect them.

Connecting the Web Parts

Now that we have successfully added our Search Box, Filters, and Verticals we now must connect them back to the Search results web part.

From the PnP search results web part click edit and then go to page 3 of the configuration panel to access connection settings.

First let’s turn on the input query text connection.

This will expand out the options where (1) after turning this connection we will (2) select dynamic value and (3) connect the results web part to the Search Box. Next choose (4) Search query as the search box’s property and (5) Optionally, if desired you can input a default value of * to see everything return be default before running a search query.

We will repeat a similar process for connecting the Filter and Vertical web parts. (1) turn on the connect to filters web part and (2) select the name of the filter you want to connect.  (3) Turn on the verticals connection and then (4) select name of the vertical.

Now the search box and filters we are done for now. However, for the search verticals we must do one additional thing to make sure they work successfully. From page 1 of the Search results configuration panel we must add the following query to the Query template box: ContentType:{verticals.value}

This query will allow our verticals to pull the data values stored within our selected column to use for verticals which happens to be  the Content type column.

All queries must follow the format of <Property name>:{verticals.value}

Once done hit publish and PnP search should be ready for use on your SharePoint site!

By following these steps, you’ll be able to create an efficient search experience on your SharePoint site using PnP web parts. For more on enhancing your SharePoint experience, read Part 1 of the series to learn how to add PNP search to your tenant and Part 3 for a step-by-step guide to create custom filter columns!

Eager to learn more? Check out the Gravity Union Blog for more useful tips. If your organization needs any assistance or expert support with SharePoint, don’t hesitate to reach out to the Gravity Union team—we're here to help!