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.
First, navigate to your SharePoint site and create a new Page. We recommend using the Blank layout.
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.
Click into one of the column zones, then click the Plus icon to open the web part picker.
To create a complete search experience, we suggest adding the following web parts:
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.
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.
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.
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.
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.
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.
The Search Results web part has now been configured to show results from the Search Box.
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.
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.
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.
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.
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.