Although SharePoint search boxes are woven into the fabric of the modern SharePoint UI and are soon to be added to the app bar ( this feature is in targeted release at the time of writing) lifting them outside of the page, there is sometimes still the need for an in-page search box. We’ve lost count of the times when customers ask for an ultra-clean search page a la Google or Bing.

Well, if you have a need for an in-page search web part, with some added features, that can be added to any modern SharePoint page then we have a solution that does just that, in the form of the Kaboodle Scoped Search Box Web Part.

This web part is free, all we ask is that you provide us with some constructive feedback. Tell us if its useful or where it misses the mark.

This page will:

Provide you with an overview of the web part
Guide you through the steps to download and install the web part
Demonstrate how to add a web part instance to a page
Explain how to configure the web part

Overview

The web part is built using the React SearchBox control, delivered as part of the Office Fabric UI. All we did was wrap this component in a SPFx client web part and integrate it within the context of the page to which the web part is added.

The screenshot below shows the web part on a page.

The web part has 4 elements, or child controls, that can be displayed on the page, as follows:

Scope Icon: This is an icon that is used to indicate the scope of the search. The SharePoint modern search UX offers us the following 3 scopes:
- Organization: Search everywhere in the O365 tenancy.
- Hub: Search the collection of sites within the same hub (when the site is part of a hub).
- Site: Search the current site only.
Scope Picker: This allows users to pre-select not only the scope of their search (everywhere, hub or current site) but also narrow the type of entity being searched for. The options are:
- Everything: All content.
- Documents: Just return documents.
- Sites: Just return web sites.
- News: Just return published/promoted news articles.
- People: Users in the organization.
Search Term Box: This is a free-text box in which users can provide one or more keyword search terms.
Search Button: Clicked by the user to submit their search query. When clicked the page will be redirected to the standard SharePoint modern search page with the appropriate set of parameters and search terms.

The web part is highly configurable so that the only control which must be shown is the Search Term Box, all the other elements are optional. You don’t even need the Search Button as simply pressing the Enter key will be enough to trigger the search process.

Download and add to the App Catalog

You can download the solution package from here. This links to a zip file from which you will need to extract the following solution package file:

Kaboodle Scoped Search.sppkg

This is the only file within the zip.

Then log on as an administrator to your O368 SharePoint tenancy and access your App Catalog site. Note that an App Catalog site is not automatically provisioned but you need to have one to be able to add any custom solutions to your tenancy.

From your App Catalog, site click on the Apps for SharePoint link and upload or drag and drop the solution package file into the Catalog.

Once the package has completed uploading, the Do you trust… dialog will pop up. Click the Deploy button to make the solution available in the tenancy.

If you want to make the web part available to all web sites then check the Make the solution available to all sites in the organization checkbox. If you choose not to select this option then the app that delivers the web part will need to be explicitly added to every site where the capability is required.

Note that if you do decide to make the solution available to all sites it may take a few minutes for the web part to show up in the UI as these solutions are deployed by a timer job which periodically runs behind the scenes.

Next click the edit button for the item in the app catalog so that you can update solution properties.

Then update the item properties as shown and described below.

Short Description: Scoped search web part.
Description: Provides a scoped web part that can be added to any modern SharePoint site page.
Icon URL: https://kaboodlesoftware.files.wordpress.com/2019/05/scopedsearchappicon.png
Publisher Name: Kaboodle Software
Support URL: https://kaboodlesoftware.com/products/framework-solutions-for-sharepoint-modern/scoped-search-box/

Add a Web Part to a Site Page

If you chose not to make the solution available for all sites then you will first need to add the Scoped Search app to the site in which the web part is to be used.

Once the web part is available, simply add an instance to any SharePoint modern page, as you would any other web part.

You can simply type ‘Search’ in the search box of the web part picker dialog or expand the dialog to view all web parts. The Scoped Search Box web part is listed in the Discovery group.

When selected, a web part instance will then show up on the page as shown below.

Web Part Configuration

You can optionally add a header to the web part simply by typing the header text into the web part where the placeholder text reads Add Web Part Title.

You can edit the properties of the web part in the standard way. Web part properties are listed over 2 pages.

Property Settings Page

This page contains 2 expandable sections.

Display Options Section

This section hosts controls which govern how the web part is displayed.

Placeholder Textbox: Used to specify text that is shown to users to prompt them to provide search terms in the Search Term Box.
Default Scope Picker: Used to select the default scope for the web part.
Show Scope Picker Checkbox. When checked the scope picker control will be displayed allowing users to pre-select the scope of their search. When unchecked, the scope picker will not be displayed and the scope used for all searches will be that specified as the default scope.
Show Scope Icons Checkbox: When checked a scope icon will be shown before the scope picker and search term box controls. The icon is used to indicate whether the current scope is at the organization, hub or site level. When unchecked, no scope icon is displayed.
Show Search Button Checkbox: When checked, the search button is displayed. When unchecked the search button is not rendered. To initiate search actions, users can either click on the search button or simply click the Enter key whilst focus is within the search term box.
Search Button Text Textbox: Used to set the text shown in the search button.
Search Button Style Picker: Used to select the style used for the search button.

Hub Settings Section

This section contains a single textbox control which should be configured with the hub search scope Id.

The hub search scope Id is a numeric value that is used to indicate the scope of the search as being within a specific set of sites, all within the same hub.

These Ids are unique to each tenancy and to each hub within each tenancy. Sadly, SharePoint doesn’t currently provide an API to access the hub search scope Id but it’s really easy to find it what your hub scope Id is.

From any site within the hub (but not the hub site itself), simply execute any search using the standard SharePoint search box and then set the scope to be that of the hub. You will see a &s={id value} parameter in the address bar of your browser.

This is search scope Id for the current hub site and it is this values that needs to be set in the Hub Scope ID textbox.

The set of hub scoped options will only be displayed if:

A valid scope ID is specified
The site is not the hub site itself, as any search executed from the hub site is always scoped at the hub level in any case

Help and Resources Page

The help and resources page of the web part provides links to the Kaboodle Software web site and this product page, as well as providing version release information.

In conclusion

We hope you find this web part useful and please contact us if you have any issues or ideas for improvement.