Use the MGT SearchBox control in a SPFx solution

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the SearchBox control.

I will not cover in detail the implementation, it’s not the scope of this post, if you’re wondering how to achieve all the steps to enable you to use MGT inside SPFx you can have a look at my previous post or have a look at the code of this sample here.

The SearchBox control is used to display a textbox control to enable the user to search for something, this control can be used for whatever you need to.

I’ve prepared a sample solution to show the possible control configurations so, starting with the whole result here are the instances of the control:

The basic usage one just show the control without any configuration.

With the custom search term instance you can specify a custom search value to be set in the control value.

The custom placeholder instance shows how the control renders when setting a custom placeholder instead of the default placeholder string.

In the end there are two instances that display a more real world scenario.

The custom debounce delay instance shows how to handle the change of the search term after a pre defined delay:

The search term changed event instance display a similar behavior of the previous control instance but it will not get delayed:

Show me the code

To enable the use of the SearchBox control first thing first you have to import it from the MGT React package:

import { SearchBox } from '@microsoft/mgt-react';

The basic, but not functional configuration, is the following:

<SearchBox></SearchBox>

This is just to display how the control renders without any customization.

The following instance displays how to programmatically set the search term through the searchTerm property:

<SearchBox searchTerm={"custom term"}></SearchBox>

Another possible configuration for the UX is the placeholder property where it’s possible to specify a custom placeholder value to be displayed when no value has been specified:

<SearchBox
 placeholder={strings.Placeholder}>
</SearchBox>

In the next sample you can see how to use the debounceDelay property, this property set the milliseconds delay before triggering the searchTermChanged event:

<SearchBox
 debounceDelay={2000}
 searchTermChanged={(e) => 
 this.setState({ changedDebounceSearchTerm: e?.detail })}>
</SearchBox>

Finally the searchTermChanged property allows to specify what to do when a new search text has been specified, to access the inserted text it’s possible to access the detail property of the method argument:

<SearchBox
 searchTermChanged={(e) => 
 this.setState({ changedSearchTerm: e?.detail})}>
</SearchBox>

Conclusions

The control SearchBox does not offer a lot of customization options but it’s pretty useful, moreover because it’s already styled with the Fluent UI style!

Hope this helps!