How To Use Microsoft Graph Toolkit With SPFx Webpart

Introduction 

 

The Microsoft Graph Toolkit is a web component library for Microsoft Graph that offers reusable and functional UI components for common experiences that work with any web framework. These components can be used in your modern web application, SharePoint web parts, Microsoft Teams tabs, and more. Components are functional and work automatically with the Microsoft Graph Components and work with any web framework and on all modern browsers. IE 11 is also supported. Learn more about Graph Toolkit here.

 

In this article, we will focus on how to use Office Graph Toolkit (preview) with SPFx web part. To use Graph components with SPFx, we will use SharePoint Provider.

 

Step 1  

 

Create an SPFx web part using 'yo @microsoft/sharepoint' command. You can select the below options while creating SPFx solution. We will use a No-JavaScript framework.

 

 

Step 2

 

Run the 'gulp serve' command to check if the default web part is running fine. The local workbench should open. We will add a web part using the below option

 

 

 

Step 3

 

Next, we want to install Microsoft Graph Toolkit via "npm install". Run the below command at the root of the project from NodeJS Command Prompt.

npm install @microsoft/mgt

 

Step 5

 

Graph Toolkit requires TypeScript 3+, so let us make sure it is updated.

npm install [email protected]

 

Step 6

 

Open the project in your editor. I used Visual Studio Code.

 

Step 7

 

Modify the code to try MGT(Microsoft Graph ToolKit component).

 

Open \Spfx-MSGraphToolKit\src\webparts\graphToolKitWp\GraphToolKitWpWebPart.ts

Import the providers at the top of the page.

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

Add the onInit method to intialize your provider.

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

This will set provider to SharePoint context. 

 

Next, let us modify the render method to use try Graph Controls.

public render(): void {

  this.domElement.innerHTML = `<div className={ styles.mgtDemo }>
  <div className={ styles.container }>
    <div className={ styles.row }>
      <span className={ styles.title }>My Day!</span>
      <h1> Login Control </h1>
      <mgt-login></mgt-login>
      <hr>
      <h1> Person Control </h1>
      <mgt-person person-query="me" show-name show-email></mgt-person>
      <hr>
      <h1> Agenda Control </h1>
      <mgt-agenda  group-by-day></mgt-agenda>
      <hr>
      <h1> People Control <h1>
      <mgt-people></mgt-people>
    </div>
  </div>
</div>`;

}

Here, we are trying 4 controls. For more details on configurable options, you can refer to the respective links.

• Login - This displays either sign in button or user's name if already user is already logged in (like in welcome control)
• Person - This control can display any person's details, we can use person-query to configure which user's details is to be shown
• Agenda - This control will display all calendar events of the logged-in user.
• People - This will display a group of people or contacts by using their photos or initial.

Step 8

 

Provide Azure AD App Permission to access Graph API.

 

As the Graph Toolkit is using GRAPH API internally, we need to provide API permission to 'SharePoint Online Client Extensibility Web Application Principal'. 

• Login to Portal.Azure.com
• Go to Azure AD from left navigation
• Select App Registration from the blade.
• Select 'SharePoint Online Client Extensibility Web Application Principal'

• Select API Permission.
• Add below 4 permissions (marked as a green arrow). Please ignore other ones. This is not required for this example.

 

Step 9

 

Try WebPart of SharePoint workbench 

• run 'gulp serve'
• Once it is running, open SharePoint workbench.
  
  https://jungle.sharepoint.com/sites/simba/_layouts/15/workbench.aspx  

• Add 'GraphToolKitWP' to Page
• Wait for some time and you will see the below output according to your tenant data. 

 

One final note - For deploying this to the app catalog, you need to modify package-solution.json for web API Permission request. Below is the JSON file.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "spfx-ms-graph-tool-kit-client-side-solution",
    "id": "10c9f59c-0e2d-44ae-8f2e-9de9c5c507d6",
    "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"
  }
}

That's it. We have just tested the Graph Tool Kit on SharePoint workbench. As of the date of writing this article, please note some important points related to Graph Tool Kit,

• It is still in preview mode and not recommended for prod use.
• Packaging this web part is giving some errors/warnings(refer this logged issue)
• You can follow Graph Tool Kit official documentation for options available for each control

Conclusion

 

In this article, we have learned how to use Graph ToolKit within SPFx web part. This toolkit would be very useful for many business use cases. Now, we don't have to separately call Graph API and use our custom HTML to display Office 365 data. Though as of now we have limited controls, we can expect others very soon.