Build a custom Netflix Search Experience In SharePoint Online using PnP Modern Search

🧐 So what's this all about?

The out-of-the-box search experience within SharePoint Online can be somewhat lacking in terms of the ease at which you can customise it. While there is the ability to add a certain degree of customisation through the search and inteligence centre...well.. it's not great!

In this tutorial I am going to show you how you can create a totally custom search experience for your users within a modern SharePoint Online Communication site.

I briefly demo'd this search experience within my How to build Netflix in SharePoint Online video and received a lots of requests to show exactly how I built it. So... that's what this post is!

If you have not read or watched my video on the Netflix solution, it would be a good idea to do so now as it will give you the context for this tutorial especially when I start taliking about 'video categories'

With that being said, what we are aiming for is shown in the diagram below.

So the idea is that when a user is on a specific site (My ShareFlix site in this example), when they enter a search term into the search box, they will be redirected to a custom search page and experience. So in essence, we are hi-jacking the out-of-the-box search experience!

Pretty cool!

By doing this, we have absolute control of how we display our search results and what interaction we allow our users to have with them.

🏁 Search solution pre-requisites

There are a few pre-requisites that you must have in place in order to follow along. And both will require you or somebody (who is willing to do your bidding) to have access to the SharePoint Admin Centre within Microsoft 365.

Maybe time to call in a favour or else be on the hook to owe one back... it's worth it though!!

So the pre-reqs are as follows:

Pre-req 1: You will need to intall the PnP Modern Search set of web parts.

The PnP Modern Search web parts are a set of web parts that give you search super powers within SharePoint Online. They are open source and well trusted and used within the SharePoint Online community. You can trust them (or at least myself and thousands of others do).

To install them you need to go to the PnP Modern Search site on GitHub and follow the installation instructions. It's all very straight forward to do so don't worry.

Once you have installed them within the SharePoint Admin Centre, they should begin to show up within your sites where you can then select them (as shown below).

When you see these web parts you know you are golden and good to go!

Note: These can take up to 24hrs to actually show up on your site after installation so don't panic if you don't see them straight away. Keep calm and wait just a little bit 😉

Pre-req 2: Create a managed property for your video category refiners

In the ShareFlix solution, we essentially have a load of 'video' pages within our site.

We also created a managed metadata column within our site pages library (where we store these pages) which references a 'Video Category' term set within the term store (don't panic, it's all explained in excrutiating detail in the ShareFlix video and post).

The reason we did this was so that we could then tag our video pages with the relevant video category e.g. 'Award Winning, 'Children & Family' etc.

For this search solution, we want to be able to filter the search results by 'Video Catgeory'.

To do this, we need to do some admin magic also known as 'create a managed property within the search schema' (I know, 'admin magic' has a much better ring to it!)

That is what this pre-req is all about.

Very Very Important!!: You can watch exactly how I do this here where I also give a more detailed explanation of why I do it. This is the most complicated part of this whole tutorial so I highly recommend watching me do this rather than just reading it!

But here are the high level steps of what's involved:

• 1. Go to the SharePoint Admin Centre and select 'More Features'
• 2. From the options shown, choose 'Search'

• 3. Click 'Manage Search Schema'

• 4. Select 'Crawled Properties'

• 5. Search for the column within the search box which you want to be able to filter by (in this example I searched for 'videocategory')
• 6. Select the matching 'Property name' from the results of your search (my matching Property Name was 'ows_VideoCategory')

• 7. Click it and then select 'Add a Mapping'

• 8. On the 'managed property selection' pop-up, search for 'RefinableString'
• 9. You will see a load of 'RefinableStringXX(Text)' results. Choose one and click 'OK' (I chose 'RefinableString05' as I know I have not already mapped any other crawled properties to it)

🎉🎉🎉 Congratulations... that's the hardest part done!

Note: Again, it can take some time for these changes to take effect so be prepared to give it about 24hrs before you can actually use this mapped property. It's worth it... I promise!

🔎 Create our custom SharePoint search results page

Now that we have that out of the way, we can get into building our custom search results page (about time right!).

So this bit is straight forward and it starts the same way you create any page within a SharePoint Online site.

• 1. Go to your site homepage
• 2. Click 'New' in the top left of the page (beneath the header)
• 3. Select 'Page'
• 4. Select the 'Blank' template and then click 'Create Page'

Once you have your new page, give it a snazzy title such as 'Search Results' and add a 'one-third left' layout.

• 6. On the left you want to add the 'PnP - Search Filters' web part
• 7. And on the right you want to add the 'Pnp - Search Results' web part

And now we just need to configure the web parts!

🎯 Set the scope of the PnP Search Results web part

Unless we give the Search results web part some guidelines, it's not going to know where exactly we want it to pull results from. So we need to tell it or, set the 'scope'.

To do this, open the settings of the search results webpart by licking on it and then clicking the pencil icon to open the settings panel.

Once in here, do the following:

• 1. Under the 'Available data sources' section, choose 'SharePoint Search'

• 2. Under the 'SharePoint Search' section, we need to tell the web part to only pull results from our sites 'Site Pages' library (remember, this is where we are storing our video pages which is ultimately what we want to be searching in). To do that, beneath {searchTerms} type in 'Path' followed by the url of your sites Site Pages library. Then click 'Apply'

