Microsoft 365 Community / Microsoft Graph Toolkit

In this 32-minute developer focused demo, Sébastien Levert shares all that’s new in MGT v3.0.0-RC.3? Check out these infrastructure updates (support for Graph JS SDK v3.0, sovereign clouds and Node 14-16), styling updates (refreshed 100% components with Fluent UI), improved SPFx development (built-in disambiguation), new scenarios (theme toggle support, generic picker component, taxonomy picker, search box and search components), and improved scenarios (multi-account support, in-context (person card) sending messages). Try out the v3.0 capabilities in the updated Microsoft Graph Toolkit Playground.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 20, 2023.

Demo Presenter
• Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials
• Tool - Microsoft Graph Toolkit Playground – v3 | https://mgt.dev/next/v3/?path=/story/overview--page
• Toolkit - aka.ms/mgt/ (click the Latest button under Releases in Right sidebar).

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

📺 In this 17 minute developer-focused demo Hugo Bernier walks us through the "My Dashboard" sample of Joao Mendes. Sample looks professional and complete which makes adoption of web parts easier. Utilizing Microsoft Graph Toolkit V3 RC, this SPFx app allows quick access to user agenda, To Do Tasks, Files and News and Relevant People related to user. Hugo also provides an overview on Microsoft Graph toolkit.

This demo is taken from the Viva Connections & SharePoint Framework community call - 13th of July 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Hugo Bernier (Microsoft) | @bernierh & Joao Mendes | @joaomendez

📖 Learn more
• Sample shown in video: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-my-dashboard
• Getting started with SharePoint Framework: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant
• Building for Microsoft teams: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview
• Use Microsoft Graph in your solution: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis
• Publish SharePoint Framework applications to the Marketplace: https://learn.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview
• Microsoft 365 Patterns and Practices - Guidance, tooling, samples and open-source controls for your Microsoft 365 development: https://pnp.github.io/
• Fluent UI version 9 - Converged Fluent UI components: https://github.com/microsoft/fluentui/tree/master/packages/react-components

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

📺 MGT v3.0 launched on June 27th. In this 17-minute developer focused demo, Sébastien Levert shares a completely new Search capability (in preview) - specifically Search Box and Search Results components. Easily add search to a page with two tags, find files anywhere in Microsoft 365 environment. See the much more interesting, customizable search options in hero app that ships with MGT. Rich set of customization options, but also quite capable out of the box.

This community call demo is taken from the weekly Microsoft 365 Platform Community call recorded on June 27, 2023.

✨ Demo Presenter
• Sébastien Levert (Microsoft) | @Sebastienlevert

📖 Supporting materials
• Article - Microsoft Graph Toolkit v3.0 is now generally available | https://devblogs.microsoft.com/microsoft365dev/microsoft-graph-toolkit-v3-0-is-now-generally-available/
• Tool - Microsoft Graph Toolkit Playground – v3 | https://mgt.dev/next/v3/?path=/story/overview--page
• Toolkit - aka.ms/mgt/ (click the Latest button under Releases in Right sidebar).
• Demo (June 20) - Introduction to Microsoft Graph Toolkit v3 – Sébastien Levert (Microsoft) | @sebastienlevert

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

In this 22-minute developer focused demo, Sébastien Levert and Gavin Barron deliver a show-and-tell session focusing on what’s new in MGT v3.0? Refreshed components with Fluent UI, mult-account support, generic picker control, disambiguation built-in, support for Graph JS SDK v3.0, support for sovereign clouds, support for node 14-16. Then what? Conversation component in collaboration with the ACS UI Library - scope is 1:1 and 1:m conversations. Finally, MGT v3.1 and beyond – enhanced File List experience and Search Component.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 14, 2023.

Demo Presenters
• Sébastien Levert | @sebastienlevert (Microsoft)
• Gavin Barron (Microsoft) | @gavinbarron

Supporting materials
• Tools - Microsoft Graph Toolkit | aka.ms/mgt
• Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph – next-v3.0 | https://mgt.dev/next/v3/?path=/story/overview--page

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 Platform Community - http://aka.ms/community/home

