How to customize the handlebars template in PnP modern search web part

Customize SharePoint search results: Customize the handlebars template in PnP modern search web part

No comments

Loading

In this “Customize SharePoint search results” tutorial, we will learn about how to customize the handlebars template in PnP modern search web part. Before I move further on this, I must thank my friend Mohamed Derhalli who taught me this technique, the same thing I am sharing with you. As we know over the last couple of years, Microsoft has been doing a tremendous job over the improvement of SharePoint online, the PnP modern search web part is one among them. Learn more about the PnP modern search web part in my previous article – Custom search result page in SharePoint Online – SPFx PnP Modern Search solution

Key-Highlights: Customize SharePoint search results

  • What is the handlebars template in PnP modern search?
  • How to customize the handlebars template in PnP modern search with the out-of-the-box configuration?
  • How to customize the handlebars template in modern PnP search using coding?

What is the Handlebars template in PnP modern search web part?

After configuring the PnP modern search web part, when we hit the search query from the search box, we could see a corresponding search result which gets displayed on the page corresponding to the search query – the way it gets rendered to the page, behind the scene, one mechanism works, that is called handlebars template.

Let us see this more practically.

When we search a people using the modern PnP search web part, on a valid search query we get the below people search result.

Customize SharePoint search results, SharePoint PnP People search result using Handlebar template
SharePoint PnP People search results using Handlebar template

Behind the scene, for the above people search render below is the out-of-the-box handlebars template code:

<content id="template">

<style>
#pnp-modern-search_{{@root.instanceId}} .personaCard {
margin: 10px;
}
</style>

