Microsoft

Microsoft Graph API in SharePoint

Abstract digital global map with data points

Microsoft Graph API in SharePoint SPFX  enables us to fetch the data from O365. To connect with the data of millions of people in the Microsoft cloud, use the Microsoft Graph API. Build apps for businesses and people that connect to a plethora of data, relationships, and knowledge via a single endpoint using Microsoft Graph.

Step 1: Create a SharePoint SPFX Project using NoJavaScript Framework.
  1. Open command Prompt (cmd) and Go to the directory where you want to create a project.
  2. Create a new folder: – md MSGraphAPIDemo
  3. Go to that folder: – cd MSGraphAPIDemo

cmd folder

 

Step 2: Create a new solution with Yeoman utility generator command.

You may easily create a SharePoint client-side solution project with the appropriate toolchain and project structure using the SharePoint Online SPFx Yeoman Generator.

          yo @microsoft/sharepoint

yeoman command

Step 3: Once the above command has been successfully executed, provide the below answer to create new SharePoint solution.
Let's create a new SharePoint solution.

? What is your solution name? ms-graph-api-demo

? Which type of client-side component to create? WebPart

Add new Web part to solution ms-graph-api-demo.

? What is your Web part name? MSGraphAPIWebPart

? Which template would you like to use? No framework

 

Note: To accept the default values, press the Enter key.

After giving all the required all values, NPM install will run.

It will take a while for Npm to obtain all of the dependencies needed for the project.

Below diagram shows so far what we have done.

spfx yeoman Questions Microsoft Graph API in SharePoint SPFX

After npm install, you’ll get the congratulation message.

Congratulations message Microsoft Graph API in SharePoint SPFX

 

Step 4:

The command listed below must be used to install the types for the Microsoft Graph. Use the same solution to execute this command.

Command: –

npm install @microsoft/microsoft-graph-types --save-dev

 

graph api command Microsoft Graph API in SharePoint SPFX

To open the project in VS code enter: code .

Step 5:

The file structure in the VS code will look like this. We will mainly work on MsGraphApiWebPartWebPart.ts

spfx file structure Microsoft Graph API in SharePoint SPFX

Step 6:

Open the MsGraphApiWebPartWebPart.ts file

Import the respective modules for the MS Graph API. To import, Add the below line of code in your file

import {MSGraphClient} from '@microsoft/sp-http'
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types'

Remove all things from the render method and keep only the div tag.

add below line of code.

public render(): void {

    this.context.msGraphClientFactory

      .getClient()

      .then((msgraphclient: MSGraphClient): void => {

        // To fetch the current user info from the Microsoft Graph api

        msgraphclient

          .api("/me")

          .get((error, user: MicrosoftGraph.User, rawResponse?: any) => {

            // To handle the response

            console.log(JSON.stringify(user));

            this.domElement.innerHTML = `

   

      <div>

        <p>Display Name:${user.displayName} </p>

       <p>Given Name:${user.givenName} </p>

       <p>Surname Name:${user.surname} </p>

       <p>Email ID:${user.mail} </p>

       <p>Mobile Phone:${user.mobilePhone} </p>

      </div>`;

          });

      });

  }

 

Step7:

Set the Graph API permissions. Go to the config folder.

Open the Package-solution.json file and add below line of code:

"webApiPermissionRequests": [

      {

        "resource": "Microsoft Graph",

        "scope": "User.ReadBasic.All"

      }

    ],

 

 

Step 8:

Before deploying a web part in the app catalogue, ensure that the code is error-free.

Then, open the terminal and run the following command.

  1. gulp bundle --ship

     

  2. gulp package-solution --ship

     

After running both the above commands, one SharePoint folder will be created, and this folder contains  .sppkg file.

sppkg file Microsoft Graph API in SharePoint SPFX

Step 9:

Go to the SharePoint Admin Center -> Click on the more features -> click “Open” in the Apps section.

SharePoint Admin Center Microsoft Graph API in SharePoint SPFX

Click on upload. Go to the project location ->SharePoint folder -> solution folder -> Select the .sppkg file.

spfx sppkg file upload Microsoft Graph API in SharePoint SPFX

Maintain the default settings -> select Enable app

spfx sppkg file upload Microsoft Graph API in SharePoint SPFX

Go to the API access page

spfx sppkg file upload Microsoft Graph API in SharePoint SPFX

Click on Pending requests->Organization-wide->select the request-> Click to approve

SharePoint Admin Center API Access Approve rejec

The below dialogue will open after clicking on the approve button. Click “Approve” once again.

SharePoint Admin Center API Access Approve reject_Microsoft Graph API in SharePoint SPFX

Step 10:

Your web part is now available to use. Go back to SharePoint Online.

Select your SharePoint  site and Click edit.

Then Click “add a new web part” (+) icon. Select the web part by clicking on its name.

SharePoint Online Web Part_Microsoft Graph API in SharePoint SPFX

As you can see below, we were able to successfully retrieve user information using the GraphApi.

SharePoint Online Web Part_Microsoft Graph API in SharePoint SPFX

Please follow the below link to explore the MSGraphAPI 

Graph Explorer | Try Microsoft Graph APIs – Microsoft Graph

The complete code can be found below.

MsGraphApiWebPartWebPartfile

Package-solution_json_file

 

 

 

 

Thoughts on “Microsoft Graph API in SharePoint”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Saifhasan Rain

Saifhasan Rain is an Associate Technical Consultant at Perficient. He has Good Knowledge of Power Apps, Power BI, Power Automate, ReactJS, SPFX, SharePoint, C#, and Azure. Saifhasan is a Certified Microsoft Power Platform app maker and passionate about learning new things.

More from this Author

Categories
Follow Us
TwitterLinkedinFacebookYoutubeInstagram