Custom Search Page for SharePoint Online

2/24/2021
Applicable to: Smart Search

The Smart Search is a client-side web part based on SharePoint Framework (SPFx) and designed for SharePoint Online and Microsoft Teams. Once the web part is deployed, it immediately becomes available for use within SharePoint Online and Microsoft Teams.

This article describes how to set up a search page and configure Vitextra Smart Search web part to create a custom search results page for SharePoint Online from scratch.

Create New Page

Open SharePoint site where you need to set up a search results page. Select + New and then select Page.

New Page Menu Item

New Page Menu Item

In the dialog, select the template you prefer and click Create page button.

💡 Tip
Vitextra Smart Search supports a single app part page. You can switch to App tab and select Smart Search to create a new single app page.

On the new page, select the circled + icon. Scroll down and select Smart Search in the list of available web parts.

Web Part Gallery

Web Part Gallery

Web Part Configuration

Open configuration page of the Smart Search web part.

Mode

The Smart Search supports two modes of operation:

  • Single Source. Choose one of the built-in search sources to narrow the search scope. Tabs are not presented in this mode.
  • Multiple Sources (Tabs). Users can switch between selected sources.

Smart Search. Tabs (Search Sources)

Smart Search. Tabs (Search Sources)

📝 Note
To hide icons in tab caption clear Icon field in the search resources panel.

Appearance

Smart Search. Appearance Settings

Smart Search. Appearance Settings

The settings below are to manage the appearance of the web part.

Display Search Box. Show or hide the search box.

💡 Tip
The web part uses the search query from the top header search bar if it's not empty.

Default Search Query. Search query to perform a search if search box value is blank or the search box is hidden.

Enable Paging. Show or hide pagination.

Page Size. Number of items to show per page.

Show Total Count. Display total number of search results.

Filtering

Smart Search. Filtering Settings

Smart Search. Filtering Settings

Select Show Filters to enable the refinement panel.

To choose which fields will be available for filtering and set their order, choose the Configure Refiners button.

💡 Tip
If the refinement panel is enabled users can filter search results by tag by clicking it in the list.

Sorting

Smart Search. Sorting Settings

Smart Search. Sorting Settings

Select Enable Sorting to set default sorting of the search results.

📝 Note
Sorting is not applicable for Popular and Recently Changed Items data sources.

Item Layout

Smart Search. Item Layout Settings

Smart Search. Item Layout Settings

The search result item has twelve elements to show information. You can show or hide each of them except the Title.
Also, you can select the length of the summary (from 100 to 300 symbols).

Item Actions

The Smart Search provides three actions for users to perform keeping the context and no need to open additional browser tabs:

  • Download
  • Preview for a document to open it in the dialog window
  • Play for video content to start playing it in the dialog

Search Settings

Go to site settings and select Search Settings under Site Collection Administration heading:

SharePoint Site Settings

SharePoint Site Settings

Type in server-relative URL to the new search page in the Results page URL:

SharePoint Site Settings

SharePoint Search Settings

It may take up to 5 minutes for the change to be applied. After that, SharePoint will redirect all search requests to the new page.

Share