Custom Search Page for SharePoint Online

Applicable to: Smart Search

Effective content searching is crucial for maximizing productivity and ensuring that users can quickly find the information they need within a SharePoint site. The Smart Search web part is an essential tool in this process, offering customizable search functionalities that can be tailored to meet specific organizational needs. Built on the SharePoint Framework (SPFx), the Smart Search web part supports both SharePoint Online and Microsoft Teams, providing a seamless and integrated search experience across platforms.

This flexibility not only enhances the user experience but also improves the accuracy and relevance of search results. By leveraging the Smart Search web part, users can streamline information retrieval, reduce time spent on searching, and ultimately boost overall efficiency.

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

Create New Page

To add and configure the Smart Search web part on a new SharePoint page, start by navigating to the SharePoint site where you want to create the new page. Click on the gear icon in the top right corner and select "Site contents". From there, click on "New" and choose "Page" from the dropdown menu.

Select a page template that suits your needs and click "Create".

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

Once the new page is created, it will automatically open in edit mode. Hover your mouse above or below an existing section until you see a line with a circled plus sign. Click this plus sign to open the web part toolbox. Browse through the available web parts or use the search box to find the Smart Search web part. Click on it to add it to the page.

Web Part Configuration

After adding the Smart Search web part, you can configure its settings by clicking the "Edit web part" button, which looks like a pencil icon, on the left side of the web part. This action will open a configuration pane on the right side of the screen, where you can adjust settings.

Data Source

In the first configuration section, you can choose the scope and operation mode for the web part. You can search within the entire tenant, including OneDrive and team sites, or you can limit the search to the current site collection or site.

There are two modes of operation for the Smart Search: Single Source and Multiple Sources (Tabs). In Single Source mode, you choose one of the built-in search sources to limit the search scope. Tabs are not displayed in this mode. In Multiple Sources mode, users can switch between different sources.

Appearance

Below are settings to manage the appearance of the web part:

Display Search Box. Show or hide the search box.

💡 Tip
The Smart Search web part uses the query from the top header search bar if there is no value in the search box or the box is hidden

Default Search Query. Query to use when the search box is empty or hidden.

Enable Paging. Show or hide pagination.

Page Size. Number of items per page.

Show Total Count. Displays total number of search results.

Filtering

Click "Show Filters"" to enable the refinement panel. To choose which fields will be available for filtering and set their order, click 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

Click "Enable Sorting" to set the default sorting order for the search results.

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

Item Layout

Each search result item has 12 fields to display information. You can show or hide each field except the title. Also, you can choose the length of the summary (from 100 to 300 characters).

Item Actions

The Smart Search provides three actions for users to take without opening 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.

Conclusion

The Vitextra Smart Search web part is a versatile and powerful tool for enhancing the search experience in SharePoint Online and Microsoft Teams. By creating a custom search results pages, it provides a tailored and efficient way to find and manage information. With features like multiple search sources, customizable appearance, and advanced filtering and sorting options, the Smart Search significantly improves the usability and functionality of your SharePoint environment.

Implementing the Smart Search can streamline your search processes, making it easier for users to locate the information they need quickly and effectively.

Terms

App Page

App Page in SharePoint Online is a specialized type of page designed to host a single web part or app. It provides a focused, full-page experience dedicated to a specific functionality or application, allowing the app to utilize the entire page space without other distractions. This layout is ideal for scenarios requiring a large amount of data display or complex interactions, such as dashboards, data entry forms, or detailed reports.

Microsoft Teams

A chat-based collaboration platform for business communications with useful features for online meetings, live events, document sharing.

OneDrive for Business

OneDrive for Business (previously SkyDrive Pro) is a managed cloud storage for work or school organizations that lets you share and collaborate on work documents with co-workers. Physically hosting infrastructure for OneDrive for Business can be hosted on-premises or in the cloud as a purchased service.

SharePoint Framework (SPFx)

Model for building client-side web-part, components, and extensions for SharePoint Online, SharePoint On-premises, and Microsoft Teams. SPFx customizations are based on JavaScript and support Modern UI natively.

Site

A SharePoint Site is essentially a container for information within the SharePoint platform. SharePoint Sites typically offer a range of features including document libraries, lists, calendars, discussion boards, and workflows, facilitating efficient collaboration, communication, and document management within teams or across departments. These sites can be customized and configured to suit the specific needs and workflows of an organization.

Site Collection

A SharePoint Site Collection is a grouping or container within the SharePoint platform that consists of one or more SharePoint sites, subsites, and related content. A SharePoint Site Collection typically shares common settings, permissions, and configurations, providing a cohesive environment for users to work together on projects, departments, or specific areas of focus. Site Collections are often used to segregate content and control access rights based on organizational structure, security requirements, or project needs.

View more terms in the Glossary