Customize Search in SharePoint - p2 - Add the Pnp Modern Search Webparts!
Microsoft Designer

Customize Search in SharePoint - p2 - Add the Pnp Modern Search Webparts!

If you have not already, please take a look at


SharePoint Administrator Permissions Required beyond this point!

Microsoft Search is located at the top of the SharePoint page. This is the default search, and as pointed out in the comments it can be customized provided you have the proper permissions, this is at the global level.

Let's explore one way of how we can provide a custom search experience at the site level.

Snapshot of the Custom Search on our SharePoint page!
Snapshot of Custom Search on a SharePoint page.


Step 1 -

From the Github Releases repo, download and install the PnP Modern Search v4 solution web parts!

Documentation

PnP Modern Search Github Repository - Releases

Download the .sppkg package from the latest release!

At this time the latest is PnP Modern Search - 4.14.0


PnP Modern Search sppkg package
PnP Modern Search sppkg package

Step 2 -

In the SharePoint Admin Center, upload the .sppkg package and install!

Under Apps

Click the Open button.


SharePoint Admin Center - Apps
SharePoint Admin Center - Apps

Upload the PnP Modern Search .sppkg package


SharePoint Admin Center - Apps - Upload PnP Modern Search .sppkg
SharePoint Admin Center - Apps - Upload PnP Modern Search .sppkg

Enable the App and go through each of the Approvals in the next page. When you are finished approving, please go to Step 3.

SharePoint Contributor Permissions is all that is required from this point!

Step 3 -

Setup the search webparts on a SharePoint Modern Page!

In your SharePoint instance, if you have not already, create a new Site Page!


Article content
SharePoint - Create a new page

Customize your new Site page by hovering your mouse cursor over the different sections of the page.

I chose to create a main section and a One-Third section


SharePoint Page Sections
SharePoint Page Sections

In the PnP Search section Click the Grey + button and search for PnP

Add the PnP Search Box webpart


Webpart - PnP Search Box
Webpart - PnP Search Box

In the PnP Filters section add the Pnp - Search Filters webpart


PnP Search Filters webpart
PnP Search Filters webpart

In the PnP Search Results section add the PnP Search Results webpart


PnP Search Results webpart
PnP Search Results webpart


Step 4 -

Configure the PnP search webparts!

Starting with the PnP Results webpart, click the Configure button or the Edit properties button.

Select SharePoint from Available data sources.

In the Query template let's setup our searchTerms, we want to search from our Video Document library not the entire site.

{searchTerms}
path:"https://[PATH TO YOUR DOCUMENT LIBRARY]"        

Replace [PATH TO YOUR DOCUMENT LIBRARY] with the actual url of your library.



Search Terms configuration
Search Terms configuration

Next in Selected Properties, find and select the RefinableString you mapped to the Crawled property.

We need to connect our Search Box with our Search Results

In the properties panel of the Search Results webpart.

Go to tab 3:

  1. Select the toggle button for Use input query text
  2. Select Dynamic Value
  3. Set Connect to Source to Pnp - Search Box
  4. Set Pnp Search Box's properties to Search Query
  5. Select the toggle button for Connect to a filters Web Part
  6. Choose the Search Filters Web Part


PnP Search Results webpart properties
PnP Search Results webpart properties


We setup a connection from the Search Results webpart to the the Search Filters webpart, now we need to do the same thing from the Search Filters webpart side.

In the properties panel of the Search Filters webpart.

  1. Set the Use data from these Web parts to the Search Results webpart.
  2. In Filters settings, Click Edit and set the following: Display name: Video Category, Filter field: RefinableString, Template: Check box, Expand by: Checked, Multi values: Checked, Operator between values: Or, Sort values by: Name, Sort direction: Ascending
  3. Click Save

Edit Filters should look similar to this:


Edit Filters
PnP Filters

Our page should now be complete


Search Configured!
Search Configured!

Now you should be able to search on a video topic and apply filters!


Thank you for your time!


My video about creating a Video Library in SharePoint


My video demoing adding search to a SharePoint page.


Kasper Larsen

Microsoft M365 MVP, Senior Solution Architect at Fellowmind Denmark, Maintainer of the PnP Modern search project, " If your Information Architecture is lacking, forget all about a good Search or Copilot experience"

4mo

Thanks for sharing knowledge about PnP Modern Search, but I would like to point out that you CAN modify the default search ( actually named Microsoft search, not SharePoint search) You can to a certain level modify that search experience on the site collection level if you are a Site Collection Admin. If you want to tweak the search on the Organization level, you will have to have the Search and Intelligent admin role.

To view or add a comment, sign in

More articles by Keith Craigo

Insights from the community

Others also viewed

Explore topics