SharePoint Tutorial - How to build a custom search page experience

In this video, I demonstrate how to build a custom search page within a SharePoint Online site. The search experience I have created in this video is based on the Netflix search experience (which I first demoed in my 'How to Build Netflix in SharePoint' video a few months ago).

Some people had asked me how I built the search experience shown in that video, so.... here you go!

This solution has two main pre-requisites which I walk through in the video:

1. Access to the SharePoint Admin Centre
2. You need to install the Modern Search PnP web parts

It's all plain sailing after that 😉

Video chapters (in case you are interested in one part in particular!)

0:00 - Introduction
0:27 - Demo of the search experience we are building
1:14 - Search solution pre-requisites
1:50 - Installing the PnP Modern Search web parts
3:23 - Create our custom SharePoint search results page
4:15 - Set the scope of the PnP Search Results web part
7:24 - Create our video category search managed property
11:02 - Add our managed property to the PnP Search Results web part
12:49 - Amend the search result card layout
13:49 - Add the PnP Search Filters web part and configure
16:20 - Redirect site search queries to our custom search page

-----------------------
🎓 MY COURSES:

🚀 Intranet Site Builders Master Class here:

🚀SharePoint Training & Education Platform Site:

🎉🎉🎉 Use coupon code FLASH30 for 30% off (Limited new site launch celebration!) 😁 Just enter at the checkout!
-----------------------

🔗 Links

License code: VWL2DV09KAFEQW1F

[BellowFind]

Please don't stop making these SharePoint Videos haha. These are absolutely brilliant! I'm currently looking at making an Intranet for work and these ideas are brilliant! Thank you so much!

[yehunlavolontededieu]

MAN I'm hooked to your videos, I stumbled on your YouTube looking for scenarios to utilize the ootb PnP search webpart and I almost went through all of your contents. Appreciate mentioning the prerequisites in advance as most of us don't have access to admin center but still i'd learn as a reference.

[bharathskywalker]

Bro, i need to thank you for this, i just complete my site for CONTRACT REPOSITORY for my company, may the force be with you

[MoTechConsulting]

Thank you for this video. You added in a missing piece that I was looking for clarity on, i.e., Managed and Crawled Data. Thanks again.

[MarkRagains]

Thank you for this video - you took us into some tall weeds there but gave us some great tips. I will re-watch parts of this again to be sure!

[tchrapko]

Excellent tutorial, and much more fun to work through than the usual business content. Of course, I'm learning this to apply to the dry material at work, but I appreciate the change of pace. Thanks a bunch!

[chrisco]

Fantastic video, Dan! I've just started implementing PnP Modern Search myself so the timing couldnt be better. Madness that it isnt built in to SharePoint by default.

[mensrea]

Dan, this is very helpful! Thank you so much for providing it.

[pavelrumek]

Hi, great tutorials! I really like the filtering you showed in the video with the McDonald’s page.
Is it possible to use the PnP Search tool together with dynamic filtering?
For example, I’d like to first filter by category—like showing only burgers—and then narrow the results further by searching for a specific phrase. Is that possible to do? Ideally without admin rights.

[JL-hmcw]

Hello Dan. Thank you for making these videos. You make excellent content!

In your case, the VideoCategory column was a choice column. Would this still work if you had used a Lookup Column or Managed Metadata column instead?

[Hikarihiiro]

This is a nice and helpful video. Do you also have video about custom search specific for files?

[pedrotheodoro]

i have a sharepoint hub with 5 sites. Can I include them on the search configuration?

[marinacicchi]

Hi! great tutorial. I managed to do something similar for our document's library, and it was working OK, but after changing the home page, the "use input query text" stopped working.
I updated the search settings with the new url, went back to the PNP search results, and now on QueryParameters's properties, i dont get q only Mode (not matter how many times i refresh) :(
If you can help me please, that would be great! thank you very much

[shauntukuafu]

Apologies if I missed this, but why was jaws returned when you typed in "shark"? That term didn't match your movie title or category. Obviously we know its related to sharks, but how did search know?

[snia.t]

Is it possible to create a multi-select filter? So for instance, I can select movies tagged as "Award-winning" and "Children & Family"?