{"id":4336,"date":"2020-04-06T09:51:15","date_gmt":"2020-04-06T16:51:15","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4336"},"modified":"2021-10-18T10:59:12","modified_gmt":"2021-10-18T17:59:12","slug":"announcing-microsoft-graph-toolkit-1-2-with-new-microsoft-teams-channel-picker-web-component","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-microsoft-graph-toolkit-1-2-with-new-microsoft-teams-channel-picker-web-component\/","title":{"rendered":"Announcing Microsoft Graph Toolkit 1.2 with new Microsoft Teams Channel Picker web component"},"content":{"rendered":"<p>We\u2019re excited to announce another update to the Microsoft Graph Toolkit! To recap, the <a href=\"http:\/\/aka.ms\/mgt-docs\">Microsoft Graph Toolkit<\/a> is a collection of reusable, framework-agnostic web components powered by Microsoft Graph. In this update, we\u2019re introducing our new Microsoft Graph Toolkit playground, a Teams Channel Picker component, new features for the mgt-get component, and improvements and fixes to existing components.<\/p>\n<p><strong>New component playground and samples<\/strong><\/p>\n<p>Check out our new <a href=\"https:\/\/mgt.dev\">Microsoft Graph Toolkit playground<\/a>! The playground is a great way for you to learn about everything the Microsoft Graph Toolkit offers. The playground provides samples that enable you to visually explore each component and its functionality. The built-in live code editor allows you to configure the component by changing its attributes or by adding your own JavaScript and\/or CSS.<\/p>\n<p>We\u2019ve also embedded these samples directly in our <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/overview\">documentation<\/a> so that you can seamlessly try out the components as you read.<\/p>\n<p><strong>Introducing the new Microsoft Teams Channel Picker component<\/strong><\/p>\n<p>The mgt-teams-channel-picker component allows the signed-in user to search through the teams in Microsoft Teams that they are a part of and select a channel.<\/p>\n<p>This component is great for use in scenarios where you are requesting data from or posting data to a specific Teams channel.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4339 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/team-channel-picker-qtest-3.gif\" alt=\"An example of the Teams channel picker component\" width=\"640\" height=\"454\" \/><\/p>\n<p>Try out the component on the <a href=\"https:\/\/mgt.dev\/?path=\/story\/components-mgt-teams-channel-picker--teams-channel-picker&amp;source=blog\">playground<\/a> and check out the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/components\/teams-channel-picker\">docs<\/a> to learn more!<\/p>\n<p><strong>New features and updates to existing components<\/strong><\/p>\n<p>In our last update, we introduced the <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/toolkit\/components\/get\">mgt-get<\/a> component, which enables you to make any GET request to Microsoft Graph directly in your HTML and render it with an HTML template. In this release, we\u2019ve made improvements to both the templating engine and the mgt-get component to make them even more powerful.<\/p>\n<p>First, we\u2019ve improved the templating experience for all components by allowing binding to expressions, event handlers, and properties directly inside your template. Now you can do even more inside the template.<\/p>\n<p>Second, the mgt-get component now supports polling, which allows it to reload and refresh data without the user having to refresh the page. Simply set the <strong>polling-rate<\/strong> attribute and the component will reload the data if it changes.<\/p>\n<p>Finally, the mgt-get component also supports paging APIs and it will follow the nextLink URL to fetch all entities. And if you\u2019re using delta queries with polling, the component will use the delta token to check for changes and will not reload all items.<\/p>\n<p>In the following example, we\u2019re using the polling-rate attribute to get the user\u2019s availability every 2000ms using the \/me\/presence endpoint.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4338 aligncenter\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/presence.gif\" alt=\"Example of mgt-get using the Presence API\" width=\"640\" height=\"464\" \/><\/p>\n<p>You can see more samples that use these new features on the <a href=\"https:\/\/mgt.dev\">playground<\/a>!<\/p>\n<p><strong>Other improvements<\/strong><\/p>\n<p>This update comes with improvements or bug fixes to almost all components. For example, the person component will now have a different background color for each user, but the color will stay the same per user. The agenda component can now load even more events and fully support the paging API. <a href=\"https:\/\/github.com\/microsoftgraph\/microsoft-graph-toolkit\/releases\">Check out the release notes<\/a> for the full list and more details.<\/p>\n<p><strong>Next steps<\/strong><\/p>\n<p>You can <a href=\"http:\/\/aka.ms\/mgt\">go to our GitHub<\/a> repository to check out these new features, leave us feedback, and request features that you want to see next in the Microsoft Graph Toolkit. Don\u2019t forget to check out the interactive <a href=\"https:\/\/mgt.dev\">playground<\/a> or <a href=\"https:\/\/aka.ms\/mgt-docs\">visit our docs<\/a>.<\/p>\n<p>If you\u2019re interested in learning more about the Microsoft Graph Toolkit, keep an eye out for our upcoming blog series starting <strong>April 13<sup>th<\/sup><\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We\u2019re excited to announce another update to the Microsoft Graph Toolkit! In this update, we\u2019re introducing our new Microsoft Graph Toolkit playground, a Teams Channel Picker component, new features for the mgt-get component, and improvements and fixes to existing components.<\/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-4336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"<p>We\u2019re excited to announce another update to the Microsoft Graph Toolkit! In this update, we\u2019re introducing our new Microsoft Graph Toolkit playground, a Teams Channel Picker component, new features for the mgt-get component, and improvements and fixes to existing components.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4336","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=4336"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4336\/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=4336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}