The Microsoft Graph Toolkit is allowing Graph powered apps to be created incredibly quickly. Leave this session knowing what the Microsoft Graph is and how write your first Graph powered web app using the Microsoft Graph Toolkit. Basic knowledge of HTML is all that's required to get the most from this session.

1. April, 26. – 28. 2021
MICROSOFT 365 VIRTUAL MARATHON 2021
m365virtualmarathon.com #M365VM
BUILDING APPS WITH THE
MICROSOFT GRAPH TOOLKIT
CAMERON DWYER
@CAMERONDWYER
ONEPLACESOLUTIONS

2. MICROSOFT 365 VIRTUAL MARATHON 2021 SPONSORS

3. m365virtualmarathon.com #M365VM
Microsoft Graph is your data in Microsoft 365
accessed through a unified API endpoint
Microsoft Graph

6. Recent People
Dana Wilkins (Syntex Corp)
v-danwil@contoso.com
Mat Anderson
matander@contoso.com
Jeremy Rosenfeld
jrose@contoso.com
Sara Lopez
sarlopez@contoso
Charmaine Graves (Syntex Corp)
v-chamgra@contoso

7. Jeremy

8. Jeremy
Recent People
Jeremy Yi
jeremyi@contoso.com
Jeremy Champion (MECHANICS AND DEPLOYMENT)
Jchamp@contoso.com
Jeremy LAGARDE
jlegarde@northwinds.com
Jeremy Kraft (OPERATIONS)
jeremyk@contoso.com
Jeremy Rosenfeld
jrose@contoso.com
Other Suggestions

9. Jeremy
Recent People
Other Suggestions
Jeremy Yi
jeremyi@contoso.com
Jeremy Champion (MECHANICS AND DEPLOYMENT)
Jchamp@contoso.com
Jeremy LAGARDE
jlegarde@northwinds.com
Jeremy Kraft (OPERATIONS)
jeremyk@contoso.com
Jeremy Rosenfeld
jrose@contoso.com
Jeremy Yi
jeremyi@contoso.com
Jeremy Champion (MECHANICS A…
Jchamp@contoso.com
Jeremy LAGARDE
jlegarde@northwinds.com
Jeremy Kraft (OPERATIONS)
jeremyk@contoso.com
Jeremy Rosenfeld
jrose@contoso.com

10. Rosenfeld
Champion (MECHANICS AND…
Akerman
DiStefano
Mat Anderson
Jeremy Rosenfeld

11. Jeremy Yi
jeremyi@contoso.com
Jeremy Champion (MECHAN…
Jchamp@contoso.com
Jeremy LAGARDE
jlegarde@northwinds.com
Jeremy Kraft (OPERATIONS)
jeremyk@contoso.com
Jeremy Rosenfeld
jrose@contoso.com

12. Security
/security

13. GET https://graph.microsoft.com/v1.0/me/events?$select=subject
POST https://graph.microsoft.com/v1.0/me/drive/root/children
me
me

14. /{version}/{resource}/{id}/{property} {parameters}
HTTP verbs represent the intent GET | POST | PATCH | PUT | DELETE
Version: /v1.0 or /beta
Resource: /me, /users, /groups, /sites, /drives …
Collection item: /users/john
Property: /users/john/department
Linked data via navigation: /users/john/events
Query Parameters: /users/john/events?$select=subject&$top=5&$filter=…..

16. Education
Events
Files
Financials
Groups
Identity
Lists
Mail
Messages
Notes
Notifications
Pages
Places
Plans
Reports
Schools
Search
Secure score
Security alerts
Sites
Social
Subscriptions
Tasks
Teams
Threat intelligence
Users
Workbooks
Activities
Attachments
Audits
Calendar
Categories
Charts
Classes
Contacts
Conversations
Cross-device experiences
Customer booking
Device configuration
Device management
Domains

17. m365virtualmarathon.com #M365VM
DEMO
Graph Explorer

18. Graph API
Abstraction of Complexity
Graph SDKs Graph Toolkit
Microsoft Graph Toolkit

19. Microsoft Graph Toolkit
A collection of framework-agnostic web components powered by Microsoft Graph

20. m365virtualmarathon.com #M365VM
DEMO
Graph Toolkit App

21. Components
• Login
• Person
• People
• Person Card
• People Picker
• Teams Channel Picker
• Agenda
• Tasks
• To Do
• Files

22. m365virtualmarathon.com #M365VM
DEMO
Graph Toolkit Playground

23. No Lock-in
• Custom styling
• Custom templates
• mgt-get component
• Global provider

24. Graph call
Template to render results
(Repeated for each result)
Template while data loads
Template when error happens
mgt-get

25. mgt-get

26. Providers and calling Graph API directly

27. m365virtualmarathon.com #M365VM
DEMO
Warehouse Packing App

28. m365virtualmarathon.com #M365VM
Why Use the Graph Toolkit?
Cut development time
Beautiful but flexible
Works everywhere

29. m365virtualmarathon.com #M365VM
SPEAKER AND EVENT FEEDBACK
http://bit.ly/M365VM21Feedback

30. @CameronDwyer
camerondwyer.com
aka.ms/ge
aka.ms/mgt
aka.ms/mgtlap
mgt.dev
l.linklyhq.com/l/QVLR
CONNECT WITH ME