Customize the person card in PnP Modern Search People layout

This post continues where I left off in the previous article on how to customize the person card for document and list item layouts. This time I will show how to customize the person card within the People layout.

Step-by-step guide

1. Start by adding the PnP Modern Search search results webpart to your page if it´s not already there.
2. Configure page 1 of the webpart properties to have your wanted results displayed. For this example to work as expected, make sure that you are returning people, for example by setting the Result Source Id to LocalPeopleResults.
3. On page 2 of the webpart properties, select People as the layout and then enable Use Microsoft Graph Toolkit. Also make sure to enable Show persona card on hover before you customize the layout because that option will not be available after customization.
4. Now we will customize the layout, so click the {} button next to Edit results template to open the Handlebars editor.
5. In the Handlebars editor look for the following section:

<template data-type="person-card">
    <mgt-person-card inherit-details>
    </mgt-person-card>
</template>

then replace that with the following:

<template data-type="person-card">
  <mgt-person-card inherit-details>
    <template data-type="additional-details">
      <mgt-get resource="/users/\{{ person.id }}?$select=extension_e7182bc3462d439f940ec10d277071f6_CustomerID" version="v1.0">
        <template>
          <div>
            <div data-if="extension_e7182bc3462d439f940ec10d277071f6_CustomerID">
              <h4>Customer ID:</h4>
                \{{ extension_e7182bc3462d439f940ec10d277071f6_CustomerID }}
            </div>
          </div>
        </template>
      </mgt-get>
    </template>
  </mgt-person-card>
</template>

6. Click Save in the Handlebars editor.
7. That’s it, if we hover on a person in the results display the person card will popup and when clicking the down arrow the additional details for the person will be displayed and there the Customer ID is now also displayed.

Detailed explanation of the Handlebars expression

So let’s break the changed person-card template Handlebars expression apart to see what it does.

First we define a new template for the additional-details part of the person card component:

<template data-type="additional-details">

Then we use the mgt-get component to call Graph and get the users properties that we want to use. In this case we want a specific property from the user that is displayed in the person component so we use the Microsoft Graph Toolkit (MGT) token person for this. Since MGT uses a similar syntax to PnP Modern Search Handlebars for token replacement we need to escape the usage of curly braces so take note of the \ in front of the first curly brace, this is important since we don’t want Handlebars to parse this before sending it on to the MGT templating engine:

  <mgt-get resource="/users/\{{ person.id }}?$select=extension_e7182bc3462d439f940ec10d277071f6_CustomerID" version="v1.0">

Then we define the template to be used by mgt-get to render the additional details. Here we use HTML to design how the information should be rendered. In this case we just have a div containing a header and the value for the Customer ID property. Again note the escaping of the first curly brace to have Handlebars pass this on to MGT. Also note the data-if property which will have MGT check if our custom property contains a value before rendering the contents of the div.

    <template>
      <div>
        <div data-if="extension_e7182bc3462d439f940ec10d277071f6_CustomerID">
          <h4>Customer ID:</h4>
            \{{ extension_e7182bc3462d439f940ec10d277071f6_CustomerID }}
        </div>
      </div>
    </template>

So that was it, hopefully you will now have knowledge on how to customize the person card in PnP Modern Search.

Handling Exchange Server extensionAttributes

A special case that we sometimes want to handle is the use of extension attributes that has been synchronized from Exchange Server on-prem. These are called extensionAttribute1 - extensionAttribute15 in Entra ID and need to be accessed in a different way than the usual user attributes. Change the mgt-get section to look like this to display extensionAttribute1:

          <mgt-get resource="/users/\{{ person.id }}/onPremisesExtensionAttributes" version="v1.0">
            <template>
              <div>
                <div data-if="extensionAttribute1">
                  <h4>Customer ID:</h4>
                    \{{ extensionAttribute1 }}
                </div>
              </div>
            </template>
          </mgt-get>