Skip to content
  • There are no suggestions because the search field is empty.

How to configure PnP Search Refiners

In this article, you will learn how to set up and configure custom filters with PnP Search Filters

1. Overview

 In this artcile, you'll learn how to configure and connect the PnP Search Filters and PnP Search Results web parts in SharePoint. By following the step-by-step instructions, you'll create interactive search experiences that allow users to quickly refine search results using custom filters. 

2. What you'll learn 

By the end of this demo, you will be able to:

  • Add and configure the PnP Search Filters web part.
  • Connect the PnP Search Filters and PnP Search Results web parts.
  • Configure filter settings using managed properties.
  • Customize the filter display options.

3. Watch the interactive video 

4. Step-by-Step Guide 

  • Click Edit to start modifying your page.
  • Add the PnP Search Filter web part.
  • Go to your PnP Search Results web part and open the Properties pane.
  • Go to the last page of the properties pane to view the filter connections.
  • Enable the toggle to connect this web part to the PnP Search Filter web part.
  • Click the dropdown to view the available filter connection options.
  • Select the PnP Search Filters web part you want to connect to.
  • Close the properties pane of the PnP Search Results web part.
  • Open the properties pane of the PnP Search Filter web part and select the PnP Search Results web part you want to connect.
    • Display name : A friendly name for the filter 
    • Filter Field : The internal data source field to use as filter. Here you can select a field from the current data source of type your own custom value (press enter to validate)
    • # of values : The maximum number of values to be retrieved for a given filter. This value is useful if you use SharePoint refiners with a lot of refiner values. By default SharePoint will only retreve the first 100 values. To get all refiner values, you must specify an higher number manually (maximum value is 1000)
    • Show warning when limit is reached: Off by default. When enabled, an info icon appears after the filter title if the connected API returns a number of refiner or aggregation values equal to or greater than the configured # of values limit. Hover the icon to see the warning details
    • Template:  The template to use to display filter values
      The builtin templates are:
      • Checkbox
      • Date Range
      • Date Interval
      • People Template
      • Combo Box
      • Hierarchical Refiner : This template is designed for taxonomy-backed fields  (Use of Term sets)
    • Expand by default: If applicable for the selected template, display values as expanded
    • Show count: If applicable for the selected template, display counts for values
    • Multi values: If applicable for the selected template, allow selection of multiple values
    • Operator between values: If multi values is selected, the operator to use between values (OR/AND)
    • Sort values by: Sort values by name or by count
    • Sort direction: Sort values in ascending/descending order
  • Click Add and Save when you have finished configuring your filters
  • Close the properties pane of the PnP Search Filters web part
  • Click Save and Exit to publish your changes.

Want to know everything about PnP Search Filter settings?

https://microsoft-search.github.io/pnp-modern-search/usage/search-filters/#filter-settings

Make sure that the data you want to filter on is added to the Selected Properties of your PnP Search Results