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>       
    );  
  }  
}  

"@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"  
           }