A Comprehensive Guide to Extending PnP Modern Search with Async Calls

Are you looking to extend PnP modern search with an async call? If so, you’re in the right place. I’ve recently delved into Modern Search 4.0 and discovered how to do just that. Let’s start by discussing the use case that led me to this discovery.

Imagine you have several lists, each containing information about a person. Each department makes changes to these lists. The goal is to extract the function and abbreviation of a person from the people search. This requires two search calls – one in the default search, and another in the extended search.

The Challenge

At first glance, it seems simple enough. You could extend the Handlebars file with an extra function. However, after reading some comments, I learned that it’s not recommended to make async calls in the Handlebar. Instead, you should use a web component. I initially thought it would be possible to get the context and use PnP/JS to parse the context, but this isn’t possible in V4.

The Solution

With the help of Robert Schouten and Siddharth Vaghasia, I was able to find a solution. Robert pointed me in the right direction, and Siddharth provided the full solution, which you can find here. If you have any recommendations or improvements, feel free to let me know or fork the project on GitHub.

Step-by-Step Guide

Create a @Microsoft/SharePoint Library Project: Make sure to create a library, not an extension.

Yo install
image | Paul Keijzers

Follow this Tutorial: Once you’ve created your library, follow this tutorial on how to start with extensions in search

Implement the Web Component: Implement the web component in the class and refer to it. In the constructor of the tsx, we parse the service scope to the service.

image 1 | Paul Keijzers

this._userService = new UserService(this._serviceScope);

The UserService is used for the async calls and has the constructor to create the http client etc.

setup servicescope SharePoint
image 2 | Paul Keijzers

Now that we have this servicescope we can create the component and parse the service scope to it:

image 3 | Paul Keijzers

Doing this makes it possible to do the async call in the reactDOM where we use a state and get the JobTilte

Create the react component and call the async call
image 4 | Paul Keijzers

in the async call we go back to our userservice to get the JobTitle using the email address of the user we parsed:

Async call to get Function
image 5 | Paul Keijzers


Once you’ve completed these steps, you’ll need to package and build your project. If you want to use it, you’ll need to go through the steps of deployment, such as gulp Build, gulp package-solution –production, etc. If you have the package, upload it to the app catalog in SharePoint and deploy it to the site/tenant where you need it.

Final Steps

There’s one last thing you need to be aware of. You need to activate it in the Modern Search web part. On the last page, click on Configure. In the configure, you need to add a line with an ID. You can find this ID in the config file in the solution. After this, you’ll need to adjust the handlebar file to hold your web component.

Configure extensibility
image 6 | Paul Keijzers

In the configure you need to add a line with a ID

Add ID of solution
image 7 | Paul Keijzers

The ID you need you will find in the Package-solution.json file in the solution:

Get it from the package Solution json
image 8 | Paul Keijzers

After this you will need to adjust the handle bar file to hold your web component to do this you can go to page from the modern search webpart and click on {}

Configure custom handlebar
image 9 | Paul Keijzers

After that you can insert your web component:

add web component to handlebar
image 10 | Paul Keijzers

Now in this case you see I get the Useremail which is a build in function and I use the Properties of the slot this property you can set up on the first page of the modern search webpart clicking on Customize

add a slot to refer to expert
image 11 | Paul Keijzers

In this case I have a column in the contenttype which is calles experthubexpertOWSUSER which is a person/group fied this is used in the slot as explained above:

over view of slots
image 12 | Paul Keijzers


I hope this guide helps you if you’re looking to extract information from the people search and the LocalSharePointResults. A big thank you to Robert Schouten and Siddharth Vaghasia for their help. If you found this guide useful, please share it with others who might benefit.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top