The next version of Toolkit is weeks away (January). In this 19-minute developer focused demo, Sébastien Levert and Gavin Barron show refreshed components with Fluent UI, multi-account support, generic picker control, disambiguation feature built-in, support for Graph JS SDK v3.0, support for sovereign clouds, support for Node 14-16, and scenario-based samples. See several updated components and disambiguation feature. Please look at the preview and share your thoughts - gaps, ideas, other feedback with the team.

This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on November 29, 2022.

Demo Presenters
• Sébastien Levert (Microsoft) | @sebastienlevert
• Gavin Barron (Microsoft) | @gavinbarron

Supporting materials
• Tools - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/next/pr/1964/?path=/story/overview–page
• Repo - Microsoft Graph Toolkit | aka.ms/mgt
• Documentation – Microsoft Graph Toolkit overview | aka.ms/mgt/docs
• Samples – Microsoft Graph Toolkit Samples & Tutorial Materials | aka.ms/mgt/samples
• Playground – Microsoft Graph Toolkit Playground | aka.ms/mgt/dev
• Learn – Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn
• Feedback - Feedback on our v3 release! #1966 | https://github.com/microsoftgraph/microsoft-graph-toolkit/discussions/1966

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

Why build your own version of Microsoft Teams? In this 16-minute developer-focused demo, Sohil Bhalla addresses this question with a business case and architecture. For his solution, he uses a Microsoft Graph Toolkit provider, mgt-get components, back-end implementation (.NET 5), Microsoft Graph change subscription, SignalR implementation, client-side changes to get latest messages from Teams and responds to all Microsoft Graph calls (Proxy Provider). See demo of near instantaneous chat and notifications in the non-Teams app and Teams App side-by-side. This PnP community demo is taken from the Microsoft 365 & Power Platform Development community call recorded on June 23, 2022.

Demo Presenter
• Sohil Bhalla (Codeless Technology) | @SohilBhalla

Supporting materials
• Article - Build your own Microsoft Teams using Microsoft Graph Toolkit and .NET Core API and integrate using web components | https://pnp.github.io/blog/post/build-teams-using-graph-toolkit/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 13-minute developer focused demo, Sébastien Levert acclimates viewers to the back-end Microsoft Graph Toolkit samples repo and the front-end UI. He highlights the connections between the universal Sample Solution Gallery and the toolkit sandbox – allows you to try out your newly found sample! There are 4 community contributed samples in the gallery today, the goal is 15 – 20 in the next 2 weeks. Can you help Séb help us? Please share what you have built using the toolkit or submit an issue with what you would like built. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 29, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Repo - Microsoft Graph Toolkit Samples & Tutorial Materials | aka.ms/mgt/samples
• Samples - Sample Solution Gallery | https://adoption.microsoft.com/sample-solution-gallery
• Repo - Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k
• Issues - MGT Issues | https://aka.ms/mgt/issues
• Learn – Develop apps with the Microsoft Graph Toolkit | https://aka.ms/mgt/learn

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

See how easy it is for Teams to leverage MGT. In this 9-minute developer focused demo, Sébastien Levert opens with a review of MGT basics. Develop Teams apps using either yo teams (Microsoft Teams Community driven Yeoman generator) or the Teams toolkit (Microsoft provided framework to build apps in .NET, JavaScript and TypeScript). Add MGT to your project, install the mgt-react package and MSAL 2 provider. Now add MGT components. Expose your apps in Teams, office.com, Outlook. MGT is Framework agnostic. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 22, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Build a Microsoft Teams tab with the Microsoft Graph Toolkit | aka.ms/mgt/teams
• Documentation – Getting Started with Contact Exporter Sample | https://github.com/OfficeDev/TeamsFx-Samples/tree/v2/graph-toolkit-contact-exporter
• Tool - Yo Teams - the Microsoft Teams app generator | https://pnp.github.io/generator-teams/
• Tool - Teams Toolkit | https://marketplace.visualstudio.com/items?itemName=msft-vsteamstoolkit.vsteamstoolkit
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 10-minute developer focused demo, Sébastien Levert shows viewers just how easy it is to add Graph to an SPFx project - create a new yo project, install the mgt-spfx package (includes mgt library component that goes into your app catalog), and if using React, install the mgt-react component. Coding time! Import the SharePointProvider from mgt-spfx (handles authentication and connection to SPFx library component). Fast track SPFx projects with MGT components. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 15, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Build a SharePoint web part with the Microsoft Graph Toolkit | aka.ms/mgt/spfx
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k

