Gather together your Office 365 in one app with Microsoft Graph Toolkit

Hello everyone! Today, we will work on building an ASP.NET Core MVC web app from scratch and use Microsoft Graph Toolkit to:

Enable Microsoft identity platform authentication
Get the agenda from Outlook Calendar
Get tasks from Planner
Get e-mails from Outlook

I am so excited about Microsoft Graph Toolkit, since the day it is announced. It is a powerful collection of reusable web components that enables accessing Outlook, Calendar, Tasks, People and many more with just couple lines of code! Believe it or not, Microsoft identity platform authentication can be implemented in seconds thanks to Microsoft Graph Toolkit.

This web app scenario will be a great example to understand how easy and fast to consume Microsoft Graph Toolkit components!

You can get the source code from https://github.com/aycabas/MicrosoftGraphToolkit-NetCore

Create ASP.NET Core MVC web app in Visual Studio Code

Open the Terminal in Visual Studio Code (Ctrl+Shift+`)
Create a new folder for the project

PS C:\Users\user> cd Desktop
PS C:\Users\user\Desktop> mkdir GraphToolkitNetCore

Create ASP.NET Core MVC app

PS C:\Users\user\Desktop> dotnet new mvc
PS C:\Users\user\Desktop> cd GraphToolkitNetCore

When the app is created successfully, go ahead and click on “Open Folder” to open your project folder

Press F5 to run the project

Our project is working fine. Before we start building our app with Microsoft Graph Toolkit, let’s go to launchSettings.json under Properties and set applicationUrl as “http://localhost:8080”

Register an app in Azure Active Directory

Go to portal.azure.com
Under Azure Active Directory, go to App Registration and click on New Registration

Give a name to your app
Choose the access level
Choose Web and place http://localhost:8080 as a Redirect URI

Go to Authentication tab
Check Access tokens and ID tokens

Finally, go to Overview tab
Copy Application (client) ID to a notepad, we will need it later

Setup Index.cshtml

Go to Index.cshtml and add a row and three columns inside the row

<div class="row" id="content">
    
    <div class="column" id="one"></div>
    <div class="column" id="two"></div>
    <div class="column" id="three"></div>
    
</div>

Copy below additional css to site.css under wwwroot>site.scs

/* Main content */
#content, html, body {
  height: 98%;
}
#one {
  float: left;
  width: 33%;
  background:transparent;
  height:500px;
  overflow: hidden;
}
#one:hover {
  overflow-y: auto;
}
#two {
  float: middle;
  width: 33%;
  background: transparent;
  height: 500px;
  overflow: hidden;
}
#two:hover {
  overflow-y: auto;
}
#three {
  float: left;
  width: 33%;
  background: transparent;
  height: 500px;
  overflow: hidden;
}
#three:hover {
  overflow-y: auto;
}

/*Email*/

.email {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 8px 4px;
  font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
}

.email:hover {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 8px 4px;
}

.email h3 {
  font-size: 12px;
  margin-top: 4px;
}

.email h4 {
  font-size: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.email mgt-person {
  --font-size: 10px;
  --avatar-size-s: 12px;
}

.email .preview {
  font-size: 13px;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 2.8em;
  line-height: 1.4em;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

Let’s start using with Microsoft Graph Toolkit

Login

Go to Home>Index.cshtml
Implement MSAL provider in your Index.cshtml to facilitate Microsoft identity platform authentication
Make sure it is placed under the welcome message

<script src="https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<mgt-msal-provider client-id="[Client-id]"></mgt-msal-provider>
<mgt-login></mgt-login>

Paste Application (client) ID that you copied earlier from Azure Active Directory

Press F5 to run your application
Click on sign in button and login with your account
Accept to permission request

When you successfully complete your authentication, you should see your details in the page

Get E-mails

Use mgt-get to get user’s e-mails. Implement below code as column 1 in Index.cshtml

       
<mgt-get resource="/me/messages" version="beta" scopes="mail.read" max-pages="1">
     <template>
        <div class="email" data-for="email in value">
            <h4><mgt-person person-query="{{email.sender.emailAddress.address}}" show-name person-card="hover"></mgt-person></h4>
             <h3>{{ email.subject }}</h3>
             <div data-if="email.bodyPreview" class="preview" innerHtml>{{email.bodyPreview}}</div>
             <div data-else class="preview">email body is empty</div>
        </div>
      </template>
      <template data-type="loading">loading</template>
      <template data-type="error">{{ this }} </template>
</mgt-get>

Press F5 to run the app, you should be able to see the emails

Agenda

Use mgt-agenda to get a user or group calendar. Implement below code as column 2 in Index.cshtml

<mgt-agenda group-by-day></mgt-agenda>

Press F5 to run the app, you should be able to see the agenda on the right side of the e-mails

Tasks

Use mgt-tasks to get a user or group calendar. Implement below code as column 2 in Index.cshtml

<mgt-tasks></mgt-tasks>

Press F5 to run the app, you should be able to see the tasks on the right side of the agenda

Final version of Index.cshtml will look like below:

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>

    <script src="https://unpkg.com/@@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
    <mgt-msal-provider client-id="[Client-id]"></mgt-msal-provider>
    <mgt-login></mgt-login>

</div>


<div class="row" id="content">
     
    <div class="column" id="one">  
        <mgt-get resource="/me/messages" version="beta" scopes="mail.read" max-pages="1">
            <template>
                <div class="email" data-for="email in value">
                    <h4><mgt-person person-query="{{email.sender.emailAddress.address}}" show-name person-card="hover"></mgt-person></h4>
                        <h3>{{ email.subject }}</h3>
                        <div data-if="email.bodyPreview" class="preview" innerHtml>{{email.bodyPreview}}</div>
                        <div data-else class="preview">email body is empty</div>
                </div>
            </template>
            <template data-type="loading">loading</template>
            <template data-type="error">{{ this }} </template>
        </mgt-get>   
    </div>

    <div class="column" id="two">
        <mgt-agenda group-by-day></mgt-agenda>
    </div>
    <div class="column" id="three">
        <mgt-tasks></mgt-tasks>
    </div>
     
</div>

Finally, our app is ready! We have our e-mails, agenda and tasks in one place. I hope you enjoyed using Microsoft Graph Toolkit. You can get the source code from https://github.com/aycabas/MicrosoftGraphToolkit-NetCore/tree/master

Let me know about your experience or if you have any feedback!

Ayça Baş