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.
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.
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).
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.
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