Customizing the PnP people search handlebar template in SharePoint online

Question

I am using the modern PnP SPFx people search web part - and for the people search below is the out of the box template is generated by the web part:

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

As I understand the below line is displaying the people search related data:

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

The above code is giving very limited result with just user full name and email:

My question is - how can we add additional user properties to the above template like - Department, UserPhone, CellPhone, Manager, AboutMe, HomePhone, Office, etc. ?

The above property I could able to configure through the manage property configuration pane - however, my intention here is to handle this through the handlebar customization because I have some scenarios, where I need to display the value conditionally, so, if someone can add a sample if condition with some values like - HomePhone, Office, etc, to this exiting handlebar template would be a great help.

Answer 1

If you want to apply more conditions in the template, you use Handlebars. Basically you use the managed properties values inside curly braces: {{}} inside the template.

Example 1:

  {{#unless WorkEmail}} 
     <p>if there is no work email, render this</p>
  {{/unless}}

In this example, if there's no work email, render the paragraph. This is handlebars way of having "If null" or !

Example 2

  {{#if WorkEmail}} 
      <p>This paragraph will render only if the managed property has a truthy value</p>
  {{/if}}

This example uses if condition.

Note in these examples am just using the WorkEmail managed property, but you can choose other managed properties the same way. The web part uses handlebars built it helpers (the if and unless). If you want to create your own helpers for example to check if the managed property equals a specific value (not just true/false checks), then it's not supported by this version of the modern search webparts and you'll need to upgrade to the newer one to have custom helpers (which isn't free): https://www.aequos.ca/features

Answer 2

You have these options out of the box from the property pane itself.