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

In this article, we will learn about some basics of MSGraph , and example for fetching Outlook Messages using MsGraph.

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,
  1. 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,
  1. this.context.msGraphClientFactory  
  2.       .getClient()  
  3.       .then((client: MSGraphClient): void => {  
  4.         // use MSGraphClient here  
  5.       });  

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,
  1. 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.
  1. 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.
  1. {  
  2.   "$schema""https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",  
  3.   "solution": {  
  4.     "name""spfx-Graph-client-side-solution",  
  5.     "id""6e04bde2-8942-42b5-ae21-561d7bb21aa8",  
  6.     "version""2.0.0.5",  
  7.     "includeClientSideAssets"true,  
  8.     "webApiPermissionRequests": [  
  9.        
  10.       {  
  11.         "resource""Microsoft Graph",  
  12.         "scope""Mail.Read"  
  13.       }   
  14.     ],  
  15.     "isDomainIsolated"false  
  16.   },  
  17.   "paths": {  
  18.     "zippedPackage""solution/spfx-Graph.sppkg"  
  19.   }  
  20. }  
In IGraphPersonaProps.ts
  1. import { MSGraphClient } from '@microsoft/sp-http';  
  2. export interface IGraphPersonaProps {  
  3.   graphClient: MSGraphClient;  
  4. }  
 in IGraphPersonaState.ts
  1. import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';  
  2. export interface IGraphPersonaState {  
  3.     messages:MicrosoftGraph.Message[];  
  4.   }  
 in GraphPersonaWebPart.ts
  1. import { MSGraphClient } from '@microsoft/sp-http';  
  2. export interface IGraphPersonaWebPartProps {  
  3.   description: string;  
  4. }  
  5.   
  6. export default class GraphPersonaWebPart extends BaseClientSideWebPart<IGraphPersonaWebPartProps> {  
  7.   
  8.   public render(): void {  
  9.     this.context.msGraphClientFactory.getClient()  
  10.       .then((client: MSGraphClient): void => {  
  11.     const element: React.ReactElement<IGraphPersonaProps > = React.createElement(  
  12.       GraphPersona,  
  13.       {  
  14.         graphClient: client  
  15.       }  
  16.     );  
  17.   
  18.     ReactDom.render(element, this.domElement);  
  19.   });  
  20.   }  
  21.   
  22.   protected onDispose(): void {  
  23.     ReactDom.unmountComponentAtNode(this.domElement);  
  24.   }  
  25.   
  26.   protected get dataVersion(): Version {  
  27.     return Version.parse('1.0');  
  28.   }  
  29.   
  30.   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {  
  31.     return {  
  32.       pages: [  
  33.         {  
  34.           header: {  
  35.             description: strings.PropertyPaneDescription  
  36.           },  
  37.           groups: [  
  38.             {  
  39.               groupName: strings.BasicGroupName,  
  40.               groupFields: [  
  41.                 PropertyPaneTextField('description', {  
  42.                   label: strings.DescriptionFieldLabel  
  43.                 })  
  44.               ]  
  45.             }  
  46.           ]  
  47.         }  
  48.       ]  
  49.     };  
  50.   }  
  51. }  
in GraphPersona.tsx
  1. import * as React from 'react';  
  2. import styles from './GraphPersona.module.scss';  
  3. import { IGraphPersonaProps } from './IGraphPersonaProps';  
  4. import { IGraphPersonaState } from './IGraphPersonaState';  
  5. import {  
  6.   Persona,  
  7.   PersonaSize  
  8. } from 'office-ui-fabric-react/lib/components/Persona';  
  9. import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';  
  10. import { Link } from 'office-ui-fabric-react/lib/components/Link';  
  11. import { List } from 'office-ui-fabric-react/lib/List';  
  12. import { format } from 'date-fns';  
  13. export default class GraphPersona extends React.Component<IGraphPersonaProps, IGraphPersonaState> {  
  14.   constructor(props: IGraphPersonaProps) {  
  15.     super(props);  
  16.     this.state = {  
  17.       messages:[]  
  18.     };  
  19.   }  
  20.   public componentDidMount(): void {  
  21.       this.props.graphClient  
  22.       .api('/me/messages')  
  23.       .get((error: any, mailmessage: any, rawResponse?: any) => {  
  24.         console.log('mailmessage', mailmessage);  
  25.         const Messagemine: MicrosoftGraph.Message[] = mailmessage.value;  
  26.         this.setState({ messages: Messagemine });  
  27.       });  
  28.   }  
  29.   
  30.   private _onRenderMessageCell(item: MicrosoftGraph.Message, index: number | undefined): JSX.Element {  
  31.     {console.log(item);}  
  32.     return (  
  33.       <div><>  
  34.   
  35.   <div>  {item.body.content}</div>  
  36.     </>  
  37.       </div>  
  38.     );  
  39.   }  
  40.    
  41.   public render(): React.ReactElement<IGraphPersonaProps> {  
  42.     return (  
  43.        <div>  
  44.           <div>  <List items={this.state.messages}  
  45.             onRenderCell={this._onRenderMessageCell} />  
  46.             </div>  </div>       
  47.     );  
  48.   }  
  49. }  