Learn more:
• Learn more about the Microsoft 365 Platform Community community at: http://aka.ms/m365/community
• Visit the Microsoft 365 Platform Community YouTube channel: https://aka.ms/m365/videos

In this 12-minute developer focused demo, Sébastien Levert once again reminds viewers that MGT is Framework agnostic. If you're building apps with Angular, you can use Microsoft Graph Toolkit components. To get started – install the Angular CLI, use the Angular CLI to scaffold up a new web application (ng new angular app name), then install MGT. In this demo see how the mgt-login and mgt-agenda components are added within Angular components. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 8, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Use the Microsoft Graph Toolkit with Angular | aka.ms/mgt/angular
• Article - A Lap around Microsoft Graph Toolkit Day 14 – Using Microsoft Graph Toolkit with Angular | https://devblogs.microsoft.com/microsoft365dev/a-lap-around-microsoft-graph-toolkit-day-14-using-microsoft-graph-toolkit-with-angular/
• Angular - CLI Overview and Command Reference | https://angular.io/cli
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 14-minute developer focused demo, Sébastien Levert reminds viewers that MGT is Framework agnostic. Case in point, if you're building apps with React, you can use Microsoft Graph Toolkit React components (mgt-react). Three items to get started - create a react app, select an MSAL provider for authentication and use MGT react components in your code. MGT react components look and behave like native react. In this demo, presenter looks at Login, Agenda, FileList and Get (for customizing) components. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on March 1, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Microsoft Graph Toolkit React components | https://docs.microsoft.com/graph/toolkit/get-started/mgt-react
• Documentation - Use the Microsoft Graph Toolkit with React | https://docs.microsoft.com/graph/toolkit/get-started/use-toolkit-with-react
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• MGT Playground - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Sebastien’s MGT Demos Repo - MGT Sandbox | aka.ms/mgt/sandbox
• MGT Demos Playlist - Microsoft Graph Toolkit – YouTube | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUVLPfpm0QL4DVQ8Rw2Md5k

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 13-minute developer focused demo, Sébastien Levert covers the very flexible all-purpose GET query that allows developers to connect to any endpoint in Microsoft Graph and render the MTTs from Graph directly inside your app UI. E-mail and files explorer experiences are showcased. E-mail – get, read, write, delete, and the best part, you can customize the UI layout to your exact requirements. Files explorer is built using hTWOo and uses MGT. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 15, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Get component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/get
• MGT Playground – mgt-get | https://mgt.dev/?path=/story/components-mgt-get--get-email
• Repo - MGT Sandbox | https://github.com/sebastienlevert/mgt-sandbox
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December 2021 | https://youtu.be/JkgFrbtwdJU?t=476
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021 | https://youtu.be/HfBVaeGRDw8?t=2375
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022 | https://youtu.be/kZ_JwZpbJb4?t=1158
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022 | https://youtu.be/WU_CqJC5fyQ?t=2163
• Microsoft Graph Toolkit – Using the People Picker Component in your solutions – 18 January 2022 | https://youtu.be/YG16snk1fJU?t=2424
• Microsoft Graph Toolkit – Using the Teams Channel Picker Component in your solutions – 25 January 2022 | https://youtu.be/F5JcbIlxSpo?t=2293
• Using the MGT Agenda and Tasks Components in your solutions – 1 February 2022 | https://youtu.be/Ddc0vZYAXDs?t=2619
• Using the MGT Files Components in your solutions – 8 February 2022 | https://youtu.be/AHF8poXLZ10?t=2198

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 11-minute developer-focused demo, Yves Habersaat articulates how the Microsoft Graph Toolkit (MGT) together with SharePoint Framework (SPFx) and custom templates work together to display agendas, files, tasks, messages and more. To set up your environment - install mgt-spfx, mgt-spfx npm, and mgt React components packages. Instantiate the SharePointProvider. Finally, import selected MGT React components into your web part and grant permissions to SPO. See how presenter uses GET component and renders results in custom templates. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 10, 2022.

