Custom Search Page for SharePoint Online
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.
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 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.
📝 Note
To hide icons in tab caption clear Icon field in the search resources panel.
Appearance
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
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
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
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:
Type in server-relative URL to the new search page in the Results page URL:
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.