I needed to find a nice way to build a SharePoint Online Search solution for a marketing team recently. They had some requirements that weren’t easily achievable with SharePoint Online out of the box search options. This is where the React Search Refiners solution saved the day.
SharePoint UserVoice has some good news about the Modern Search Centre, but it isn’t ready just yet, so read on!
Preparing Content for Search:
The Marketing team wanted to search for content based on three criteria, type of document, category and product. The content could be across multiple libraries and the sites containing the content included content we didn’t want to appear in search results.
To support these requirements I created the following:
- Term Sets for category and product
- Site Columns for the type of document (choice), category (managed metadata) and product (managed metadata)
- Content Type for marketing content
- Document and Picture libraries with the Content Type assigned.
Search Configuration:
- In Search I created three RefinableStrings each mapped to the Site Columns defined above
- Once done, go to the Library Advanced Settings and choose Reindex
Now I needed some web-parts to build a nice Search page. The React Search Refiners solution was the solution I chose. Adding this solution to your SharePoint Online App Store and then adding the App to your Site gives access to a bunch of webparts including, Search filter, refiners, results and search verticals.
You can download it from here:
In the Search Refiner webpart I configured the Refiners from the Search Configuration above.
On the Search Results webpart I modified the Search Query template to include the content type:
{searchTerms} Path:{Site} SPContentType:MyContentType
Note that the Path part of this query template looks for content in the current site. Remove “Path:{Site}” will search all of SharePoint for items with the specified content type.
the last step is to link the three webparts, this is done in the webpart configuration
This result is a big improvement on the default SharePoint Online search features. Here’s an example of the results page with three webparts, the Search Box, Results and Refiners.
The users can search the product catalogue, filter by the type of document they are looking for and the content creators are confident the results are from marketing content and not other areas of SharePoint.
React Search Refiners is a great tool for building Search based solutions in SharePoint Online. Check it out now!
Useful resources:
https://nikcharlebois.com/creating-custom-search-refiners-in-office-365-using-term-sets/
SharePoint lightbulb moments 