Show Outlook Messages From Microsoft Graph In SPFx Client-Side Web Part

Introduction

MSGraphClient is a new HTTP client introduced in SharePoint Framework v1.6.0 that simplifies connecting to the Microsoft Graph inside SharePoint Framework solutions.

MSGraphClient wraps the existing Microsoft Graph JavaScript Client Library, offering developers the same capabilities as when using the client library in other client-side solutions.

While you could use the Microsoft Graph JavaScript Client Library in your solution directly, MSGraphClient handles authenticating against the Microsoft Graph for you, which allows you to focus on building your solution.

The MSGraphClient is available only in projects built using SharePoint Framework v1.6.0 and later. While the MSGraphClient is explained in this article by using a client-side web part, you can also use it in SharePoint Framework Extensions.

To use the MSGraphClient in your SharePoint Framework solution, add the following import clause in your main web part file,

import { MSGraphClient } from '@microsoft/sp-http';  

MSGraphClient is exposed through the MSGraphClientFactory available on the web part context. To get a reference to MSGraphClient, in your code add,

this.context.msGraphClientFactory  
      .getClient()  
      .then((client: MSGraphClient): void => {  
        // use MSGraphClient here  
      });  

Use the Microsoft Graph TypeScript types

When working with the Microsoft Graph and TypeScript, you can use the Microsoft Graph Typescript to help you catch errors in your code faster. The Microsoft Graph TypeScript types are provided as a separate package.

Install the Microsoft Graph TypeScript types,

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

After installing the package in your project, import it to your web part file,

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';  

Develop SharePoint Framework Web Part

Open a command prompt. Create a directory for SPFx solution.

md spfx-Graph

Navigate to the above created directory.

cd spfx-Graph

Run the Yeoman SharePoint Generator to create the solution.

yo @microsoft/sharepoint

Solution Name

Hit Enter to have default name (spfx-Graph in this case) or type in any other name for your solution.

Selected choice - Hit Enter

Target for the component

Here, we can select the target environment where we are planning to deploy the client web part, i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).

Selected choice: SharePoint Online only (latest)

Place of files

We may choose to use the same folder or create a subfolder for our solution.

Selected choice: Same folder

Deployment option

Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.

Selected choice: N (install on each site explicitly)

Permissions to access web APIs

Choose if the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant.

Selected choice: N (solution contains unique permissions)

Type of client-side component to create

We can choose to create a client-side web part or an extension. Choose web part option.

Selected choice: WebPart

Web part name

Hit Enter to select the default name or type in any other name.

Selected choice: GraphPersona

Web part description

Hit Enter to select the default description or type in any other value.

Framework to use

Select any JavaScript framework to develop the component. Available choices are - No JavaScript Framework, React, and Knockout.

Selected choice: React

Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.

Once the scaffolding process is completed, lock down the version of project dependencies by running the below command:

npm shrinkwrap

In the command prompt, type below command to open the solution in the code editor of your choice.

code .

NPM Packages Used,

Microsoft Graph TypeScript types

The typings will help in providing IntelliSense while writing the code.

On the command prompt, run below command.

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

Set Permission Scopes

To consume MS Graph or any third-party REST APIs, the permissions need to be explicitly set in the solution manifest.

Open “config\package-solution.json” and add below permission scope to give read permission on MS Graph for all users.

{  
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",  
  "solution": {  
    "name": "spfx-Graph-client-side-solution",  
    "id": "6e04bde2-8942-42b5-ae21-561d7bb21aa8",  
    "version": "2.0.0.5",  
    "includeClientSideAssets": true,  
    "webApiPermissionRequests": [  
       
      {  
        "resource": "Microsoft Graph",  
        "scope": "Mail.Read"  
      }   
    ],  
    "isDomainIsolated": false  
  },  
  "paths": {  
    "zippedPackage": "solution/spfx-Graph.sppkg"  
  }  
} 

In IGraphPersonaProps.ts

import { MSGraphClient } from '@microsoft/sp-http';  
export interface IGraphPersonaProps {  
  graphClient: MSGraphClient;  
}

 In IGraphPersonaState.ts

