SharePoint Framework React Search Box client side web part


This sample contains a SharePoint Framework React Search Box webpart. The SPFx web part can be configured to point to classic search results page url and hides the OOTB modern page search box.

Why another Search Box?


At the current moment (04.17) the default modern Site Page Search Box cannot be configured at all.

Velin Georgiev blog image

The business need is:
- Modern site page to be used as Home page.
- The search box from the modern page should show specific search results i.e. custom search results scope should be configured.

Redirect from modern Site Page to classic search results page


This fulfill the business need, I created simple SPFx search box client side web part to redirect from modern Site Page to classic search results page url where more precise search result scopes configuration can be made.
Velin Georgiev blog image

The web part has custom property where the search results page url can be specified. If blank it will redirect to the tenant enterprise search site (https://<your_tenant>.sharepoint.com/search/Pages/results.aspx).
Velin Georgiev blog image

Position below the actions section on a modern site page


I have added another custom property so the web part can appear just below the actions pane for better user experience. This option is not recommended for production
because uses page DOM manipulation and if the Office 365 team change this DOM elements on the page then it may break the webpart visibility.

Velin Georgiev blog image

This is a temporary solution


Please note this SPFx web part can be used as temporary solution until the Office 365 team provide us with customizable search web part for the modern site pages.
Available on Github

Posted on

Tags: SPFx, SharePoint Framework, Office 365, Office 365 Developer, React client side web part, Typescript, Fabric UI React, OfficeDevPnP, SharePoint Search Box Webpart

Comments