Graph API Introduction

Microsoft Graph API (Application Programming Interface) is the evolvement of Office 365 Unified API into a single stop for a cloud solution by exposing multiple Microsoft cloud service APIs through a single REST (Representational State Transfer) API endpoint.

With the Office Graph, the user has created a web that consists of content and communication. Each piece of content is a node. Each person is a node. Each form of communication is a node. Office Graph connects these nodes together through specific APIs. Each one has its own API. Office Graph creates a small web for each user, whereas, Microsoft Graph API creates a web not only for one user but interlinks related users across an entire organization resulting in a large web of collaboration and communication.

Here is an image that shows how we can use Office Graph to connect and surface data among different areas of the Office 365 and Azure stacks.

The larger the web, the slower the time to access and find data. Microsoft Graph API retained the inherent machine learning capabilities as one of the responses to this issue. By collecting and analyzing, the machine learning algorithm allows Microsoft Graph API to learn the users working relationships and brings to the forefront the most frequented services not only for each individual user but as an organization as a whole by connecting each individual with collaborators and teams.

The single and greatest response to cloud data congestion is that Microsoft Graph API was evolved further so that multiple API exposures from Microsoft Cloud services are handled through a single REST API endpoint. In other words, there is one endpoint to rule them all!

Today’s Solution

The purpose of this guide is to walk through the process of creating a simple single-page app that retrieves recent Outlook mail and calendar in SharePoint using Microsoft Graph API.

When a user visits the site, they will see a link to log in and view their email, which will display a list of the most recent email in the user’s inbox.

Permissions

One of the following permissions is required to call this API. To learn more, including how to choose permissions.

Prerequisites

Azure Application with required permissions and, Application ID of the Application which we have created into the Azure Active directory.

Create Application into Azure

1. Go to https://portal.azure.com and log in with your O365 admin credentials

2. Click on “Azure Active Directory” option from left navigation3. Then click on “App registrations” option 4. Click on “Add” button to register your app and fill in the required information and then click on the “Create” button

5. Please copy “Application ID” value. Here “Application ID = Client ID” i.e. Client ID value asked in graphapi.js file

6. Edit the manifest and activate implicit OAuth

1. Click on the new registration you have created
   
2. Now Click on the “Manifest” button
   
3. Now Click on “Edit” button
   
4. Now change “oauth2AllowImplicitFlow” to true
   
5. Click on Save button to save the manifest file settings
   

7. Settings App Access Permission +
(Please note that these settings are depending on what type of graph query you have used in your app. E.g. Query regarding the user, email, list items etc.…)
Following is the example of permission I have given to read user profile of the user.

1. Click on the new registration you have created.
   
2. Click on “API Access Required Permissions”
   
3. Click on default permission settings you want to give one of permission as mentioned above into the Permissions Portion.
   
4. Select permission as your requirement
5. Click “Save” button
6. Click on “Grant Permission” button
7. Click on “Yes”
   

8. Allow access to multi-tenant.

1. Click on Setting -> Properties.
   
2. Multi-tenanted Yes -> Save.
   

Now we have the Azure application registered with required permissions.

Create an HTML File with Graph API Operation

Let’s create the Solution based on the Graph API services and the build a proper solution to return a Microsoft recommends using Microsoft Graph to access Outlook mail, calendar, and contacts.

Step 1: Create the HTML design with show “Outlook SPA” Items.

Step 2: Create the Script and implement the Graph API into the Script. I have Attached the HTML file which has HTML and Script both.

Step 3: You should make some changes into the Script as per your Applications and the Site collection of yours.

Apply your Configurations at given highlighted places.

1. Apply your Application ID which you can get by the Application you have generated into the Azure.
   

Working Scenario

Here is the Working Solution which shows Return a Microsoft recommends using Microsoft Graph to access Outlook mail and calendar events.

Step 1: For this Solution, we must have outlook items, Otherwise, it won’t show us any data.

1. Click on Index show Outlook Message.
   
2. Click on Calendar show Outlook Calendar
   

Please find source code from below GitHub location:

https://github.com/mindlabco/GetOutlookData-in-SharePoint