import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';  
export interface IGraphPersonaState {  
    messages:MicrosoftGraph.Message[];  
  } 

 in GraphPersonaWebPart.ts

import { MSGraphClient } from '@microsoft/sp-http';  
export interface IGraphPersonaWebPartProps {  
  description: string;  
}  
  
export default class GraphPersonaWebPart extends BaseClientSideWebPart<IGraphPersonaWebPartProps> {  
  
  public render(): void {  
    this.context.msGraphClientFactory.getClient()  
      .then((client: MSGraphClient): void => {  
    const element: React.ReactElement<IGraphPersonaProps > = React.createElement(  
      GraphPersona,  
      {  
        graphClient: client  
      }  
    );  
  
    ReactDom.render(element, this.domElement);  
  });  
  }  
  
  protected onDispose(): void {  
    ReactDom.unmountComponentAtNode(this.domElement);  
  }  
  
  protected get dataVersion(): Version {  
    return Version.parse('1.0');  
  }  
  
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {  
    return {  
      pages: [  
        {  
          header: {  
            description: strings.PropertyPaneDescription  
          },  
          groups: [  
            {  
              groupName: strings.BasicGroupName,  
              groupFields: [  
                PropertyPaneTextField('description', {  
                  label: strings.DescriptionFieldLabel  
                })  
              ]  
            }  
          ]  
        }  
      ]  
    };  
  }  
} 

In GraphPersona.tsx

import * as React from 'react';  
import styles from './GraphPersona.module.scss';  
import { IGraphPersonaProps } from './IGraphPersonaProps';  
import { IGraphPersonaState } from './IGraphPersonaState';  
import {  
  Persona,  
  PersonaSize  
} from 'office-ui-fabric-react/lib/components/Persona';  
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';  
import { Link } from 'office-ui-fabric-react/lib/components/Link';  
import { List } from 'office-ui-fabric-react/lib/List';  
import { format } from 'date-fns';  
export default class GraphPersona extends React.Component<IGraphPersonaProps, IGraphPersonaState> {  
  constructor(props: IGraphPersonaProps) {  
    super(props);  
    this.state = {  
      messages:[]  
    };  
  }  
  public componentDidMount(): void {  
      this.props.graphClient  
      .api('/me/messages')  
      .get((error: any, mailmessage: any, rawResponse?: any) => {  
        console.log('mailmessage', mailmessage);  
        const Messagemine: MicrosoftGraph.Message[] = mailmessage.value;  
        this.setState({ messages: Messagemine });  
      });  
  }  
  
  private _onRenderMessageCell(item: MicrosoftGraph.Message, index: number | undefined): JSX.Element {  
    {console.log(item);}  
    return (  
      <div><>  
  
  <div>  {item.body.content}</div>  
    </>  
      </div>  
    );  
  }  
   
  public render(): React.ReactElement<IGraphPersonaProps> {  
    return (  
       <div>  
          <div>  <List items={this.state.messages}  
            onRenderCell={this._onRenderMessageCell} />  
            </div>  </div>       
    );  
  }  
}  

sample output json

"@odata.etag": "W/\"CQAAABYAAAAiIsqMbYjsT5e/T7KzowPTAAIgRSJV\"",  
           "id": "AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e-T7KzowPTAAAAAAEMAAAiIsqMbYjsT5e-T7KzowPTAAIgOnGGAAA=",  
           "createdDateTime": "2019-11-04T16:12:46Z",  
           "lastModifiedDateTime": "2019-11-04T16:12:47Z",  
           "changeKey": "CQAAABYAAAAiIsqMbYjsT5e/T7KzowPTAAIgRSJV",  
           "categories": [],  
           "receivedDateTime": "2019-11-04T16:12:47Z",  
           "sentDateTime": "2019-11-04T16:12:47Z",  
           "hasAttachments": false,  
           "internetMessageId": "<BYAPR15MB24233E7FD916D83C860BA3B0CD7F0@BYAPR15MB2423.namprd15.prod.outlook.com>",  
           "subject": "MyAnalytics | Focus Edition",  
           "bodyPreview": "MyAnalytics\r\n\r\nDiscover your habits. Work smarter.\r\n\r\nFor your eyes only\r\n\r\nLearn more >\r\n\r\n\r\n\r\n\r\nWant focus time every day?\r\n\r\nMyAnalytics can help you schedule time for distraction-free deep work every day.\r\n\r\n\r\nLearn more\r\n\r\nYour month in review: Focus",  
           "importance": "normal",  
           "parentFolderId": "AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAuAAAAAAAiQ8W967B7TKBjgx9rVEURAQAiIsqMbYjsT5e-T7KzowPTAAAAAAEMAAA=",  
           "conversationId": "AAQkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAQAFMRLf1C8ZxIlmEw6EI8PoI=",  
           "conversationIndex": "AQHVkyqyUxEt/ULxnEiWYTDoQjw+gg==",  
           "isDeliveryReceiptRequested": false,  
           "isReadReceiptRequested": false,  
           "isRead": false,  
           "isDraft": false,  
           "webLink": "https://outlook.office365.com/owa/?ItemID=AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e%2FT7KzowPTAAAAAAEMAAAiIsqMbYjsT5e%2FT7KzowPTAAIgOnGGAAA%3D&exvsurl=1&viewmodel=ReadMessageItem",  
           "inferenceClassification": "other",  
           "body": {  
               "contentType": "html",  
              "content":"<html></html>"  
           },  
           "sender": {  
               "emailAddress": {  
                   "name": "MyAnalytics",  
                   "address": "[email protected]"  
               }  
           },  
           "from": {  
               "emailAddress": {  
                   "name": "MyAnalytics",  
                   "address": "[email protected]"  
               }  
           },  
           "toRecipients": [  
               {  
                   "emailAddress": {  
                       "name": "Megan Bowen",  
                       "address": "[email protected]"  
                   }  
               }  
           ],  
           "ccRecipients": [],  
           "bccRecipients": [],  
           "replyTo": [],  
           "flag": {  
               "flagStatus": "notFlagged"  
           }

Available Parameters are top,select,expand,filter,delete,post,get,orderby,update,skip etc...

Permissions

Permission type Permissions (from least to most privileged)
Delegated (work or school account) Mail.ReadBasic, Mail.Read, Mail.ReadWrite
Delegated (personal Microsoft account) Mail.ReadBasic, Mail.Read, Mail.ReadWrite
Application Mail.ReadBasic.All, Mail.Read, Mail.ReadWrite

Request headers

Name Type Description
Authorization string Bearer {token}. Required.
Prefer: outlook.body-content-type string The format of the body and uniqueBody properties to be returned in. Values can be "text" or "html". If the header is not specified, the body and uniqueBody properties are returned in HTML format. Optional.

Request body

Do not supply a request body for this method.

Response

If successful, this method returns a 200 OK response code and collection of Message objects in the response body.

Deploy the SPFx Package to SharePoint App Catalog

Follow below steps to deploy the SPFx package (.sppkg) to SharePoint app catalog.

Build minified assets

On the command prompt, type the below command.

gulp bundle --ship

Prepare the package

On the command prompt, type the below command.

gulp package-solution --ship

The .sppkg package will be available inside the “sharepoint\solution” folder.

Upload package to the app catalog

Open the SharePoint app catalog site.

Upload the package to the app catalog.in the popup click deploy button

API Management

After deploying the web part, follow the below steps to approve API requests.

  1. Open SharePoint Admin Center (https://[tenant]-admin.sharepoint.com).
  2. From left navigation, click “API Management”.
  3. Approve the pending requests.

through Powershell

Pending requests

Get-SPOTenantServicePrincipalPermissionRequests 

For deny

Deny-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid>  

For approve

Approve-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid>  

Note 

If you are getting an unexpected exception when trying to approve the permission ([HTTP]:400 - [CorrelationId]), update the resource attribute in your package-solution.json to use the value Microsoft.Azure.AgregatorService rather than Microsoft Graph, Reject the existing request and update the solution package in the app catalog with the update value. 

For Playing with  Graph API Visit here.

For permissions visit here.

Happy Coding :)