This project is archived and not maintained anymore. This is an old web part folks, the SharePoint Online has changed so much after the publishing of this that it is likely that is will not work anymore. I currently do not have time to maintain it. You can have a look at the PnP Samples and see if you can find similar sample there.
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.
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.
This is why 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.
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.
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 sitepages.
- SharePoint Framework development environment already set up.
| Solution | Author(s) |
|---|---|
| react-search-box | Velin Georgiev (@VelinGeorgiev) |
| Version | Date | Comments |
|---|---|---|
| 0.0.1 | April 19, 2017 | Initial commit |
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
- Clone this repository.
- Open the command line, navigate to the web part folder and execute:
npm igulp test(optional)gulp serve --nobrowser
- Navigate to the hosted version of the SharePoint workbench (
https://<your_tenant>.sharepoint.com/sites/<your_site>/_layouts/15/workbench.aspx). - Add the SPFx React Search Box web part.
This Web Part illustrates the following concepts on top of the SharePoint Framework:
- Using React for building SharePoint Framework client-side web parts.
- Using Office UI Fabric React styles for building user experience consistent with SharePoint and Office.
- Passing web part properties to React components.
- Passing localized strings to React components.
- Unit tests including spies, mocks and faking class methods and properties with stubs.