SPFx PnP Modern Search Web Part In SharePoint Online

Custom search result page in SharePoint Online – SPFx PnP Modern Search solution

No comments

 22,540 total views,  30 views today

On 30th of January 2020, Microsoft has released a solution “Creating custom search results pages in SharePoint Online” using the PnP modern search web part. In this article, we will learn how to work with a custom search result page in SharePoint online using the PnP modern search solution.

A brief summary of the PnP modern search solution web part:

This solution allows you to build user-friendly SharePoint search experiences using SPFx in the modern interface. The main features include:

  • A fully customizable SharePoint search query like the good old Content Search Web Part.
  • It can either use a static query or be connected to a search box component using SPFx dynamic data.
  • Live templating system with Handlebar to meet your requirements in terms of UI + built-in layouts. It can also use a template from an external file.
  • Search results including previews for Office documents and Office 365 videos.
  • Customizable refiners supporting multilingual values for taxonomy-based filters.
  • Sortable results (unique field).
  • Refiners Web Part.
  • SharePoint best bets support.
  • Search query enhancement with NLP tools (like Microsoft LUIS).
  • Extensibility model allowing you to write your own components.

Prerequisites:

Before going to configure this web part, we must have the below prerequisites:

  1. An app catalog site collection
  2. A team site only for a custom search page
  3. Out of the box search box in the office 365 suite bar

Prerequisites – setup (Create a result page):

Step 1: Create the result page in the dedicated search team site.

Browse your dedicated search site.

Click on the “+ New” dropdown menu.

Click on the Page.

Steps to create a page in SharePoint Online - Click on the New button
Steps to create a page in SharePoint Online – Click on the New button

We will be landing in the templates selection page.

Select the default “Blank” template.

Steps to create a page in SharePoint Online
Steps to create a page in SharePoint Online

Enter the page name – here I have given as “Results”.

Enter some texts about the page – here I have given as “Search Results”.

Click on the “Save as draft” button from the left top corner.

Finally, click on the “Publish” button from the right top corner.

Note:

  • Here, we could see the “Republish” button instead of “Publish” because I have already published this page, now editing again.
Steps to create a page in SharePoint Online - publish the page
Steps to create a page in SharePoint Online – publish the page

Once we click on the “Publish” button first time, we will get the below screen to copy the page address.

Create custom search page for the PnP custom search web part
Create a custom search page for the PnP custom search web part

Let’s note down my result page URL:

https://globalsharepoint2020.sharepoint.com/sites/CustomSearchRND/SitePages/Results.aspx

Now, we have the result page ready.

Step2: Search functionality with the out of the box search page

This is the search box by default is enabled in any of the tenants.

SharePoint search with default search page in SharePoint Online
Search with default search page in SharePoint Online

We need to replace the above search box with the office 365 suite bar search box. Let’s look at the below screenshot.

How to enable search box in the ribbon
How to enable search box in the ribbon

To configure the office 365 suite search box, refer to my previous article – Configure SharePoint search box in office 365 suite bar step by step

Search this site Microsoft global search is enabled -Office 365 suite search box
Search this site Microsoft global search is enabled

Once the office 365 suite search box is enabled, type something in the search box – which will take us to the below “_layouts/15/search.aspx” page.

https://globalsharepoint2020.sharepoint.com/_layouts/15/search.aspx/siteall?q=Test
Default organization search result page in SharePoint Online
Default organization search result page in SharePoint Online

In this tutorial, our purpose is to replace the below page,

https://globalsharepoint2020.sharepoint.com/_layouts/15/search.aspx

with the below custom search result page.

https://globalsharepoint2020.sharepoint.com/sites/CustomSearchRND/SitePages/Results.aspx

 

Step3: Change the default search result page query setting

Go to the search setting page by following the below navigation:

Click on the gear icon -> Site settings -> Click on the Search settings from the Site Collection Administration section.

Direct URL to the setting page is:

Syntax:
https://yoursitename.sharepoint.com/_layouts/15/settings.aspx
Example:
https://globalsharepoint2020.sharepoint.com/_layouts/15/settings.aspx

Go to the search section, then click on the “Search Settings” link.

Search settings page configuration in SharePoint Online
Search settings page configuration in SharePoint Online

Then we will get into the search settings configuration page.

Enter the below data.

Enter a search center URL – in the search center URL box, enter the custom result page URL.

