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:

As I understand the below line is displaying the people search related data: 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.

Mohamed Derhalli · Accepted Answer

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

if there is no work email, render this

{{/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}}

This paragraph will render only if the managed property has a truthy value

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

Georg Trixl · Answer

Okay lets say you would have a card style layout go to your search webpart settings - on page 2 of the settings enter following values into Selected Properties Title,Path,Created,Filename,SiteLogo,PreviewUrl,PictureThumbnailURL,ServerRedirectedPreviewURL,ServerRedirectedURL,HitHighlightedSummary,FileType,contentclass,ServerRedirectedEmbedURL,DefaultEncodingURL,owstaxidmetadataalltagsinfo,Author,AuthorOWSUSER,SPSiteUrl,SiteTitle,IsContainer,IsListItem,HtmlFileType,SiteId,WebId,UniqueID,NormSiteID,NormListID,NormUniqueID,Rank,AccountName,FirstName,LastName,Department,WorkPhone,WorkEmail,PictureURL,SOSDescription,EndDateOWSDATE,EventDateOWSDATE,ContentSource,JobTitle,Location,EditorOWSUSER,ModifiedBy,Description,ModifiedOWSDATE,ContentType,OriginalPath,FileExtension,ParentLink,PromotedState,PromotedStateOWSNMBR,IsDocument,NormWebID On page 3 of the search webpart settings select the "Results layout" Custom Then edit the template and put following template for card layout into the editor box

{{#> resultTypes item=item}} {{!-- The block below will be used as default item template if no result types matched --}} {{#eq item.contentclass 'STS_ListItem_851'}} {{else}} {{/eq}} {{/resultTypes}}

then configure the "Result Types" by clicking on the "Edit Result Types" button Add a new row and enter following values Managed Property = contentclass Operator = Contains Condition Value = SPSPeople And in the "Inline template" editor box enter following code

{{#if ../WorkPhone}} {{../WorkPhone}}
{{/if}} {{#if ../WorkEmail}} {{../WorkEmail}}
{{/if}} Find this person in Delve

That should render some nice persona cards (maybe needs some CSS styling) and when hovering with the mouse over a person the live persona card shows up.

Harsha Vardhini · Answer

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

Customizing the PnP people search handlebar template in SharePoint online

3 Answers

Add your own answers!

Ask a Question