sample output json 
  1. "@odata.etag""W/\"CQAAABYAAAAiIsqMbYjsT5e/T7KzowPTAAIgRSJV\"",  
  2.            "id""AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e-T7KzowPTAAAAAAEMAAAiIsqMbYjsT5e-T7KzowPTAAIgOnGGAAA=",  
  3.            "createdDateTime""2019-11-04T16:12:46Z",  
  4.            "lastModifiedDateTime""2019-11-04T16:12:47Z",  
  5.            "changeKey""CQAAABYAAAAiIsqMbYjsT5e/T7KzowPTAAIgRSJV",  
  6.            "categories": [],  
  7.            "receivedDateTime""2019-11-04T16:12:47Z",  
  8.            "sentDateTime""2019-11-04T16:12:47Z",  
  9.            "hasAttachments"false,  
  10.            "internetMessageId""<BYAPR15MB24233E7FD916D83C860BA3B0CD7F0@BYAPR15MB2423.namprd15.prod.outlook.com>",  
  11.            "subject""MyAnalytics | Focus Edition",  
  12.            "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",  
  13.            "importance""normal",  
  14.            "parentFolderId""AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAuAAAAAAAiQ8W967B7TKBjgx9rVEURAQAiIsqMbYjsT5e-T7KzowPTAAAAAAEMAAA=",  
  15.            "conversationId""AAQkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OAAQAFMRLf1C8ZxIlmEw6EI8PoI=",  
  16.            "conversationIndex""AQHVkyqyUxEt/ULxnEiWYTDoQjw+gg==",  
  17.            "isDeliveryReceiptRequested"false,  
  18.            "isReadReceiptRequested"false,  
  19.            "isRead"false,  
  20.            "isDraft"false,  
  21.            "webLink""https://outlook.office365.com/owa/?ItemID=AAMkAGVmMDEzMTM4LTZmYWUtNDdkNC1hMDZiLTU1OGY5OTZhYmY4OABGAAAAAAAiQ8W967B7TKBjgx9rVEURBwAiIsqMbYjsT5e%2FT7KzowPTAAAAAAEMAAAiIsqMbYjsT5e%2FT7KzowPTAAIgOnGGAAA%3D&exvsurl=1&viewmodel=ReadMessageItem",  
  22.            "inferenceClassification""other",  
  23.            "body": {  
  24.                "contentType""html",  
  25.               "content":"<html></html>"  
  26.            },  
  27.            "sender": {  
  28.                "emailAddress": {  
  29.                    "name""MyAnalytics",  
  30.                    "address""no-reply@microsoft.com"  
  31.                }  
  32.            },  
  33.            "from": {  
  34.                "emailAddress": {  
  35.                    "name""MyAnalytics",  
  36.                    "address""no-reply@microsoft.com"  
  37.                }  
  38.            },  
  39.            "toRecipients": [  
  40.                {  
  41.                    "emailAddress": {  
  42.                        "name""Megan Bowen",  
  43.                        "address""MeganB@M365x214355.onmicrosoft.com"  
  44.                    }  
  45.                }  
  46.            ],  
  47.            "ccRecipients": [],  
  48.            "bccRecipients": [],  
  49.            "replyTo": [],  
  50.            "flag": {  
  51.                "flagStatus""notFlagged"  
  52.            }  
 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
  1. Get-SPOTenantServicePrincipalPermissionRequests  
 For deny
  1.  Deny-SPOTenantServicePrincipalPermissionRequest -RequestId <Guid>  
For approve
  1. 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 :)