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 {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.
Here, we are trying 4 controls. For more details on configurable options, you can refer to the respective links.
- 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>`;
- }
- 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.
Abenet BeyenePosted Dec 12, 2019, 12:36 PM
This is related to npm not being able to find a file. Has the npm file been changed. This is the error the i found
Jonatan NarvaezPosted Dec 3, 2019, 5:38 PM
If I use in mutiple webparts i get this error: "Failed to execute 'define' on 'CustomElementRegistry': the name "mgt-person" has already been used with this registry".
Siddharth VaghasiaPosted Jul 19, 2019, 3:29 AM
To provision a "modern" team site via REST, make a POST request to the Microsoft Graph "groups" endpoint: https://graph.microsoft.com/v1.0/groups... once a office 365 group is created a team site will be provisioned....
Sagar PardeshiPosted Jul 19, 2019, 2:28 AM
I have one question Using Graph API how can i Provisioning "modern Team sites ??