PnP Modern Search Filters web part

In the previous post, I wrote about how to create your first PnP Search Page with a search box and search results web part. The next step is to add some filters to the page:

Pre-Requisites:

• PnP Modern Search package is deployed to your tenant.
• You have a modern page with a PnP Modern Search Results and a PnP Modern Search Box web parts.

Add the PnP Modern Search Filter Web Part to your page

Edit the page, and click on “Add a new web part” where you want to place the Filters. Search for PnP, and select “PnP Search Filters” from the list.

Connect the Filter web part to the Search Results web part

To make the Filters web part work, we need to define to connections:

• The Filters web part needs to receive the result set from the Search Results web part, so that it ca reflect the actual results (and their item counts) on the filters.
• The Filters web part needs to send the filtering criteria to the Search Results web part.

First, let’s connect the Filters web part to the Search Results web part.

To do this, open the Filters web part with the Configure button, or “Edit web part”. On the first page, open the “Use data from these web parts” drop down, and select the Search Results web part – so that the filters web part can receive the result set from it.

Note: You can connect the Filters web part to multiple Search Results Web Parts.

With this, your Filters web part now receives information about results, and it’ll use this to display the corresponding filters.

Connect the Search Results web pat to the Filter web part

The next step is to configure the Search Results web part to receive the selected filter values from the Filters web part.

Edit your page again, select the Search Results web part, and edit it. The web part has lots of settings and properties, now let’s focus on the Filters settings only. Turn to page 3, and then look for the radio button “Connect to a Filters web part“:

Turn the toggle on, then select the Filters web part added above.

Save the page, and enjoy that it works with the default filters (search refiners) now.

Customize the Filter web part

Of course, you can also select other Refinable Managed Properties to be used as filters.

Edit the Filters web part again, and click on “Customize Filters” on page 1:

Here, you’ll have a page where you can add, remove, and edit the filters (refiners) on your web part:

You can apply the following settings to each filter (refiner):

• Display Name: The label which will be displayed on the UI.
• Filter field: The name of the refinable managed property to be used.
• # of values: How many filter values you want to be displayed.
• Template: What refiner template to be used (how to display the filter values): check box, date range, date interval, combo box)
• Expand by default: If set, the refiner will be expanded by default. Otherwise, it’s collapsed.
• Show count: If set, the item count will be displayed for each filter value.
• Multi values: If set, the user can select multiple values from the same filter.
• Operator between values: If the refiner is multi-value, you can define if the operator should be OR or AND between these values.
• Sort values by: The values can be sort by name or by count.
• Sort direction: Ascending or descending.

Previous posts in this series: