Using mgt-person in PnP Modern Search

Once the setting "Use Microsoft Graph Toolkit" has been switch to "On" in the Results Web Part, we are able to use the many out of the box mgt components

One of the most commonly used mgt components is the mgt-person as it provides an enriched way to display a user, and we have to admit, the out of the box display of a user in the Details List is rather blend:

The OOTB way to show a User

The options available for the mgt-person are here, but in most cases we only use these:

<mgt-person

       user-id=""

       view='threelines'

       show-presence="true"

       person-card="hover"

       avatar-size="large"

   />

 </mgt-person>

The user-id expects the id, in our case the email-address of the person, and the getUserEmail helper provides just this, so it will look like this when we set the user-id to be the person we point to in the Author slot:

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

threelines, presence is "on", size is "large"

The view property defines how the component is displayed, either just the image, oneline, twolines, threelines or fourlines, showing more and more info about the user.

Show-presence enables the presence indicator icon.

The value for person-card is either "none", "hover" or "click", default is "none".

Avatar-size controls the size of the Image, and the options are "small", "large" or "auto" (if view is 3 or 4 lines then the avatar-size will always be "large") .

So where can I use the mgt-person component in PnP Modern Search?

Details List

You can use the mgt-person in the Handlebars on a Details list

However, the hover effect will currently not work when used within the handlebar.

Cards

The mgt-person will not work with the predefined card fields.

Slider

The mgt-person cannot be used with the slide layout

People

The mgt-person cannot be used with the people layout

So, it that is? Not very impressing at all

The PnP Modern search architecture is not intended to cater for the mgt-person component within the out of the box layouts.

However, it is a very handy component when you create your own layouts, and we have several samples in the PnP Modern Search Layouts repository showcasing this:

Multiple people display for a search result item

People Search Two Columns

These are just two samples, and we will welcome any contributions from you :-)