A SharePoint Framework webpart for Microsoft Graph Toolkit

Develop a simple and generic webpart to connect Microsoft Graph API using Microsoft Graph Toolkit web components in the SharePoint Framework webpart

Microsoft Graph Toolkit (MGT) is a set of open-source web components that helps to fetch the information from Microsoft 365 services with less code. There are some nice articles available out there explaining how to use these components in a SharePoint Framework web parts.

Check out existing post explains the Microsoft Graph Toolkit in detail with examples. What is Microsoft Graph Toolkit?

Here I am going to show you how to create a SharePoint Framework web part to run Microsoft Graph Toolkit components in dynamic. we also creating two web part properties to inject HTML code and JavaScript code inside of the SPFx web part to run MGT components.


Source in Github

With that we are making this web part, DYNAMIC and this helps us to use the same web part for multiple requirements, instead of creating separate web parts for running each MGT requirements.

Use the Yeoman generator to generate the SharePoint Framework web part project,

yo @microsoft/sharepoint


Then use the above screenshot as a sample for generating the web part. After the web part is generated run the gulp serve command to test the web part is running without any error.

Then stop the running gulp serve command and use the below npm command to install the Microsoft Graph Toolkit ( @microsoft/mgt ) package to the web part.

npm install @microsoft/mgt --save

To dynamically add html and JavaScript code through web part properties, We use the reusable property control from pnp,

npm install @pnp/spfx-property-controls --save --save-exact

Then install below package to support typescript version used by Microsoft Graph Toolkit,

npm install @microsoft/rush-stack-compiler-3.7 --save-dev

After the installation of above dependency, replace the “extends” line in tsconfig.json
"extends": "./node_modules/@microsoft/rush-stack-compiler-3.7/includes/tsconfig-web.json",

In the src\webparts\mgteditor\MgtEditorWebPart.ts file, insert the below import statement,

[code lang=”js”]
import { Providers, SharePointProvider } from ‘@microsoft/mgt’;

import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from ‘@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor’;
[/code]

Inside of webpart class, add the below init method to initialize the SharePoint provider for the Microsoft Graph Toolkit,

[code lang=”js”]
protected async onInit() {
Providers.globalProvider = new SharePointProvider(this.context);
}
[/code]

Replace the render method to render the dynamic script and web part components. htmlCode and jsCode is the web part properties, thorough we are adding the dynamic html (web components) and dynamic script required for any interactive effects.

[code lang=”js”]
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.mgtEditor}">
<div class="${ styles.container}">
<div class="${ styles.row}">
${this.properties.htmlCode != undefined ? this.properties.htmlCode : ""}
</div>
</div>
</div>`;

var newScript = document.createElement("script");
var inlineScript = document.createTextNode(this.properties.jsCode);
newScript.appendChild(inlineScript);
this.domElement.appendChild(newScript);
}
[/code]

Replace the groups array inside of getPropertyPaneConfiguration() method inserts the configuration controls for the web part properties. This helps us to insert the html and javascript code dynamically to the SharePoint framework web part. We have used PropertyFieldCodeEditor from the @pnp/spfx-property-controls package.

[code lang=”js”]
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyFieldCodeEditor(‘htmlCode’, {
label: ‘HTML’,
panelTitle: ‘Edit HTML’,
initialValue: this.properties.htmlCode,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
disabled: false,
key: ‘codeEditorFieldId’,
language: PropertyFieldCodeEditorLanguages.HTML
}),
PropertyFieldCodeEditor(‘jsCode’, {
label: ‘Javascript’,
panelTitle: ‘Edit Javascript’,
initialValue: this.properties.jsCode,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
disabled: false,
key: ‘jsEditorFieldId’,
language: PropertyFieldCodeEditorLanguages.JavaScript
})
]
}
]
}
]
[/code]

We also need to provide the permission scope to Microsoft Graph API used by Microsoft Graph Toolkit web components. For that open config/package-solution.json. Then add the json object after isDomainIsolated under the solution. The below json settings applies the read permissions for provided MS Graph resources to the SharePoint Framework webpart.

[code lang=”js”]
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "User.Read"
},
{
"resource": "Microsoft Graph",
"scope": "People.Read"
},
{
"resource": "Microsoft Graph",
"scope": "Contacts.Read"
},
{
"resource": "Microsoft Graph",
"scope": "User.ReadBasic.All"
},
{
"resource": "Microsoft Graph",
"scope": "Calendars.Read"
},
{
"resource": "Microsoft Graph",
"scope": "Directory.Read.All"
},
{
"resource": "Microsoft Graph",
"scope": "User.Read.All"
},
{
"resource": "Microsoft Graph",
"scope": "Group.Read.All"
},
{
"resource": "Microsoft Graph",
"scope": "Files.Read.All"
}
]
},
[/code]

Use the below gulp command to test the web part in SharePoint workbench,
gulp serve

I have changed the web part name as “Microsoft Graph Toolkit Editor” in package-solution.json.

After all the changes are completed, run the below two commands to bundle and package the solution.

gulp bundle --ship
gulp package-solution --ship

After the solution is packaged successfully, follow the below steps to use in SharePoint site.

  • Upload the .sppkg in SharePoint App Catalog.
  • Ensure all the permissions are approved in API Access in the SharePoint Admin center.
  • Add the App to the SharePoint Site
  • Create a page and add the webpart to the page.

After following the above steps, the web part output looks like below,

I have used the below html and JavaScript snippets for running the Microsoft Graph Toolkit Editor web part as shown in the above screenshot.

HTML Code:
[code lang=”html”]
<mgt-teams-channel-picker></mgt-teams-channel-picker>
<button class="mgtbutton">Get SelectedChannel</button>
<div class="output"></div>
<style type="text/css">
.mgtbutton{
margin:10px;
}
.output{
margin:10px;
border:1px solid #eee;
}
</style>
[/code]

JavaScript Code
[code lang=”js”]
document.querySelector(‘.mgtbutton’).addEventListener(‘click’, _ => {
const picker = document.querySelector(‘mgt-teams-channel-picker’);
const output = document.querySelector(‘.output’);

if (picker.selectedItem) {
output.innerHTML = "<b>channel:</b> " + picker.selectedItem.channel.displayName
output.innerHTML += "<br/><b>team:</b> " + picker.selectedItem.team.displayName;
output.innerHTML += "<br/><b>id:</b> " + picker.selectedItem.team.id;
} else {
output.innerText = "no channel selected";
}
});
[/code]

To try out more options in the web part, use the samples from below links,
Microsoft Graph Toolkit Playground
Microsoft Graph Toolkit Samples

Source for this webpart is available in github

Shantha Kumar
Shantha Kumar
Articles: 277