Microsoft Graph Toolkit adds Presence, Templating for the Login component, a React wrapper preview, and more!
Today we’re excited to share another update to the Microsoft Graph Toolkit! In case you’re unfamiliar with it, the Microsoft Graph Toolkit is a collection of reusable, framework-agnostic web components powered by Microsoft Graph. Check out our documentation or our blog series if you’re just getting started.
This update includes new features and improvements including the addition of presence to the Person and Person Card components, templating support for the Login component, a preview of mgt-react and more.
Presence on the Person component
With the Person component, you now have the ability to easily display information about a user’s Microsoft Teams presence in addition to their display name, email, and profile photo. Using the Presence API, the component displays an icon indicating the user’s current availability and activity. All you need to do is add the show-presence attribute to any Person component! You can see an example below or go to our component playground to try it out.
<mgt-person person-query="me" person-card="hover" show-presence></mgt-person>
Templating support for Login component
We’ve added templating support to the Login component so that you can easily customize the content of the component to suit your application’s needs. The following templates have been added to mgt-login:
- Signed-in button content
- Signed-out button content
- Flyout-commands
- Flyout-person-details
You can learn more abut templating and mgt-login in our documentation.
Preview of React wrapper for all Microsoft Graph Toolkit components
Using the Toolkit components in React requires extra work as React implements its own synthetic event system and cannot listen to DOM events coming from custom elements without a workaround. Developers are required to reference Toolkit components using a ref and manually attach event listeners. We’re excited to announce a preview of mgt-react, a React wrapper for Microsoft Graph Toolkit. The library wraps all of the Microsoft Graph Toolkit components and exports them as React components so you can now use any Toolkit components in your JSX as a regular React component.
Check out our React sample or try out mgt-react in your application and provide your feedback on GitHub!
Other improvements
This update includes additional bug fixes and improvements that aren’t highlighted in this post, such as a updated UI (including dark mode) and support for groups in People Picker, added ability to set global template context, added ability to change template binding syntax, and more. To see a full list, you can check out our release notes.
Get started
To learn more about these new features and Microsoft Graph Toolkit, you can read our documentation, try out our component playground, or check out our GitHub. We also have a blog series running that covers everything Microsoft Graph Toolkit and is great for developers of all levels. If you have any feedback or feature requests, please leave us a GitHub Issue!
-The Microsoft Graph Toolkit team
Light
Dark