• 3. Now we need to exclude certain results from coming back such as the 'Templates' folder within the site pages library. To do that, we will ask the web part to only show items from the site pages library where the Content Type = 'Site Page' (the Templates folder has a Content Types = 'Folder'). So, type in 'ContentType:"Site Page"' and click 'Apply'

• 4. And finally we want to exlude this search results page itself from being returned (as at the end of the day, the search results page is just a page which also has a content type = 'Site Page'). To do this, type 'Not title:"Search Results"'. You can exclude as many pages as you need to by following this format. (Note: I have a typo in the screen shot below... it should say 'title' as opposed to 'tile'... sorry about that!)

🔭 Add our managed property to the PnP Search Results web part

Next, we need to tell the search results web part to take notice and look at the managed property we created above.

How this web part works is, it will pull back results from where we have asked it to (when we set the scope) and it will show us all of the things (properties/metadata) it can pay attention to. But, unless we tell it exactly which things are important, it will essentially ignore them.

So we need to tell the web part to pay attention to 'RefinableString05' which as we know, represents our video category metadata that we have tagged our video pages with.

Are you still with me?? If this is getting a bit heavey... watch this section of the video.

So to make the Search Results web part pay attention to 'RefinableString05', do the following:

• 1. In the Serach Results web part settings, click the 'Selected Properties' frop down

• 2. This will open up a looooong list of properties. From this list you want to make sure that whatever RefinableSting you mapped your video category to is displayed in this list and the check box is ticked (RefinableString05 in my case). Remember: it can take 24hrs to appear after you have created the mapping!

Nice job, now we can start using the video category metadata within the solution (that's the next few sections)

⚒️ Amend the search result card layout

We want (or at least I did anyway!) to make a small change to the result card. That change is to remove the default way the video category tage appears on the card (with all thos random numbers and letters), and replace it with just the actual tag.

To make this chnage, simply...

• 1. Open the Search Results web part settings and go to page 2of 4 of the settings (pagination at the bottom of the panel)
• 2. Click 'Manage card fields'

• 3. On the pop-up window that appears, you want to untick the check box beside the 'Tags' row

• 4. The select the drop down that appears and then select your RefinableString (again, RefinableString05 in may case)

• 5. Then click 'Save' which will lock in your change and close the pop-up and, best of all, you will have a much prettier card!!

⚙️ Add the PnP Search Filters web part and configure

Ok, so at this stage our Search Results are looking sharp! We now need to draw our attention to the 'Search Filters' web part and get it working with the 'Search Results' web part.

• What we need to do here is essentially tell both the Search Filters web part and the Search Results web part that they are friends and are working together.
• We also need to tell the Search Filters web part to filter by our video category (our trusty RefinableSting again!)

So to do this...

• 1. Click on the saerch filters webpart and then click on the little pencil icon to open up the Search Filters settings panel
• 2. Under 'Available Connections' click the drop down and select the 'Search Results' web part (it will be the only option)

• 3. Then, in the same settings panel, under 'Customize filters', click the 'Edit' button

• 4. In the popup that opens up, you will now crerate the Video Category filter.
  • Under 'Display Name', enter anythiing you want. This wil be the title for the filter we are creating. I chose 'Category'
  • Under 'Filter field', select the dropdown and slect your RefinableString
  • Under Template, choose 'check box'
  • Tick the boxes for 'Expand by default' and 'Show count'
  • Then click 'Add and save'

• 5. Now, open the settings panel for the 'Search Results' web part and go to page 3 of 4 and toggle on the 'Connect to a filters Web Part'. Then select the only option available which will be the 'Search Filters Web Part'

And now you should see your filters appearing!

🧭 Redirect site search queries to our custom search page

The final thing we need to do to make us SharePoint Online Search Rocktars, is to connect the site search box to our new custom SharePoint search page. So that, when somebody searches for something on our site, they are directed to our new search page and the results matching their searh term are displayed.

To do this...

• 1. Copy the URl of your custom search page (make sure it's not in edit mode)
• 2. Click the cog icon, then click site information

• 3. Then click 'View all site settings'
• 4. On the Site Settings page, click 'Search Settings'

• 5. In the 'Which search results page should queries be sent to?', untick the 'Use the same results page settings as my parent' and then past in the URL of your custom search results page in the 'Results Page URL' input box. Then click 'Ok'.

• 6. Now go back to yor custom serach page and open it in edit mode and then open the setting s for the 'Search Results' web part.
• 7. Go to page 3 of 4 of the settings set it to the following:
  • Make sure 'Use input query text' is toggled on
  • Choose the 'Dynamic value' radio button
  • Set 'Connect to source' to 'Page environment'
  • Set 'Page environment's properties' to 'Query String'
  • Set 'Query string's properties' to 'Query parameters'
  • Set 'queryParameter's properties to 'q'
  • Tick the 'Use default value' check box
  • Enter '* ' in the input box beneath it

Then all that is left to do is to republish your page!

Now whenever a search is carried out on your site, users will be brought to our cool new search page!

Awesome!!!

💡 Summary

So there you have it, and now you have an insight into how you can create a totally custom search experience for your SharePoint Online sites.

I know this one got a bit technical but, if you stuck with it, you have gained a valuable skill that not many other have!

Give it a try and experiment with it. We only scratched the suface of what some of these PnP Modern Search web parts can do. They have a lot more tricks up their silky sleeves!

Thanks for making it this far and until next time! Dan