Welcome back to my blog! 

Today we will discuss something awesome, MGT. The Microsoft Graph Toolkit (MGT) is an invaluable tool for me as a developer, especially when I need to integrate Microsoft Graph functionalities into my web applications. It offers a variety of reusable web components and authentication helpers, significantly streamlining my work with the Microsoft Graph API. In this blog, I’ll explore the technical aspects of MGT in depth, share advanced tips and tricks, and highlight its limitations.

Let’s check the key features, and limitations of MGT. 

Key FeatureDescriptionLimitations
Reusable Web ComponentsPre-built components for common Microsoft Graph functionalities like login, calendar, tasks.Limited customization in terms of design and functionality.
Authentication ProvidersSimplifies authentication with Microsoft Graph using providers like MSAL.Tied mainly to Microsoft identity platform.
Microsoft Teams IntegrationComponents tailored for Microsoft Teams, such as Teams channel picker.Specific to Microsoft Teams; not applicable for other platforms.
Automatic Token ManagementHandles token acquisition and renewal seamlessly.Relies on proper configuration and scopes.
Adaptive Cards IntegrationSupports rendering of adaptive cards within MGT components.Requires knowledge of Adaptive Card schema.
Cross-Framework CompatibilityWorks with various web frameworks like React, Angular, Vue.js.Might require additional wrappers or configuration.
Customizable TemplatesAllows custom templates for rendering data.Customization can be complex for intricate data structures.
Event HandlingMGT components emit custom events for enhanced interactivity.Requires understanding of event-driven programming.
Graph Toolkit PlaygroundAn online tool to experiment with MGT components and see live previews.Limited to experimentation; not for production use.
Responsive DesignComponents are responsive and adapt to different screen sizes.May not fit all design requirements or specific layouts.
 

If you are already using Microsoft Graph Toolkit, then you are AWESOME! But those, who are new, lets discuss about its prerequisites, installation and configuration! 

Prerequisites 

To install or use MGT, you need to fill up the requirements: 

  • Node.js and npm installed.
  • A Microsoft Azure account.
  • A registered application in Azure with permission to access Microsoft Graph. 

Installation

Install MGT via npm:

				
					npm install @microsoft/mgt

				
			

Basic Setup

In your HTML file, include the toolkit components:

				
					<script type="module" src="@microsoft/mgt/dist/es6/index.js"></script> 
				
			

Key Web Components and Usage 

1. Login Component

The mgt-login component provides a simple way to integrate the Microsoft login.

				
					<mgt-login></mgt-login>

				
			

2. People Picker

The mgt-people-picker component lets users search and select people from Microsoft Graph.

				
					<mgt-people-picker></mgt-people-picker>
				
			

3. Agenda

The mgt-agenda component displays events from a user’s calendar.

				
					<mgt-agenda></mgt-agenda>

				
			

4. Person Component

The mgt-person component displays a person or contact by their photo, name, and/or email address.

				
					<mgt-person person-query="me"></mgt-person>

				
			

5. Todo Component

The mgt-todo component displays and allows interaction with tasks from Microsoft To Do

				
					<mgt-todo></mgt-todo>

				
			

6. Get Component

The mgt-get component allows you to make GET requests to the Microsoft Graph API directly in your HTML.

				
					<mgt-get resource="/me/messages" version="v1.0" scopes="mail.read"></mgt-get>

				
			

7. Tasks Component

The mgt-tasks manages tasks from Microsoft Planner or Microsoft To Do.

				
					<mgt-tasks></mgt-tasks>

				
			

8. File Component

The mgt-file represents a file or folder.

				
					<mgt-file file-query="/me/drive/root/children"></mgt-file>

				
			

9. File List Component

The mgt-file-list displays a list of files or folders.

				
					<mgt-file-list></mgt-file-list>

				
			

10. People Component

The mgt-people displays a group of people or contacts.

				
					<mgt-people></mgt-people>

				
			

11. Person Card Component

The mgt-person-card shows more detailed information about a person. 

				
					<mgt-person-card person-id="userId"></mgt-person-card>

				
			

12. Picker Component

The mgt-picker renders a dropdown to select a single resource.

				
					<mgt-picker></mgt-picker>

				
			

13. Search Box Component

The mgt-search-box provides a search interface.

				
					<mgt-search-box></mgt-search-box>

				
			

14. Search Results Component

The mgt-search-results displays search results.

				
					<mgt-search-results></mgt-search-results>

				
			

15. Taxonomy Picker Component

The mgt-taxonomy-picker queries and displays terms from Microsoft Graph API.

				
					<mgt-taxonomy-picker></mgt-taxonomy-picker>

				
			

16. Teams Channel Component

The mgt-teams-channel-picker allows selection of Microsoft Teams channels.

				
					<mgt-teams-channel-picker></mgt-teams-channel-picker>

				
			

17. Theme Toggle Component

The mgt-theme-toggle switches between light and dark themes.

				
					<mgt-theme-toggle></mgt-theme-toggle>

				
			

Authentication Providers

To use MGT components that require access to Microsoft Graph, you must set up an authentication provider. Here’s how to set up MSAL provider: 

				
					import {Providers, MsalProvider} from '@microsoft/mgt';

Providers.globalProvider = new MsalProvider({clientId: 'YOUR_CLIENT_ID'});

				
			

Customization and Theming

MGT components are customizable. You can modify their appearance using CSS variables.

Example: Customizing the mgt-login component.

				
					mgt-login {
  --background-color: #004578;
  --color: white;
  --font-size: 16px;
}

				
			

Tips and Tricks

Some tips and tricks for new learners! 

  1. Lazy Loading: Load components only when needed to improve performance.
  2. Caching Strategies: Utilize caching to reduce the number of calls to Microsoft Graph.
  3. Event Handlers: Leverage the events provided by MGT components for better control and interactivity.
  4. Debugging: Use browser dev tools to inspect and debug MGT components.
  5. Use Batch Requests: Group multiple Graph API requests into a single call using mgt-get.

Advanced Scenarios

Integrating with Frameworks

Integrating MGT with frameworks like React or Angular is straightforward. Here’s an example with React:

				
					import React from 'react';
import { PeoplePicker } from '@microsoft/mgt-react';

function App() {
  return (
    <div>
      <PeoplePicker />
    </div>
  );
}

export default App;

				
			

Custom Components

You can create custom components using MGT as a base. This allows for highly tailored features specific to your application.

Microsoft Graph Toolkit offers a powerful, easy-to-use set of tools and components for integrating Microsoft Graph functionality into web applications. By understanding its core components, authentication methods, and customization capabilities, developers can enhance their applications with rich Microsoft 365 integrations.

About Author

Rezwanur Rahman

Rezwanur Rahman is the Microsoft Graph MVP, located in Innsbruck, Austria. He is the ex-Microsoft employee at Microsoft Bangladesh, and Microsoft Technical Support Lead for Microsoft 365 Global Support. He is a software engineer graduate and currently contributing technical knowledge on Microsoft Copilot and ChatGPT.