Person-Card component of Microsoft Graph Toolkit in SPFx webpart

In my previous article, I have explained how to use Graph Tool Kit with SPFx webpart. As of Sept 27 2019, Graph tool kit is generally available and out of preview mode. Below are some of components which can be used.  I had been following and trying these components in SPFx webpart, if you are interested in People picker component, here is the link.

Today, we will see how person-card components can be used in SPFx webpart.  Please read this article and implement SPFx webpart using Graph Tool Kit components. Please note that, if you have created new SPFx project and installed Graph tool kit package now, you don’t need to update it. As in my case, I had previous version of Took kit package so need to update it to latest.

I will simply run below command, it will installed latest version of Graph tool kit package.

npm install @microsoft/[email protected]

Open your solution in Visual studio code.

Step 1 – Import package in your webpart.ts file

import {Providers, SharePointProvider} from '@microsoft/mgt';

Step 2 Set providers context to SharePoint.

  // add the onInit() method if not already there in your web part class
protected async onInit() {
  Providers.globalProvider = new SharePointProvider(this.context);
}

Step 3 – Replace render method with below.

public render(): void {

    this.domElement.innerHTML = `<div className={ styles.mgtDemo }>
    <div className={ styles.container }>
      <div className={ styles.row }>
        <h1> Person Control </h1>
        <mgt-person person-query="me" show-name show-email person-card="click">
    
        <template data-type="person-card">
        <mgt-person-card person-details="{{person}}" 
            person-image="{{personImage}}">
          <template data-type="additional-details">
            <h3>Stuffed Animal Friends:</h3>
            <ul>
              <li>Giraffe</li>
              <li>lion</li>
              <li>Rabbit</li>
            </ul>
          </template>
        </mgt-person-card>
      </template>
         
        </mgt-person-card>
    </mgt-person>
      </div>
    </div>
  </div>`;

  }

Step 4 – Set required permission in Azure Ad. Provide Azure AD App Permission to access Graph API.

Edit – As suggested by Vesa. We can also request Graph permission using package-solution.json file. This permission would be requested when SPFx solution would be installed, this way we don’t need to provide explicit permission from Azure portal. Below is sample package-solution.json file requesting same permissions. Please note below is requesting permission which is required for other Graph toolkit components like Agenda, People etc. If you need to provide explicitly, you can refer below steps.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "spfx-ms-graph-tool-kit-client-side-solution",
    "id": "102112c-0e2d-ks33-8sd2e-923s9c237sf2",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false,
    "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "User.Read"
      },
      {
        "resource": "Microsoft Graph",
        "scope": "User.ReadBasic.All"
      },
      {
        "resource": "Microsoft Graph",
        "scope": "People.Read"
      },
      {
        "resource": "Microsoft Graph",
        "scope": "Calendars.Read"
      }
    ]
  },
  "paths": {
    "zippedPackage": "solution/spfx-ms-graph-tool-kit.sppkg"
  }
}

Step 5 – Test the webpart

Run ‘gulp serve’

Open any SharePoint online workbench.

https://breakingbad.sharepoint.com/sites/season1/_layouts/15/workbench.aspx

Output – Clicking on person would open a fly out Person card with required details.

Awesome, all this components getting added in Graph tool kit would be time saver, now we won’t need to use reusable components available as part of sample web part or controls by PnP community. As it is available from Microsoft, we would get official support if there is any issue with any component.

That’s it, hope you enjoyed reading…Happy coding..!!!