If you are a starter and willing to learn more about Microsoft Graph Toolkit, you are in the right place! Before we jump into a long run project, we will discover Microsoft Graph Toolkit and find answers to the following questions:
- What is Microsoft Graph Toolkit?
- What is in Microsoft Graph Toolkit?
- Where to get started?
Today, our focus will be understanding the basics. But, If you are interested in building an overall solution, check out this post: Microsoft Graph Toolkit: gather together your Office 365 in one app.
What is Microsoft Graph Toolkit?
It is a powerful collection of reusable web components and providers that enables accessing Microsoft 365 data. It makes Microsoft Graph easy to use in your application. For instance, we can implement login and tasks with just two lines of code by using Login and Tasks components.
The Microsoft Graph Toolkit is great for developers of all experience levels. All components work fluently with all modern browsers and web frameworks (React, Angular, Vue, etc.).
What is in Microsoft Graph Toolkit?
Components: a collection of web components powered by Microsoft Graph APIs
Note: The components work best when used with a provider.
| Component | HTML |
|---|---|
| Login | <mgt-login></mgt-login> |
| Person | <mgt-person person-query=”me” view=”twoLines”></mgt-person> |
| People | <mgt-people show-max=”5″></mgt-people> |
| Agenda | <mgt-agenda></mgt-agenda> |
| Tasks | <mgt-tasks></mgt-tasks> |
| People picker | <mgt-people-picker></mgt-people-picker> |
| Person card | <mgt-person person-query=”me” view=”twoLines” person-card=”hover”></mgt-person> <div class=”note”> (Hover on person to view Person Card) </div> |
| Get | <mgt-get resource=”/me/messages” version=”beta” scopes=”mail.read” max-pages=”2″> <template>….</template> </mgt-get> |
| Channel picker | <mgt-teams-channel-picker></mgt-teams-channel-picker> |
Providers: enable authentication and provide the implementation to get the access tokens for consuming Microsoft Graph APIs
| Providers | HTML |
|---|---|
| Msal | Sign in users and acquire tokens to use with Microsoft Graph. |
| SharePoint | Authenticates and provides Microsoft Graph access to components inside of SharePoint web parts. |
| Teams | Authenticates and provides Microsoft Graph access to components inside of Microsoft Teams tabs. |
| Proxy | Allows the use of backend authentication by routing all calls to Microsoft Graph through your backend. |
| Custom | Create a custom provider to enable authentication and access to Microsoft Graph with your application’s existing authentication code. |
Where to get started?
1. The Playground
Microsoft Graph Toolkit Playground is definitely a great tool for starters who wants to try out components and learn more about the capabilities of each component. It is quite helpful for discovering the components edge to edge before trying them out in a custom application. Highlights of the Playground:
- Canvas is the place for testing the components, checking the visual results and customizing UI as our wishes.
- Docs is the place where we can check the attributes, properties, events, css and stories for each component.
- Finally, don’t forget to check Samples in the Playground, there are many templates available and ready to use!
2. Repository
Microsoft Graph Toolkit provides a rich repository with Angular, ASP.NET Core, React and many more other samples available. If you are looking for some sample solutions, Microsoft Graph Toolkit Repository is the great place to start exploring.
3. Docs
Here is the official documentation of the Microsoft Graph Toolkit.
Let me know about your experience with Microsoft Graph Toolkit. Furthermore, If you would like to build a solution from scratch with the power of Microsoft Graph Toolkit, check out this post: Microsoft Graph Toolkit: gather together your Office 365 in one app.
Cheers!
Leave a Reply