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:
- 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.
Hi Agnes. I’ve tried this in several sites, and I always seem to have the same problem. I have a Search Box, Filter and Search results, and it looks like the Filters only show once i type a key word on the search box. And if i link the Search results directly to the filters, the search box does not work. Any thoughts on what can be happening please?
Ashley Gibbs says
Agnes – if a site column that you are using as a filter has a number of blanks (no values) in addition to the values that are in the site column and filterable, is there a way to configure the filter web part to allow you to filter on blanks?
Agnes Molnar says
Unfortunately filtering for empty values is not possible.
thanks for the helpful explanations.
When setting up an advance search page with input box, filter webpart and results I am missing one important thing: there is no way of having the filter web part using the ContentType (Name) for filtering (nor SPContentType). With regard to content type there is only ContentTypeID which is not very helpful for any user.
Any idea how to solve this problem? Something missing in global settings?
Ok, it’s obviously as simple as typing in any managed field although not visible in the dropdown/combo.
Agnes Molnar says
You can only use the “Refinable” managed properties.