By 68,318 total views, 3 views today
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.
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.
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“
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
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.
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.
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:
- Custom search result page in SharePoint Online – SPFx PnP Modern Search solution
- Configure SharePoint search box in office 365 suite bar step by step
- Enable and configure information rights management (IRM) in SharePoint Online
- Manage recycle bin in SharePoint Online – Office 365
- In 4 steps create office 365 trial account – sign up free subscription
- Add more than 5 conditions in InfoPath form’s rule
- How to validate the date column in Infopath form
- How to a copy list item to another list using SharePoint designer workflow
- SharePoint Framework (SPFx) development environment Setup step by step
- 3 ways add a picture library in the communication site – SharePoint Online
- SharePoint generation or version history from the year 2000 to 2020
- Office 365: Getting started with SharePoint PnP PowerShell – installation
- In 2 steps convert a classic SharePoint page to modern using PnP
- Office 365: Retrieve hub sites and associated sites using PnP Powershell
- Create a modern team site using PnP PowerShell in SharePoint
- In 4 steps access SharePoint online data using postman tool
- SharePoint admin center: Learn SharePoint online administration in an hour – step by step
- SharePoint REST API: GET vs POST vs PUT vs DELETE vs PATCH
- Office 365: Understanding the hub site in SharePoint online
- Create SharePoint online list using PnP provisioning template
- List Template IDs In SharePoint Online/SharePoint 2019/2016/2013/2010/2007
- Register Handlebars customizations
Download SharePoint Online & Office 365 Administration eBook
Buy the premium version of SharePoint Online & Office 365 administration eBook from here:
Get the free demo PDF eBook from here:
Send download link to:
About Post Author
