Enhance your SPFx solution with search capabilities using PnPjs

Introduction

Search is always a nice addition to application, with this blog post I want to introduce you about how to leverage PnPjs to enhance the search capabilities of your SPFx project.

PnPjs is a package, maintained by the community, which easier the life of developers when it comes to interact with SharePoint.

As usual, I’ve prepared a sample solution (you can find it here) to show how you can use the package inside a SPFx web part.

Appearance

Let’s start with the visual appearance of the web part.

First, let’s cover the whole UI of the solution.

Here you can see that the web part contains a text field, a button and a result section.

In the property pane there are a couple of useful settings available:

The available settings, aside of the Show Title toggle, are used to set different customizations:

• The Row Limit enables the selection of how many results are displayed as result of the search query.
• The Target Site picker, provided by the PnP React property controls (more about it here), is used to select the site to allow a more specific search boundaries for the specified query.

The web part shows, as said before, a text input and a search button, which is disabled when there’s no text specified.

Once a text is specified, the search button will be enabled and once pressed it will execute a query with the specified text.

Underneath you will find all the results of the query, limited to the specified row limit defined in the web part property.

Using the Target Site picker you can restrict the search scope of the query. For example, in the following screenshot a site is specified which does not contain any item that match the query “test”.

If the query with “test” is executed now it will not retrieve any results.

Now that we have covered the visual aspect of the solution let’s cover how we can achieve that.

Show me the code

Prerequisites

To use the PnPjs package first you need to install it:

npm install @pnp/sp --save

After the installation you can proceed with the following instructions to use the search capabilities of PnPjs.

Steps to searchability

In the sample solution I’ve defined a SearchService in order to separate the service from the actual web part implementation.

To execute a search query you will first have to create an instance of the SPFI class. In my sample this is done in the web part main class, but you can instantiate it wherever you need to, the only required parameter is the web part context.

First of all you will need to specify a new import:

import { spfi, SPFI, SPFx } from '@pnp/sp';

Once imported, you can use those functions to create a new SPFI instance:

this._sp = spfi().using(SPFx(this.context));

Note: The SPFI class is used to define the _sp variable.

Once that the instance has been created it’s possible to use it.

To execute a query you will first have to define an instance of ISearchQuery. With that object you can specify various properties. In this sample I’m defining only the query text and the limit of results.

const query: ISearchQuery = {
  Querytext: searchQuery,
  RowLimit: rowLimit ?? 5,
};

Once the query object is defined, it’s possible to use the SPFI instance to actually execute the query.

const searchResults = await this._sp.search(query);

After calling the search method it returns a result, if the TotalRows property is not zero, the results will be mapped and returned to the caller.

return searchResults.PrimarySearchResults.map(
  (result: { Title: string; OriginalPath: string}) => {
    return {
      Title: result.Title,
      OriginalPath: result.OriginalPath
    };
  }
);

Another nice trick that I want to show here is how to scope the search query to a specific SharePoint site.

To scope the query by site it’s a simple task, all you need to do is to add the site URL to the query with the prefix path:. For example, if you’re searching for “text to find” :

text to find path:https://<sharepoint-site-url/sites/<siteName> 

Conclusions

PnPjs is an awesome community driven package that simplify the life of us developers. In this blog post I covered only a little bit of what’s possible with the search capabilities offered by the PnPjs package.

Since this blog post is just an introduction to what’s possible, if you’re interested in knowing more you can have a look at the official documentation of the search method here.

Hope this helps!