Connect SharePoint Framework Apps with Office 365 Service Endpoints using Office Graph APIs

As you aware, SharePoint Framework 1.4.1 supports MSGraphClient.

MSGraphClient is used to perform REST calls against Microsoft Graph. The Microsoft Graph JavaScript client library is a lightweight wrapper around the Microsoft Graph API. This class allows developers to start making REST calls to MSGraph without needing to initialize the the MSGraph client library.

Note: Microsoft Graph API is replacing the previously released GraphHttpClient, which is now considered to be deprecated.

In this post, I am going to show you a SharePoint Framework WebPart to fetch my User Profile details using Microsoft Graph API. I consider that you have a SharePoint Framework HelloWorldWebPart WebPart, if you don’t, take a look at this article.

Note: API Management can be performed only on first release tenant.

  • Import the MSGraphClient in the HelloWorldWebPart.ts file as shown below

importgrpahclient

  • Write the following code snippet inside the render function.

render.png

  • Open the package-solution.json file and update the Graph API permission

graphapipermission

  • Update the CDN cdnBasePath parameter in write-manifests.json file as per your setup
  • Execute the gulp bundle and gulp package-solution with ship attribute to prepare the build
  • Upload the CDN files in the CDN location specified in the write-manifests.json file
  • Upload the SPPKG file in the app catalog site. As shown below, We have to approve the Microsoft Graph API permission requested by the developer in the package-solution.json.

helloworddeploy.png

  • Click Deploy
  • Open the New SharePoint Admin Center and click on API Management
  • Select the permission and approve the request

approvehelloworld.png

  • Install the HelloWorld WebPart in a SharePoint Site and add the same in a page
  • Verify if HelloWorld WebPart is printing the current user display name and mail in browser console.

About Joseph Velliah
As a SharePoint Evangelist my professional interests tend to be technical and SharePoint focused. I run a blog at "SP RIDER" where you can expect to read HOW TOs and scenarios that I run into during my day to day job. I hope my posts will give back a little to the community that is helped me.

Comments are closed.

%d bloggers like this: