New version of Microsoft Graph Toolkit Editor SPFx webpart

Earlier version uses the old version of Microsoft Graph Toolkit and SharePoint Framework.Now it's the time to upgrade and support the new feature in both.

Some time back, I have created a SharePoint Framework webpart to support the Microsoft Graph Toolkit components. That uses the old version of Microsoft Graph Toolkit and SharePoint Framework.

Now it’s the time to upgrade and supports the new feature in both SharePoint and Microsoft Graph API.

The upgraded version supports the packages of

  • SPFX 1.13.1
  • Microsoft Graph Toolkit v2.3.1

Before deploying our webpart, we must deploy the SharePoint Framework Library for Microsoft Graph Toolkit. The downloadable package is available from the location (this may change in future) mgt-spfx-2.3.1.sppkg. To know more about this package, check the documentation SharePoint Library for Microsoft Graph Toolkit

Based on the recommendation, I have upgraded the Graph Toolkit Editor webpart and pushed the updated code to the GitHub in below location,

https://github.com/ktskumar/MGTEditor-Webpart

Follow the below steps to use it in your tenant,

  • Clone or download the source from GitHub
  • Run npm install command
  • Run command gulp bundle –ship
  • Run command gulp package-solution –ship
  • Now we have the spfx package available in the folder <project folder>/sharepoint/solution/mgteditor-webpart.sppkg
  • Upload this package to the appcatalog
  • And also upload the mgt-spfx-2.3.1.sppkg package to the tenant. This package should be deployed to support any Graph Toolkit webpart (if @microsoft/mgt-spfx package used)
  • Navigate to SharePoint Site and add the App.
  • Then click the add button to add the Microsoft Graph Toolkit Editor webpart

Now, create a page in any of the site collection and add the webpart and update the HTML property with below code in webpart properties section.

Add the below script to webpart box and save the html to the property by click on Save button.

Then Save and Publish the page. And the screenshot looks like below,

Recent Mails using Microsoft Graph Toolkit

Shantha Kumar
Shantha Kumar
Articles: 280