For those familiar with the benefits of Modern PnP search web parts but intimidated by the setup, I have documented a minimal path to awesome for you. This guide does assume you have initial install complete. For more guidance on install, please see the Modern PnP search site.
These instructions go through adding a search box, filter, and results web part to a page. Please note, you can use a search results web part without a search box or filter. You may consider using only a search results web part when you want to display content on a page to put the documents in context and your search scope reduces it far enough that you do not need filters.
Creating Managed Properties
For any site column that you would like to use as a search filter, you will need to create a managed property.
- Select the app launcher in the top left of the navigation bar
- Select “Admin”
- Select “Show all” then “SharePoint”
- Select “More features”
- Under “Search” select “Open”
- Select “Manage Search Schema”
- In the textbox to the right of “Managed property” type “refinable string” then select the green arrow
- Select a refinable string by clicking on the title. Ensure the “MAPPED CRAWLED PROPERTIES” column is blank.
- Scroll to the bottom of the page, under “Mappings to crawled properties” select “Add a mapping”
- Search for the name of your column
- Select the column (“ows” usually appears before it. For example, a column called “Year” will appear as “ows_year”)
- Select “OK”
- Select “OK”
Building a Search Page
Adding web parts to the page
- Select “Edit” on the page where you want to add the web parts
- Select “+” to open the modal box for web parts and search for “PnP.”
- Add “PnP- Search Box,” “PnP- Search Filters,” and “PnP- Search Results” to the page
If you have multiple versions of this web part, ONLY select the search web parts with “PnP” as a prefix. This is the most up to date version of the Modern PnP search web part.
Setting up the search box
- Select the edit icon (pencil) for the PnP- Search Box web part
- Navigate to the third page using the next button.
- Toggle “Use dynamic data source as default input” to On
- Under “Connect to source,” select “PnP- Search Results” (there will be a web part GUID as well) from the dropdown menu
- Under “PnP – Search Results’s properties” select “Search Results” again. There will be a unique code as part of the name.
Setting up the search results
- Select the edit icon (pencil) for the PnP- Search Results web part
On the first page
- Under “Available data sources” as “SharePoint Search”
- Under “Layout slots,” select “Customize”
- Under “Tags,” edit the slot field to prefix “Auto” to the existing text. The final text should read “Autoowstaxidmetadataalltagsinfo.”
- Under “Selected Properties,” select every Site Column you need for your search query and search filters.
- Toggle “Enable localization” to On
On the third page
- Toggle “Use input query text” to On
- Select “Dynamic Value”
- Under “Connect to source,” select “PnP- Search Box” from the dropdown
- Under “PnP – Search Box’s properties,” select “Search query” from the dropdown
- Toggle “Connect to a filters Web Part” to On
- Under “Use filters from this component,” select “Filters” (there will be a web part GUID as well) from the dropdown
Setting up the search filters
- Select the edit icon (pencil) for the PnP- Search Filters web part
- Under “Use data from these Web Parts,” select “Search Results” (there will be a web part GUID as well) from the dropdown
- Under “Customize filters,” select Edit
- Under “Display name” enter the text you want to appear on the page
- Under “Filter field,” select the site column
IMPORTANT: Remember that you must select all site columns under “Selected Properties” in Step 13
- Under “Template,” select the appropriate option which is usually Check box
- Select “Expand by default”
- Select “+” to add more filters, as needed
- Select “Save”
Common issues
-The content types and site columns will not appear as available filters if content has not been tagged to them already
-Site pages must be published after the content type or site column is edited
What’s next?
Let’s put this into context with some business use cases! In this blog series, we will discuss using Modern PnP search to support surfacing Human Resources benefits and company policies.
Emily Mancini 