https://globalsharepoint2020.sharepoint.com/sites/CustomSearchRND/SitePages/Results.aspx

Which search results page should query be sent to?

By default “Use the same results page settings as my parent.” checkbox will be selected, uncheck this.

Select the radio button – Send queries to a custom results page URL.

Enter the custom search result page in the “Result Page URL” box.

https://globalsharepoint2020.sharepoint.com/sites/CustomSearchRND/SitePages/Results.aspx
Search settings page configuration in SharePoint Online
Search settings page configuration in SharePoint Online

Click on the OK button – then wait for a minute to get the changes affected.

The above setting can be updated using the below PnP command as well:

Set-PnPSearchSettings -SearchPageUrl "https://globalsharepoint2020.sharepoint.com/sites/CustomSearchRND/SitePages/Results.aspx"

Now, type something in the top search box and hit enter – I have typed “Test” word.

Office 365 suite search box test in modern SharePoint Online
Office 365 suite search box test in modern SharePoint Online

In the next page, we could see that the out of the box “/_layouts/15/search.aspx” page has been replaced with the custom result page  which is hosted in the different site collection:

https://globalsharepoint2020.sharepoint.com/sites/CustomSearchRND/SitePages/Results.aspx

And in the middle of the page, we could see the search result has been displayed for the keyword “Test” and at the right side we can see the custom refiner web part. These two web parts are custom SPFx PnP modern search web part.

PnP SPFx modern custom search result web part
PnP SPFx modern custom search result web part

By now, we have seen the modern search result is working as expected – now we will see how to configure this modern search web part.

How to configure the modern PnP search result page?

There are majorly two sections on this:

  • App Deployment
  • App Configuration

Step 1: App Deployment

Download the PnP modern search package file (click on the file name) “pnp-modern-search-parts.sppkg“.

GitHub location – https://github.com/microsoft-search/pnp-modern-search/releases/tag/3.11.1

Log in to your tenant app catalog site collection.

https://globalsharepoint2020.sharepoint.com/sites/GlobalSharePointDiaryAppCatalog

This is my app catalog site collection – similarly, you can navigate to your app catalog site collection. If you have not yet created app catalog site collection, refer to my previous article to create it – Create app catalog site in SharePoint online step by step

Click on the “Apps for SharePoint” document library.

Now, drag and drop or upload the file “pnp-modern-search-parts.sppkg” which you have downloaded just before. 

Note: The user must be an app catalog site collection administrator otherwise we cannot upload it, even though the user has the global administrator role, refer to my supporting troubleshooting article for this – Can not upload ShortPoint App to SharePoint App Catalog

On the successful upload, we will get a pop-up dialog “Do you trust PnP Modern Search – Search Web Parts?” that has the below messages:

"The client-side solution you are about to deploy contains full trust client side code. The components in the solution can, and usually do, run in full trust, and no resource usage restrictions are placed on them.

This client side solution will get content from the following domains:

SharePoint Online

Make this solution available to all sites in the organization

If you clear this setting, users won't be able to add the web part to pages. The web part will continue to work if it was already added to pages."

Here click on the “Make this solution available to all sites in the organization” checkbox otherwise for each site this solution has to be deployed separately.

Click on the “Deploy” button.

Deploy PnP custom modern search web part in the tenant app catalog site
Deploy PnP custom modern search web part in the tenant app catalog site

Wait for a minute.

Step 2: App Configuration

Navigate to your custom result page what you have created, like below:

https://globalsharepoint2020.sharepoint.com/sites/CustomSearchRND/SitePages/Results.aspx

Click on the page Edit link like below:

Configure PnP custom modern search web part in the custom modern page
Configure PnP custom modern search web part in the custom modern page

Configure the section layout.

We need to have two web parts for our purpose:

  • Search result web part at the center.
  • Refiner web part at the right side

So, accordingly – we need to set up the layout.

Click on the section edit button, then from the right side layout options, select “One-third right”

Configure the section for modern search web part in the custom modern page
Configure the section for modern search web part in the custom modern page

Add custom search results web part:

Click on the add web part plus “+” button, then in the web part search – type “search” text because there will be multiples web parts, manual searching will be time-consuming.

Now, we can see, there are four web parts with “Search” text because this SPFx solution is bundled with four web parts.

  1. Search Box
  2. Search Filters
  3. Search Results
  4. Search Verticals

The scope of this tutorial is to configure the “Search Filters” and “Search Results” web part, so I will focus on these two web parts.

