How exciting, SharePoint web parts can now talk to other parts of Office 365 rather than just SharePoint using the Microsoft Graph and third party APIs!
With the release of the SharePoint Framework version 1.4.1, we now have preview support of the Microsoft Graph API.
In this example, I’m going to create a SharePoint Framework web part to show my latest OneDrive files.
I’m going to assume that you already know how to create SharePoint framework web parts, if you don’t, take a look at my previous blog posts:
- Creating a new SharePoint framework project using NodeJS
- Creating a picture library slideshow using jQuery Cycle2 and the SharePoint framework
- Branding SharePoint using Application Customizers
- Promoted Links Web Part for Modern Pages
- Creating a choice field in SPFx
I will begin with a new SharePoint framework project (no JavaScript framework) using the latest version 1.4.1 (see getting started).
In the new project, open the web part typescript file (src\ webparts\ webpartname\ webpartname.ts).
Import the MSGraphClient using the following code:
import { MSGraphClient } from '@microsoft/sp-client-preview';
Inside the render function in our default class, we are going to define a variable for the service scope.
const client: MSGraphClient = this.context.serviceScope.consume(MSGraphClient.serviceKey);
We can make it easier to catch errors when coding against the MS Graph by installing the typings. You can do this from the terminal in VSCode by running:
npm install @microsoft/microsoft-graph-types –save-dev
This then needs to be imported in the web part typescript file.
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
Under the line defining the service scope, add the following code to get data from the graph API
client
.api('me/drive/recent')
.get((error, files: MicrosoftGraph.DriveItem, rawResponse: any) => {
// handle the response
for (var _i = 0; _i < rawResponse.body.value.length; _i++) {
htmlcode += `<a href="${rawResponse.body.value[_i].webUrl}">${rawResponse.body.value[_i].name}</a></br>`;
}
this.domElement.innerHTML = `
<div class="${ styles.myOneDriveFiles }">
${htmlcode}
</div>`;
});
Configuring API permission requests
In the package-solution json file (in the config folder), we need to define which Graph permissions we will be using.
Under “skipFeatureDeployment”, add the following JSON.
"webApiPermissionRequests": [
{
"resource": "Microsoft Graph",
"scope": "Files.Read"
}
]
To determine the permission levels and which API to use, I used the following references:
Graph Explorer
Permission Scopes
So we can test this, we need to allow access for this API in the Office 365 admin centre. To do this we are going to build and package the solution and then add it to the app catalog.
To package the solution, run the following commands from the VSCode terminal:
gulp bundle –ship
gulp package-solution –ship
This will create a SPPKG file in the sharepoint\solution folder. This is the file you will need to drag and drop into the tenant App Catalog. Please note that the next steps can only be performed on a first release tenant (not just a first release user).
You will see the additional highlighted message below.
Open the SharePoint Admin Centre of your tenant, and select to “Try the new SharePoint admin center”, in the upper right corner of the screen.
Select “API management”
There seemed to be a bit of a bug on this page, I had to refresh a few times before it appeared and it appeared twice (maybe because i tried uploading to the app catalog twice).
Select the request and press Approve
Add the web part to a modern page. If you have a pop-up blocker enabled in chrome, you will be asked to disable this.
After reloading the page, wow we see Microsoft Graph data inside a SharePoint web part!!
You can download the source code from my GitHub page
