SPFx – MGT Person Card Component

Introduction

Hi friends, in this post let us dive deep in to the Microsoft Graph Toolkit Person Card component. We will learn the component properties, css custom properties and also the data templates to customize the component. For those who are not aware of the MSGraph Toolkit or how to use it in SharePoint Framework web part, please go through my previous blog post SPFx – MGT Person Component

Focus on the Code

Once you had setup all the boiler plate code, lets focus on the change that we need to do and also see how to use some of the properies, css and templates. Please my previous blog post on the declaration of the component and template helper imports.

MGT-Person Card Properties

First let us see how can we combine the person and person-card component.

<div>
    <div className={styles.sectionTitle}>Person card with Person component</div>
    <mgt-person person-query="me" show-name show-email show-presence person-card="hover"></mgt-person>
</div>

person-query

This property can be used with ‘me‘, user name or email. The component will automatically fetch the user details and display the info. If the results retrieved are more than one, the first is always displayed.

Below is the code to display the current logged in user with the name, email and presence.

<div>
    <div className={styles.sectionTitle}>Person card as a standalone component</div>
    <mgt-person-card person-query="me" show-name show-email is-expanded></mgt-person-card>
</div>

Below is the code using the Firstname & Lastname

<div>
    <div className={styles.sectionTitle}>Using person-query with 'Firstname' and 'Lastname'</div>
    <div style={{ display: 'inline-flex' }}>
        <div style={{ marginRight: '5px' }}><mgt-person-card person-query="prad" show-name show-email></mgt-person-card></div>
        <div><mgt-person-card person-query="vance" show-name show-email></mgt-person-card></div>
    </div>
</div>

person-details

We can use this property to display the custom user info, using this property won’t trigger the graph call. Copy-paste the below code to declare a personDetail variable different properties. The key should be the same but the value can be any.

const personDetail1: any = {
    displayName: 'Test User',
    mail: 'This is random text.',
    personPresence: 'DoNotDisturb',
    personImage: 'https://cdn1.iconfinder.com/data/icons/prettyoffice8/256/Users.png',
    jobTitle: 'Developer',
    department: 'IT',
    officeLocation: 'Singapore'
};

<div>
    <div className={styles.sectionTitle}>Using person-details property</div>
    <mgt-person-card person-details={JSON.stringify(personDetail1)} show-name show-email show-presence></mgt-person-card>
</div>

CSS-Custom Properties

Let us see how we can use our own css styles to customize the component. There are some default css variables that we can use it to customize the component to match our theme or branding.

Copy-paste the below code to your module.scss file

.customPersonCard {
    --avatar-size: 48px;
    --avatar-border: 0;
    --avatar-border-radius: 10% 35%;
    --person-card-display-name-font-size: 25px;
    --person-card-display-name-color: #ffffff;
    --person-card-title-font-size: 20px;
    --person-card-title-color: #ffffff;
    --person-card-subtitle-font-size: 15px;
    --person-card-subtitle-color: #ffffff;
    --person-card-details-title-font-size: 18px;
    --person-card-details-title-color: #b3bf0a;
    --person-card-details-item-font-size: 15px;
    --person-card-details-item-color: #3abf0a;
    --person-card-background-color: linear-gradient(234deg,#000,#fff 66%);
  }

<div>
    <div className={styles.sectionTitle}>Using custom css</div>
    <mgt-person-card class={styles.customPersonCard} person-query="vance" show-name show-email></mgt-person-card>
</div>

Templates

The templates provide us with more customizable options and we can also use templates to show different information at different stage of the component. Following are the templates available for this is component.

no-data – Template to render when there is no results returned for the query.
default – Template to display the information when there is a result returned from the Graph API. The template to customize the entire person card.
person-details – Template to customize the information that is shown on the top of the person card.
contact-details – Template to customize the contact details part of the expand section of the person card.
additional-details – Template to add custom content to the additional section.

Below is the results returned for the query that can be used in the default template. The below properties can be accessed using the person key. E.g., use [[person.displayName]] inside the template to access the ‘DisplayName’ of the user.

{
    "id": "9c8438c1-62f9-4cf4-b89d-76ca4449f043",
    "displayName": "Adele Vance",
    "givenName": "Adele",
    "surname": "Vance",
    "birthday": null,
    "personNotes": null,
    "isFavorite": false,
    "jobTitle": "Retail Manager",
    "companyName": null,
    "yomiCompany": null,
    "department": "Retail",
    "officeLocation": "18/2111",
    "profession": null,
    "userPrincipalName": "AdeleV@o365practice.onmicrosoft.com",
    "imAddress": "sip:adelev@o365practice.onmicrosoft.com",
    "scoredEmailAddresses": [
        {
            "address": "AdeleV@o365practice.onmicrosoft.com",
            "relevanceScore": 1,
            "selectionLikelihood": "notSpecified"
        }
    ],
    "phones": [
        {
            "type": "business",
            "number": "+1 425 555 0109"
        },
        {
            "type": "mobile",
            "number": "+1 4255550109"
        }
    ],
    "personType": {
        "class": "Person",
        "subclass": "OrganizationUser"
    },
    "personImage": ""
}

<div>
    <div className={styles.sectionTitle}>Using templates</div>
    <mgt-person-card person-query="vance">
        <template data-type="person-details">
            <div style={{ display: 'flex' }}>
                <div className={styles.personImage}><img src="[[personImage]]" /></div>
                <div className={styles.customPersonCardContainer}>
                    <div><b>Title:</b> [[person.displayName]]</div>
                    <div><b>Job Title:</b> [[person.jobTitle]]</div>
                </div>
            </div>
        </template>
    </mgt-person-card>
</div>

.customPersonCardContainer {
      width: 100%;
      padding: 10px;
      color: #000;
  }
  div.personImage {
        img {
            border-radius: 10% 35%;
        }
    }