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

No comments

 2,251 total views,  11 views today

In this 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:

  • 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 in 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 valid search query we get the below people search result.

SharePoint PnP People search result using Handlebar template
SharePoint PnP People search result 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 “How to customize the handlebar template in PnP modern search?” section.

How to customize the handlebars template in PnP modern search?

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.

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

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 add 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

Manage persona fields configuration in modern PnP search result web part

Notes:

Here we can do the following configurations:

  • We can map each field values 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?

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 which 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 handlebars 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
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
Edit results template in PnP modern search handlebars

Note:

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

 

Summary: What we had here?

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:

You may like the below SharePoint articles:

Free download SharePoint Online & Office 365 Administration eBook(238 Pages)

Get the PDF eBook from here:


[purchase_link id="0" style="button" color="blue" text="Free Download SharePoint Online & Office 365 Administration"]

 

 
FREE DOWNLOAD

Send download link to:

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