Create a custom SharePoint search page

The Digital Assistant web part for SharePoint Online has support for showing Cards in search results on custom search pages. This article describes the process of creating a custom search page using PnP Modern Search web parts. It also includes guidance on connecting the main SharePoint search to your custom search page, and configuring the Digital Assistant web part to show Cards in search results.

These instructions are for v3 of the PnP Modern Search web parts. Instructions for v4 will be available when the web parts are fully released.

Creating a custom Search Page

You will need to deploy the PnP Modern Search web parts solution to your SharePoint site or tenant before continuing. Instructions for how to do this can be found on the PnP Modern Search website.

First, navigate to your SharePoint site and create a new Page. We recommend using the Blank layout.

SharePoint new menu

You will be redirected to your new page in Editor mode. Add a title to your search page and make any customizations you would like to alter the page appearance.

We recommend disabling comments and removing the Name badge to create a clean page. Additionally, we suggest you delete the default text block and change the main section layout to One-third right to make space for the search web parts.

New, empty SharePoint page with layout options open

Adding web parts

Click into one of the column zones, then click the Plus icon to open the web part picker.

SharePoint web part picker

To create a complete search experience, we suggest adding the following web parts:

Suggested web part layout for a custom SharePoint search page

Note that in Editor view, web parts will display placeholder information. These web parts typically appear blank in normal viewing mode unless they have information to display.

Configuring the web parts

The PnP Modern Search web parts require some configuration to work together. Full documentation for these web parts can be found on the PnP Modern Search website, but we have provided an outline of the steps for each web part below.

Search Verticals

The Search Verticals web part can be used without prior configuration. However, you can optionally configure new tabs to change the available results filters, based on a Result Source Identifier.

To configure these, click on the Search Verticals web part then select the pencil icon that appears next to it. In the property pane, click Configure to open the Result Source configuration pane.

Configuration pane for the Search Verticals web part

A list of common Result Source Identifiers is available here, and instructions for creating custom Result Sources can be found on the Microsoft website.

The Search Box web part can be used without prior configuration. However, you can optionally set a custom placeholder text for the input field.

If you want to connect to the main SharePoint search, you will also need to check the box to Use a dynamic data source. From the Page environment's properties dropdown, select Search. From the Search dropdown that appears, select Search query.

Search Box web part configuration

Search Results

The Search Results web part must be configured to connect to the Search Box. To do so, open the web part configuration pane and click the three dots menu. From the menu that appears, select Connect to source.

Search Results web part configuration

A new dropdown option will appear, labelled Connect to source. From the dropdown, select Search Box. A second option labelled Search Box's properties will appear. From this dropdown, select Search query.

Setting the data source for the Search Results web part

The Search Results web part has now been configured to show results from the Search Box.

Search Filters

The Search Results web part must be configured to connect to the Search Results. To do so, open the web part configuration pane. From the dropdown labelled Connect to search results Web Part, select Search Results.

Setting the data source for the Search Filters web part

You can add or edit the available search filters by clicking the Edit refiners button. From here, you can create new filters based on the available SharePoint properties.

Optionally, you can configure a title to display above the filters by completing the Web part title field.

adenin Digital Assistant

Full guidance on configuring the adenin Digital Assistant web part is available here.

You can now publish your Search Page and test it's functionality. Enter a search query into the search box and press enter; the search web parts should populate with data from your SharePoint site. If results are available from your Digital Assistant, they will be displayed.

Example search results on custom search page

You will need to complete this step with a user account that has sufficient privileges.

To connect the main SharePoint search to your custom search page, first navigate to Settings > Site Collection Administration.

In the Search Center URL field, enter the URL of your custom search page. Then, untick the box labelled Use the same results page settings as my parent and select Send queries to a custom results page URL. Finally, in the Results page URL field, enter the URL of your custom search page.

SharePoint Site Collection Administration Search Settings

Click the OK button to save your changes.

To allow your custom search page to access the query from the main SharePoint search, the Search Box must be configured to use dynamic queries. See the Search Box configuration section for instructions on how to do this, if you have not already done so.

Your custom search page is now fully configured, and is also accessible from the global SharePoint search bar.