Microsoft Graph Toolkit Web Components

The Microsoft Graph Toolkit (mgt) web components package is a collection of web components powered by Microsoft Graph. The components are functional, work automatically with Microsoft Graph, and work with any web framework and on all modern browsers.

Note: If you are building with React, you might find @vonrehberg.consulting/mgt-react useful as well.

See docs for full documentation

Components

You can explore components and samples with the playground powered by storybook.

The Toolkit currently includes the following components:

• mgt-login
• mgt-person
• mgt-person-card
• mgt-people
• mgt-people-picker
• mgt-agenda
• mgt-tasks
• mgt-todo
• mgt-get
• mgt-teams-channel-picker

The components work best when used with a provider. The provider handles authentication and the requests to the Microsoft Graph APIs used by the components.

Get started

The components can be used on their own, but they are at their best when they are paired with an authentication provider. This example illustrates how to use the components alongside a provider (MsalProvider in this case).

1. Install the packages

   npm install @vonrehberg.consulting/mgt-element @vonrehberg.consulting/mgt-components @vonrehberg.consulting/mgt-msal-provider

2. Use components in your code

   <script type="module">
     import {Providers} from '@vonrehberg.consulting/mgt-element';
     import {MsalProvider} from '@vonrehberg.consulting/mgt-msal-provider';
   
     // import the components
     import '@vonrehberg.consulting/mgt-components';
   
     // initialize the auth provider globally
     Providers.globalProvider = new MsalProvider({clientId: 'clientId'});
   </script>
   
   <mgt-login></mgt-login>
   <mgt-person person-query="Bill Gates" person-card="hover"></mgt-person>
   <mgt-agenda group-by-day></mgt-agenda>

Sea also

• Microsoft Graph Toolkit docs
• Microsoft Graph Toolkit repository
• Microsoft Graph Toolkit playground