Me Experience in Microsoft Teams using Microsoft Graph Tookit and SPFx

Published on 09/11/2020

Create the Me Experience as explained in the blog by Waldek Mastykarz using Microsoft Graph Tookit with React and SPFx

This blog is a short walkthrough of the sample created for the Me Experience with the Combine multiple web parts in a single tab of a personal Teams app approach

The sample covers:

The finished app me-experience

Personal App for Me Experience

The sample gives you 3 tabs for a Personal App in Microsoft Teams, using mgt-react package for components

  • Planning
  • Insights
  • Settings


Uses Agenda, Tasks, and Get components from Microsoft Graph Tookit with React

MGT-Files are coming and can replace the custom File component used here in combination with Get to simplify things further. But we don't know when but fingers crossed 🤞🏽


Uses the custom component using GET Component in MGT and a custom template


Personal Apps in Teams do not have configuration settings as in a regular SPFx webpart. And often we might want to configure few things. For e.g here , the app shows me my upcoming meetings for the next 8 days, may be I want to see it for just the next 5 days then I should be able to configure this.

For this personalised configuration, we have a variety of option, you can see here Here we have used Microsoft Graph Open Extensions Right now it only has one setting, the number of days passed to the Agenda component to bring back events, but we will be upgrading this to more as the need arise.

Find full source here

The app respects themes chosen by users in Teams, thanks to this article by Joao Mendez a lot of work was simplified for this sample , kudos to you 👏🏽