Select the “Search Results” web part.

Add search results web part in the custom modern page
Add search results web part in the custom modern page

Similar way, add the “Search Filters” web part for the search refinement – in the right section.

Add search Filters web part in the custom modern page
Add search Filters web part in the custom modern page

Refiner web part or search filters web part configuration in the custom modern page:

Click on the “Search Filters” web part edit button.

From the configuration pane:

For “Connect to search results web part”, select “Search Results”.

Web part title, let’s name as “Refiner”

There are two filters layout:

  • Vertical and
  • Panel

The default selection is “Vertical” let’s go with that.

Refiner web part or search filters web part configuration in the custom modern page
Refiner web part or search filters web part configuration in the custom modern page

Edit Refiners Configuration:

By default in the refiner web part only three manage property columns is displayed:

  • Created Date
  • Size of the File
  • Taxonomy Terms (Exceptional – if the search result returns any manage metadata columns, then only this is displayed otherwise not).

So, if you want to add any additional columns apart from the above, how we can?

Click on the “Edit Refiners” link from the refiner settings pane.

Then in the “Edit refiners” configuration page – we can the additional manage property column.

Edit refiner configuration in the search filter web part
Edit refiner configuration in the search filter web part

 

Search results web part configuration:

Similar way, configure the search result web part.

Click on the search result web part edit button.

Now, the web part configuration page will be opened in the right pane.

The “search results” web part is three steps configurations.

  • Search Query configuration
  • Search Settings configuration and
  • Styling Options configuration

Search Query configuration (1/3):

In the search query configuration, select the below:

Page environment’s properties: Search
Search: Search Query

 

Search results web part configuration in the custom modern page

Search Results web part configuration in the custom modern page:

Click on the “Next >” link.

Search Settings configuration (2/3):

In the search settings configuration, configure the below:

Query template: {searchTerms}

Connect to a search refiners Web Part: On

Note: This is very important otherwise search refiner will not work.

Use refiners from this component: Select “Refiner” web part

Rest all configurations keep as default.

Search settings configuration in the modern search results web part
Search settings configuration in the modern search results web part

Click on the “Next >” link.

Styling Options configuration (3/3);

There are various layout selection options:

  • Simple list
  • Details list
  • Tiles
  • Carousel
  • People
  • Debug
  • Custom

Each template has a different look, feel, and purpose.

In this demo, I have selected the “Detail list” layout that will look like a list view web part. And the beauty of this layout is, we can show or hide as many columns we want through the manage columns configuration.

Styling Options configuration in the modern search results web part
Styling Options configuration in the modern search results web part

Manage columns configuration in the “Details List” layout:

Click on the “Manage columns” link from the “Template Options” header.

By default, the below three columns will be configured:

  • Title
  • Created
  • Summary

Now, here – we can configure as many columns we want through the:

  • Column display name – it could be any valid text, relevant to the actual column display name.
  • Column value: Need to select the managed property from the dropdown list or need to use the “Use Handlebars expression“.

Note:

The easiest way to use the managed property value than the “Use Handlebars expression“.

 

Manage columns configuration section in the details list layout of styling Options
Manage columns configuration section in the details list layout of styling Options

Finally, the custom modern search result web part and refiner web part looks like below:

PnP SPFx modern custom search result web part

Note:

In the above demo, I have shown the configuration from my already configured web part – so while you will refer this tutorial for the configuration – you might see a little different.

Generic configuration of “Search Results Web Part” or  “Search Filters web part”.

We need to click on the web part “Configure” button, in the right configuration pane, we can see three dots”…”,  please click on this.

Then finally click on the “Connect to source” link. This is an entry point for the configuration – rest all same as the above demo.

Generic configuration of modern SPFx Web Part
Generic configuration of modern SPFx Web Part

Download:

The PnP modern search solution web part source code can be downloaded from here:

Summary:

Thus in this article, we have learned the below concepts with respect to PnP modern search solution web part configuration:

  • What is the PnP modern search web part?
  • What is the SharePoint modern search refiners?
  • How to configure the PnP modern search solution web part?
  • How to change the settings for the Search Results Web Part?
  • How to configure the search results web part to use a new result source in SharePoint?
  • How to configure the search results web part to use a new result page in SharePoint?
  • How to deploy a custom SPFx solution in the SharePoint app catalog?
  • How to configure the section and web part property in the modern SharePoint online page?

References: