One year back, I have created a SPFX webpart ( SharePoint Framework webpart for Microsoft Graph Toolkit ) to support Microsoft Graph Toolkit with the help of using npm package @microsoft/mgt . This MGT-Editor webpart helps us to use the Graph Toolkit components in a SPFX webpart without writing any complex code or Graph API call.
Now, Microsoft Graph Team come up with a separate package called Microsoft Graph Toolkit package for SharePoint Framework @microsoft/mgt-spfx . This will help us to avoid packaging our own copy of the toolkit and colliding with the shared library.
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.2.0.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,
The upgraded version supports the packages of
- SPFX 1.12.1
- Microsoft Graph Toolkit v2.2.0
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.2.0.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 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.
Then Save and Publish the page. And the screenshot looks like below,
Hope this post helps in using any Microsoft Graph Toolkit components in SPFX webpart dynamically. Please Share any issues you have faced in deploying or using this webpart.