{"id":4759,"date":"2020-06-19T09:00:54","date_gmt":"2020-06-19T16:00:54","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4759"},"modified":"2020-06-19T09:00:54","modified_gmt":"2020-06-19T16:00:54","slug":"microsoft-graph-toolkit-adds-presence-templating-for-the-login-component-a-react-wrapper-preview-and-more","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-toolkit-adds-presence-templating-for-the-login-component-a-react-wrapper-preview-and-more\/","title":{"rendered":"Microsoft Graph Toolkit adds Presence, Templating for the Login component, a React wrapper preview, and more!"},"content":{"rendered":"<p>Today we\u2019re excited to share another update to the Microsoft Graph Toolkit! In case you\u2019re unfamiliar with it, the Microsoft Graph Toolkit is a collection of reusable, framework-agnostic web components powered by Microsoft Graph. Check out our <a href=\"https:\/\/aka.ms\/mgt-docs\">documentation<\/a> or our <a href=\"https:\/\/aka.ms\/mgtLap\">blog series<\/a> if you\u2019re just getting started.<\/p>\n<p>This update includes new features and improvements including the addition of presence to the <strong>Person<\/strong>\u00a0 and <strong>Person Card<\/strong> components, templating support for the <strong>Login<\/strong> component, a preview of <code>mgt-react<\/code> and more.<\/p>\n<p><strong>Presence on the Person component<\/strong><\/p>\n<p>With the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/components\/person\"><strong>Person<\/strong> component<\/a>, you now have the ability to easily display information about a user\u2019s Microsoft Teams presence in addition to their display name, email, and profile photo. Using the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/api\/resources\/presence?view=graph-rest-beta\">Prese<\/a><a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/api\/resources\/presence?view=graph-rest-beta\">nce API<\/a>, the component displays an icon indicating the user\u2019s current availability and activity. All you need to do is add the show-presence attribute to any <strong>Person<\/strong> component! You can see an example below or go to our <a href=\"https:\/\/mgt.dev\/?path=\/story\/components-mgt-person--person-presence-display-all\">component playground<\/a> to try it out.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-4761 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/mgt-presence-card.png\" alt=\"person component with presence badge\" width=\"570\" height=\"338\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/mgt-presence-card.png 940w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/mgt-presence-card-300x178.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/06\/mgt-presence-card-768x456.png 768w\" sizes=\"(max-width: 570px) 100vw, 570px\" \/><\/p>\n<p style=\"text-align: center\"><code>&lt;mgt-person person-query=\"me\" person-card=\"hover\" show-presence&gt;&lt;\/mgt-person&gt;<\/code><\/p>\n<p><strong>Templati<\/strong><strong>ng support for Login co<\/strong><strong>mponent<\/strong><\/p>\n<p>We\u2019ve added templating support to the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/components\/login\"><strong>Login<\/strong> component<\/a> so that you can easily customize the content of the component to suit your application\u2019s needs. The following templates have been added to <code>mgt-login<\/code>:<\/p>\n<ul>\n<li>Signed-in button content<\/li>\n<li>Signed-out button content<\/li>\n<li>Flyout-commands<\/li>\n<li>Flyout-person-details<\/li>\n<\/ul>\n<p>You can learn more abut <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/templates\">templating<\/a> and <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/components\/login\">mgt-login<\/a>\u00a0in our documentation.<\/p>\n<p><strong>Preview of React wrapper for all Microsoft Graph Toolkit components<\/strong><\/p>\n<p>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\u2019re excited to announce a preview of <code>mgt-react<\/code>, 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.<\/p>\n<p>Check out our <a href=\"https:\/\/github.com\/microsoftgraph\/microsoft-graph-toolkit\/tree\/master\/samples\/react-app\">React sample<\/a> or try out <a href=\"https:\/\/github.com\/microsoftgraph\/microsoft-graph-toolkit\/tree\/nmetulev\/mgt-react\/packages\/mgt-react\">mgt-react<\/a>\u00a0in your application and provide your feedback on GitHub!<\/p>\n<p><strong>Other improvements <\/strong><\/p>\n<p>This update includes additional bug fixes and improvements that aren\u2019t 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 <a href=\"https:\/\/github.com\/microsoftgraph\/microsoft-graph-toolkit\/releases\">release notes<\/a>.<\/p>\n<p><strong>Get started<\/strong><\/p>\n<p>To learn more about these new features and Microsoft Graph Toolkit, you can read our <a href=\"https:\/\/aka.ms\/mgt-docs\">documentation<\/a>, try out our <a href=\"https:\/\/mgt.dev\">component playground<\/a>, or check out our <a href=\"https:\/\/aka.ms\/mgt\">GitHub<\/a>. We also have a <a href=\"https:\/\/aka.ms\/mgtLap\">blog series<\/a> 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!<\/p>\n<p>-The Microsoft Graph Toolkit team<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we\u2019re excited to share another update to the Microsoft Graph Toolkit! This update includes new features and improvements including the addition of presence to the Person\u00a0 and Person Card components, templating support for the Login component, a preview of mgt-react and more.<\/p>\n","protected":false},"author":69095,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[34],"class_list":["post-4759","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"<p>Today we\u2019re excited to share another update to the Microsoft Graph Toolkit! This update includes new features and improvements including the addition of presence to the Person\u00a0 and Person Card components, templating support for the Login component, a preview of mgt-react and more.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4759","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69095"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4759"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4759\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=4759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}