How to add dynamic Search Filters in a SharePoint Site

Question

How can I create a policy and procedure search filter in SharePoint? I have already created the document library, but I am stuck on how to create the filter web part and search results. I have attached an image of what I want the end result to look like.

Please any guidance or steps needed to take would be great.

Answer 1

Hi @Terrel Brown  

Thank you for posting your question in the Microsoft Q&A forum.  

Before setting up dynamic search filters, make sure your document library has the right metadata columns defined and populated. For example:  

-Type (Choice: Policy, Procedure, Work Instruction, Training Guide).  

-Department (Choice: Quality Assurance, Intake & Verification, etc.).  

-Status (Choice: Draft, In Review, Implemented).  

-Keywords (Text or Managed Metadata).  

Once these columns are added and filled in for your documents, you can proceed with installing the PnP Modern Search web parts and configuring your search page. 

1.Install PnP Modern Search web parts   

-Download the latest .sppkg package from the official repo: Releases · microsoft-search/pnp-modern-search.  
-Upload it to your App Catalog   
Reference: Manage apps using the Apps site - SharePoint - SharePoint in Microsoft 365 | Microsoft Learn.  
-Add the package to your target site from Sites contents > New > App. 

2.Create a search page  

Go to your site > New Page > give it a name > Edit the page and add the following PnP Modern Search web parts:   
-Search Box: your top search bar (e.g., Search by policy name, department, or keyword…). Configure it to send queries to the Search Results web part.  
-Search Filters: provides left-side checkboxes (Type, Department, Status, etc.). Configure it to read refiners from your metadata columns.  
-Search Results: displays the matching documents. Connect it to both the Search Box and Search Filters web parts, and set the document library as the source.  
You can choose display templates such as Cards, List, or create your own Handlebars layout.  

3.Configure refiners in Search Filters:  
Map your columns to RefinableStringXX properties, then use them as filters: 
-Type > RefinableString00  
-Department > RefinableString01  
-Status > RefinableString02  
Go to SharePoint Admin Center > More features > Search > Manage Search Schema.   
Edit a RefinableStringXX property and map it to your custom column’s crawled property (e.g., ows_Type, ows_Department, etc.).  
Note: After creating or mapping managed properties, refiners won’t appear immediately, search indexing can take 15–30 minutes. 
Reference: Manage the search schema in SharePoint - SharePoint in Microsoft 365 | Microsoft Learn. 

PnP web parts support JSON or Handlebars templates. For example, use the Details List template to show results with icons and buttons (e.g., View Document, Give Feedback).  
Reference: Layouts - PnP Modern Search (v4).  

I hope this helps.  

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".    

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.