Boost the person fields in your PnP Modern Search Layout

 

This rather generic SharePoint list is created by a self-service site provisioning setup, and it shows who is in change of any Site Collection.

On the front page on each of the Site Collections the customer requests that we insert a web part with some basic site information. In this case the People web part is not sufficient as some of the metadatea can change over time, such as e.g. the Site Owner.

The obvious choice is therefore a PnP Modern Search results web part using a query like 

Path:https://tcwlv.sharepoint.com/sites/SampleTeamSite/Lists/SiteCreationRequestList* basicProvisioningSiteUrlOWSTEXT:{Site.Url}

(basicProvisioningSiteUrlOWSTEXT is the internal name for the SiteUrl column as seen above)

This will give me the data in the list item having the SiteUrl that is the same as the current Site Collection. 

I looked in the People layout and found that the template used to display a person is a pnp-persona template and used it in the custom layout. It looks like this and has not hover card.

This is off cause better than nothing, but even the OOTB List has a hover card, so it needed an upgrade.

I asked the community on the PnP-modern-search discussions and @patrikhellgren provided an incredibly detailed sample using the mgt-person template. (Microsoft Graph Toolkit).

So, by updating the Layout to this I get a tree line Card and the hover card as well 😀

<template id="content">

    {{#> resultTypes item=item}}

        {{!-- The block below will be used as default item template if no result types matched --}}

       

       

        <div class="contactheader">

        Primary Contact

        </div>

       

        <mgt-person

            user-id="{{getUserEmail (slot item @root.slots.Owner)}}"

            view='threelines'

            show-presence="true"

            person-card="hover"

            avatar-size="large"

        />

        </mgt-person>

        <br><br>

    Template: "{{slot item @root.slots.Template}}"

    {{/resultTypes}}

</template>

As an additional bonus I am pretty sure (not verified yet), that the photo comes from AAD and not the User Profile Application, a service that have provided several headaches over the years, especially related to the employee photo ;-)