Demo Presenter: Yves Habersaat (Sword Group) | @yhabersaat

Supporting materials:
• Repo – Microsoft Graph Toolkit - v2.4.0 | https://github.com/microsoftgraph/microsoft-graph-toolkit/releases
• Demo - Using the Microsoft Graph Toolkit Get Component in your solutions – Sébastien Levert (Microsoft) | @sebastienlevert – https://youtu.be/9w2L3-7sCDI?t=2432
• Documentation - Get component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/get
• MGT Playground – mgt-get | https://mgt.dev/?path=/story/components-mgt-get--get-email

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 21-minute developer focused demo, Sébastien Levert reviews two MGT components - Files and File list that handles files and folders stored in Teams, SharePoint and OneDrive. Files presentation capabilities include layouts, custom file icon, related information – drive, site, user and group IDs, also properties and details. File list capabilities highlighted include ability to display, upload, query for files/folders, get files by insight type, file extension and access through breadcrumb navigation. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 8, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - File component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/file
• Tool - Microsoft Graph Toolkit Playground – File | https://mgt.dev/?path=/story/components-mgt-file--file
• Repo - MGT Sandbox | https://github.com/sebastienlevert/mgt-sandbox
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December 2021 | https://youtu.be/JkgFrbtwdJU?t=476
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021 | https://youtu.be/HfBVaeGRDw8?t=2375
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022 | https://youtu.be/kZ_JwZpbJb4?t=1158
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022 | https://youtu.be/WU_CqJC5fyQ?t=2163
• Microsoft Graph Toolkit – Using the People Picker Component in your solutions – 18 January 2022 | https://youtu.be/YG16snk1fJU?t=2424
• Microsoft Graph Toolkit – Using the Teams Channel Picker Component in your solutions – 25 January 2022 | https://youtu.be/F5JcbIlxSpo?t=2293
• Using the MGT Agenda and Tasks Components in your solutions – 1 February 2022 | https://youtu.be/Ddc0vZYAXDs?t=2619

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 16-minute developer focused demo, the sixth session in Sébastien Levert’s MGT series. This session opens with an overview of Microsoft Graph then dives into the Teams Channel Picker component that can display channels user is a member, find a channel and show members, and send a message to channel users. Not only can you get data from Graph, but post data via Graph and optionally add a custom template experience. See code and rendering side-by-side. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 25, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Microsoft Teams Channel Picker component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/teams-channel-picker
• Repo - MGT Sandbox Seb’s demos | https://github.com/sebastienlevert/mgt-sandbox
• MGT Playground – Teams Channel Picker | https://mgt.dev/?path=/story/components-mgt-teams-channel-picker--teams-channel-picker
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December 2021
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022
• Microsoft Graph Toolkit – Using the People Picker Component in your solutions – 18 January 2022

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 24-minute developer focused demo, Sébastien Levert in the last 9 weeks has delivered an overview and a complete component tour of MGT. Now we focus on customizations that allow you to deliver native looking experiences for your particular app. Six areas for customizations – styling, templating, and localizing components along with handling events, caching Graph calls in components and Right-to-Left support. Customizations can be Global or single instance in scope. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 22, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - Styling components in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/customize-components/style
• Documentation - Microsoft Graph Toolkit caching | https://docs.microsoft.com/graph/toolkit/customize-components/cache
• Documentation - Localizing the Microsoft Graph Toolkit components | https://docs.microsoft.com/graph/toolkit/customize-components/localization
• Tool - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | https://mgt.dev/
• Samples - MGT Sandbox | aka.ms/mgt/sandbox
• Issues – MGT Issus | aka.ms/mgt/issues
• Demos - Previous Demos for MGT | https://www.youtube.com/playlist?list=PLR9nK3mnD-OUQOW86tT5dkCRQAVGY7DlH
• Learn – Develop apps with the Microsoft Graph Toolkit | https://aka.ms/mgt/learn

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
•Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 17-minute developer focused demo, the fourth session in Sébastien Levert’s MGT series. This session focuses on the Microsoft Graph People picker control and options for customization. Search for users and/or groups (DG, SG, M365, Teams groups) in an organization from inside your apps and forms. Find people trending around me, groups, users from a group, direct reports, newly added to team, people by e-mail address. Build a custom People picker component. See code and rendering side-by-side. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 18, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation - People-Picker component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/people-picker
• MGT Playground – People Picker | https://mgt.dev/?path=/story/components-mgt-people-Picker--people-picker
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December 2021
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022
• Microsoft Graph Toolkit – Using the People Component in your solutions – 11 January 2022

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 14-minute developer focused demo, the third session in Sébastien Levert’s MGT series. This session focuses on the Microsoft Graph People control and options for customization. See how to use the People component to display a group of people or contacts (photos or initials). Find people trending around you, users from a group or array, show their presence, see managers and direct reports. Build a custom People component with custom templating. See code and rendering side-by-side. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 11, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation - People component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/people
• Playground – People component | https://mgt.dev/?path=/story/components-mgt-people--people
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Previous demos in Sébastien Levert’s (Microsoft) | @sebastienlevert, Microsoft Graph Toolkit (MGT) series
• Discover the Microsoft Graph Toolkit – 7 December, 2021
• Microsoft Graph Toolkit – Using Login Component in your solutions – 14 December 2021
• Microsoft Graph Toolkit – Using the Person Component in your solutions – 4 January 2022

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 12-minute developer focused demo, Sébastien Levert reviews three MGT components - Agenda, Planner Tasks, and To-Do tasks. Agenda – listing of future events in your calendar – specify event order, by day of week, number events, number days, by reference time zone and customized rendering. Planner Tasks – see tasks assigned to you from multiple projects. Essentially manage Planner tasks (add, delete, modify) without having to launch Planner App. Finally in To-do – access my Reading List, add/delete readings. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on February 1, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Documentation – Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/mgt/docs
• Documentation – Agenda component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/agenda
• Documentation – Tasks component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/tasks
• Documentation - To Do component in the Microsoft Graph Toolkit | https://docs.microsoft.com/graph/toolkit/components/todo
• Tool – mgt-agenda simple | https://mgt.dev/?path=/story/components-mgt-agenda--simple
• Repo - MGT Sandbox | https://github.com/sebastienlevert/mgt-sandbox
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

In this 26-minute developer focused demo, the third session in Sébastien Levert’s MGT series. This session focuses on the Microsoft Graph Person control and many options for customization. See how to use the Person component to get profile and image information on you, on another, on a group of others, on an other’s manager, presence, and on a person outside Graph. As well see customizing for rendering (styles) and for events. See code and rendering side-by-side for each capability presented. This PnP Community demo is taken from the weekly Microsoft 365 Platform Community call recorded on January 4, 2022.

Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert

Supporting materials:
• Tools - Microsoft Graph Toolkit Playground | https://mgt.dev/?path=/story/components-mgt-person--person
• Documentation - Person component in the Microsoft Graph Toolkit | https://docs.microsoft.com/en-us/graph/toolkit/components/person
• Repo – Microsoft Graph Toolkit | aka.ms/mgt
• Documentation - Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph | aka.ms/MGT/docs
• Learn - Develop apps with the Microsoft Graph Toolkit | aka.ms/mgt/learn
• First session - 7 December, 2021 - Discover the Microsoft Graph Toolkit – Sébastien Levert (Microsoft) | @sebastienlevert
• Second session – 14 December 2021 - Microsoft Graph Toolkit – Using Login Component in your solutions – Sébastien Levert (Microsoft) | @sebastienlevert

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos