MGT SearchResult control in SPFx

Proceeding with the appointments with the MGT (Microsoft Graph Toolkit) controls today I want to talk about the SearchResult 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 SearchResult control is used to perform a search for a specific type of items for a specific search query using the Graph APIs.

The sample I prepared offers the ability to specify:

• A query : the text to be searched for.
• Use wildcard : define if to add a wildcard (*) at the end of the specified query string.
• Use custom template : specify if show the result using the default template or using a custom template.

Also there are a couple of web part settings available:

• Max results : the maximum results showed for each page of each search query.
• Max available pagination : the maximum available pagination links to be shown.

After the initial UI search options I want to cover how the search results will be displayed. Starting with a simple search query here is displayed how a search for the term "excel" would return some results:

Next I want to show how, by default, the SearchResult component won’t search using a wildcard, for example if I want to search all the files that starts with "power" it won’t show any files:

If a wildcard instead is used, the files with the filename starting with "PowerPoint" will be returned as results:

One last customization that I want to show is the ability to personalize the result template, for example here I removed the user avatar and displayed the file size in a new layout:

Show me the code

To use the SearchResult component it’s required to import it from the MGT React:

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

In the sample the import contains also the File and the MgtTemplateProps classes to be used for the custom template.

There are multiple configurations set in the sample, the control is configured in the following fashion:

<SearchResults 
 entityTypes={['driveItem']} 
 fetchThumbnail={true} 
 queryString={this.getQueryString()} 
 size={this.state.maxResultCount ?? 3}
 pagingMax={this.state.maxAvailablePagination ?? 3}
 />

In detail here are the properties:

• entityTypes: the type of the entities to be searched for.
• fetchThumbnail: specify whether or not the thumbnail of the results should be loaded.
• queryString: the query to be executed to search the items.
• size: the number of the displayed results.
• pagingMax: the maximum page to be displayed in the result.

While most of the properties are pretty self explanatory I think that the entityTypes property needs a bit more explanation. This property accepts an array of strings defining what type of items are being searched for. By default the values are: driveItem, listItem and site.

The supported entity types are the following:

• list
• site
• listItem
• message
• event
• drive
• driveItem
• person
• externalItem
• acronym
• bookmark
• chatMessage

Another useful customization is the ability to personalize how the results will be displayed, to do that you can specify a custom template, for example you can specify it inside the component tag:

<SearchResults 
 entityTypes={['driveItem']}
 fetchThumbnail={true}
 queryString={this.getQueryString()}
 size={this.state.maxResultCount ?? 3}
 pagingMax={this.state.maxAvailablePagination ?? 3}>
  <this.customResultTemplate template='result-driveItem' />
</SearchResults>

The method will return a File MGT component for each result returned by the SearchResult component:

private customResultTemplate = (props: MgtTemplateProps): JSX.Element => {
 if (props.dataContext && props.template === 'result-driveItem') {
  return (
   <div>
     <File fileDetails={props.dataContext.resource} />
   </div>
  );
 }

 return <></>;
}

I want to bring your attention to the template name: "result-driveItem".

In this sample I am searching by driveItems so the result template will be result-driveItem, keep in mind that if you want to customize the template for any other supported entity type you will have to specify result-{entityType} where {entityType} is the type of the entity for which you want to override the default template.

Conclusions

The SearchResult component is an awesome ready-to-go control that let’s you achieve a great search functionality with practically zero effort, it’s also great with the SearchBox MGT component! If you’re interested check out my previous blog post.

Hope this helps!