<div id="pnp-modern-search_{{@root.instanceId}}" class="template_root">
{{#if @root.hasPrimaryOrSecondaryResults}} 
<div class="template_defaultCard">
{{#if showResultsCount}}
<div class="template_resultCount">
<label class="ms-fontWeight-semibold">{{getCountMessage @root.paging.totalItemsCount keywords}}</label>
</div>
{{/if}}
<div class="ms-Grid">
<div class="ms-Grid-row">
{{#each items as |item|}}
<div class="ms-Grid-col ms-sm12 ms-md12 ms-lg12">
{{#> resultTypes item=item}}
<div class="personaCard">
{{#with (split AccountName '|')}}
<pnp-persona-card fields-configuration="{{JSONstringify ../../../peopleFields}}" item="{{JSONstringify item}}" persona-size="{{../../../personaSize}}" />
{{/with}}
</div>
{{/resultTypes}}
</div>
{{/each}}
</div>
</div>
</div>
{{#if @root.paging.showPaging}}
<pnp-pagination 
total-items="{{@root.paging.totalItemsCount}}" 
hide-first-last-pages="{{@root.paging.hideFirstLastPages}}"
hide-disabled="{{@root.paging.hideDisabled}}"
hide-navigation="{{@root.paging.hideNavigation}}"
range="{{@root.paging.pagingRange}}" 
items-count-per-page="{{@root.paging.itemsCountPerPage}}" 
current-page-number="{{@root.paging.currentPageNumber}}"
>
</pnp-pagination>
{{/if}}
{{else}}
{{#unless showBlank}}
<div class="template_noResults">{{@root.strings.NoResultMessage}}</div>
{{/unless }}
{{/if}}
</div>
</content> 
<content id="placeholder"> 
<div id="pnp-modern-search_{{@root.instanceId}}" class="placeholder_root">
<div class="template_defaultCard">
{{#if showResultsCount}}
<div class="template_resultCount">
<span class="shimmer line" style="width: 20%"></span>
</div>
{{/if}}
<div class="ms-Grid"> 
<div class="ms-Grid-row">
{{#times @root.paging.totalItemsCount}}
<div class="ms-Grid-col ms-sm12 ms-md12 ms-lg12">
<pnp-persona-card-shimmers persona-size="{{@root.personaSize}}"></pnp-persona-card-shimmers>
</div>
{{/times}}
</div>
</div>
</div>
</div>
</content>

And the below line exactly displays the people-related metadata:

<pnp-persona-card fields-configuration="{{JSONstringify ../../../peopleFields}}" 
item="{{JSONstringify item}}" 
persona-size="{{../../../personaSize}}" />

Now, the question is how we can display the additional people metadata using the out of the configuration and code as well, we will see this in the “How to customize the handlebar template in PnP modern search?” section.

How to customize the handlebars template in PnP modern search (Customize SharePoint search results)?

If we go to the 3/3 PnP modern search result web part configuration and if we change the “Picture size” from smaller to higher like “Large” to “Extra large”, we can the more people property. In the below example when the picture size was “Large”, then the phone number attribute was not displaying but as soon as change the picture size to “Extra large”, the phone number attribute got displayed.

Customize SharePoint search results, Manage Picture Size in Modern PnP search web part
Manage Picture Size in Modern PnP search web part

Manage persona fields configuration to add additional people attribute in the modern PnP search result (SharePoint modern search customization)

Using the “manage persona fields” configuration also we can configure the additional people attribute in the modern PnP search result page.

Click on the “Manage persona fields

 

Using the manage persona fields add additional people attribute in the modern PnP search result
Using the manage persona fields adds additional people attribute in the modern PnP search result

Once we click on the “Manage persona fields” link, we will get into the “Manage persona fields” configuration page.

Manage persona fields configuration in modern PnP search result web part, Customize SharePoint search results

Manage persona fields configuration in modern PnP search result web part

Notes:

Here we can do the following configurations:

  • We can map each field value with the corresponding persona placeholders
  • We can use either the managed property value directly without any transformation or use a Handlebars expression in the Value field.

How to customize the handlebars template in modern PnP search using coding (Customize SharePoint search results)?

By now, we have learned how to customize the modern PnP search result web part using the out-of-the-box configuration. Here, in this section, we will learn how to customize the handlebar template in a modern PnP search using coding.

If we want to apply more conditions that are not achievable through the out-of-the-box configuration in the template, we can customize the handlebar. Basically,  here we use the managed properties values inside curly braces: {{}} inside the handlebar template. Let’s see some of the examples:

Example 1:

{{#unless WorkEmail}} 
<p>Work email found (false)</p>
{{/unless}}

Note:

  • The above example will return false- if the work email does not have value. The message inside the paragraph will render only if the managed property has a false value
  • This is the handlebar’s way of having “If null” or!

Example 2

{{#if WorkEmail}} 
<p>Work email found (true)</p>
{{/if}}

Note:

  • The above example will return true – if the work email has value. The message inside the paragraph will render only if the managed property has a true value

Key takeaway

  • In the above two examples, “WorkEmail” attribute has been used, however, we could use any valid manage property.
  • The current version of modern PnP search web part handlebars handle only the boolean value (true or false), if we want to compare some values with the manage property, this will not support.
Edit PnP Modern search custom handlebars template, Customize SharePoint search results
Edit PnP Modern search custom handlebars template

From the 3/3 PnP modern search result web part configuration section, select the template as “custom”, then click on the “Edit Template” box.

Inside the handlebars editor box, inject your code.

Edit results template in PnP modern search handlebars, Customize SharePoint search results
Edit results template in PnP modern search handlebars

Note:

  • Your custom code must be after the {{/resultTypes}}

Summary: Customize SharePoint search results

Thus in this article, we have learned the below with respect to customizing the handlebars in PnP modern search result web part:

  • What is the handlebars template in PnP modern search?
  • How to customize the handlebars template in PnP modern search with the out-of-the-box configuration?
  • How to customize the handlebars template in modern PnP search using coding?

See Also: SharePoint Online Tutorial

You may like the below SharePoint Online Tutorials:

Download SharePoint Online PDF Book

Download SharePoint Online & Office 365 Administration eBook

Buy the premium version of SharePoint Online & Office 365 administration eBook from here:



Buy SharePoint Online & Office 365 Administration eBook


 

Get the free demo PDF eBook from here:

FREE DOWNLOAD

Send download link to:

Subscribe to get exclusive content and recommendations every month. You can unsubscribe anytime.

About Post Author

Do you have a better solution or question on this topic? Please leave a comment