{"id":13125,"date":"2023-03-09T09:07:16","date_gmt":"2023-03-09T17:07:16","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=13125"},"modified":"2023-03-22T09:13:11","modified_gmt":"2023-03-22T16:13:11","slug":"microsoft-graph-toolkit-v3-0-preview-1","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-toolkit-v3-0-preview-1\/","title":{"rendered":"Announcing Microsoft Graph Toolkit v3.0 preview-1"},"content":{"rendered":"<p>Today, we\u2019re excited to announce the first release of a series of previews for the Microsoft Graph Toolkit towards our v3.0 release. \u00a0With this preview release, you will now be able to leverage new scenarios like selecting an item from a collection of entities, toggle between light and dark mode, switch between multiple logged in account and send chat messages in the context of your apps! Your apps will now look more familiar with other Microsoft 365 apps and will look great when used in all our different canvas (Teams, Outlook, Office.com, SharePoint, etc.).<\/p>\n<p>We <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/the-microsoft-graph-toolkit-is-now-generally-available\/\">introduced<\/a> Microsoft Graph Toolkit in September 2019, and since then, we\u2019ve seen incredible adoption and an amazing response from the developer community and our partners. Our team has been hard at work taking the feedback and requests we\u2019ve received and turning them into the exciting new features we\u2019re starting to share with you today.<\/p>\n<p>If you are new to the <a href=\"https:\/\/aka.ms\/mgt\">Microsoft Graph Toolkit<\/a>, it is a collection of reusable, framework-agnostic components and authentication providers for accessing and working with Microsoft Graph. The components are fully functional, customizable, and work with any web framework and on all modern browsers. You can learn more by reading our <a href=\"https:\/\/aka.ms\/mgt\/docs\">documentation<\/a> or by trying one of our <a href=\"https:\/\/aka.ms\/mgt\/get-started\">getting started guides<\/a>.<\/p>\n<h2>Updating your applications<\/h2>\n<p>To update your application to use the newest version of Microsoft Graph Toolkit, navigate to your project directory and run:<\/p>\n<p>https:\/\/gist.github.com\/sebastienlevert\/402c3c6b5a4262d9969c3cce08e48514<\/p>\n<p>If you\u2019re using the toolkit via mgt-loader, update your script tag to:<\/p>\n<p>https:\/\/gist.github.com\/sebastienlevert\/e4c0554104c56ab2feb82e7e60d5a219<\/p>\n<p>This update includes\u00a0breaking changes that may impact your application, such as deprecation of properties, use of the embedded Microsoft Graph client and naming updates to CSS custom properties. Please go to our\u00a0<a href=\"https:\/\/aka.ms\/mgt\/v3.0-preview.1\">release notes<\/a>\u00a0to see a detailed list of the changes.<\/p>\n<h2>What\u2019s new in 3.0?<\/h2>\n<h3>Infrastructure updates<\/h3>\n<p>We updated the <a href=\"https:\/\/aka.ms\/graph\/sdk\/js\">Microsoft Graph JavaSscript SDK<\/a> to the version 3 to benefit from all the latest capabilities including support for large files uploads and better error handling. While making this change, we also enabled leveraging the Toolkit in sovereign clouds.<\/p>\n<h3>Major styling updates<\/h3>\n<p>To leverage the main design language from Microsoft called Fluent UI, we are now fully embracing its implementation in <a href=\"https:\/\/learn.microsoft.com\/en-us\/fluent-ui\/web-components\/\">web components<\/a>. Your applications will feel a lot more connected when embedded in one of the different M365 canvas! We are updating all our components to leverage these theming capabilities.<\/p>\n<h3>Improved SharePoint Framework development experience<\/h3>\n<p>In the past, if you wanted to build <a href=\"https:\/\/learn.microsoft.com\/en-us\/sharepoint\/dev\/spfx\/sharepoint-framework-overview\">SharePoint Framework (SPFx)<\/a> apps, you had to deploy a common library component providing a single instance of the Toolkit for all web parts in the tenant. This was cumbersome, easily missed and was not providing a great experience for applications acquired through the store. Thanks to our disambiguation features, we now allow developers to define prefixes to their components to avoid any naming collisions in shared environments like SharePoint pages. Disambiguation is intended to provide developers with a mechanism to use a specific version of the Toolkit in their solution without encountering collisions with other solutions that may be using the Toolkit.<\/p>\n<h3>New scenarios<\/h3>\n<h4>Select an item from a collection of entities<\/h4>\n<p>As part of v3.0, we are adding a new mgt-picker component, allowing generic selection of Microsoft Graph entities from collections. It\u2019s intended to be used to select an item from a list of items, for example a task list from the user\u2019s task lists, a user from its direct reports, a list from a site, etc.<\/p>\n<h3><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-150647.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-13129\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-150647.gif\" alt=\"Image Screenshot 20230307 150647\" width=\"323\" height=\"219\" \/><\/a><\/h3>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-150601.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-13128\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-150601.gif\" alt=\"Image Screenshot 20230307 150601\" width=\"327\" height=\"253\" \/><\/a><\/p>\n<h3>Easily switch between light and dark mode<\/h3>\n<p>To simplify switching from one theme to the next, we are introducing a mgt-theme-toggle component. This component can be used to change the theme experience from light to dark mode (and vice versa). You can also use our internal utilities to invoke the same using your custom code.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-145644.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-13127\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-145644.gif\" alt=\"Image Screenshot 20230307 145644\" width=\"737\" height=\"661\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Improved scenarios<\/h3>\n<h4>Seamlessly switch between accounts<\/h4>\n<p>We&#8217;ve heard from many of our partners and customers that offering a mechanism to allow multiple users connected at the same with the opportunity to switch from on to the other was key to a great experience. We\u2019re now bringing multi-account support to our mgt-login component in this version!<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-144044.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-13126\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-144044.png\" alt=\"Image Screenshot 20230307 144044\" width=\"415\" height=\"532\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-144044.png 415w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-144044-234x300.png 234w\" sizes=\"(max-width: 415px) 100vw, 415px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h4>Send messages while staying in-context<\/h4>\n<p>We had a basic messaging feature in our mgt-person-card and wanted to bring a fully featured message box that allows users to send quick messages to others while staying in the flow of their work. We are introducing this new quick chat message in this preview version.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-151510.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-13130\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/03\/Screenshot-20230307-151510.gif\" alt=\"Image Screenshot 20230307 151510\" width=\"505\" height=\"704\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3>Bug Fixes and Improvements<\/h3>\n<p>This update also includes a plethora of bug fixes and improvements that aren\u2019t specifically highlighted in this post. To see the full list, check out our <a href=\"https:\/\/aka.ms\/mgt\/v3.0-Preview.1\">release notes<\/a>.<\/p>\n<h2>Known Issues<\/h2>\n<p>In this version, we have list of known issues that we think you should be aware of. You can <a href=\"https:\/\/github.com\/microsoftgraph\/microsoft-graph-toolkit\/issues\/2118\">see them directly in our repo<\/a> and it will get updated while we find other issues based on customer feedback<\/p>\n<h2>Try it now<\/h2>\n<p>We\u2019re excited about this new version and can\u2019t wait for you to try it out. We\u2019re looking forward to hearing from <a href=\"https:\/\/aka.ms\/mgt\/v3.0-Preview.1\">you<\/a> about these improvements and how we can continue to make the Microsoft Graph Toolkit even better.<\/p>\n<p>Visit the <a href=\"https:\/\/developer.microsoft.com\/en-us\/graph\">Microsoft Graph Dev Center | APIs and app development<\/a> for more resources. Follow us <a href=\"https:\/\/twitter.com\/Microsoft365Dev\">@Microsoft365Dev)\/Twitter<\/a> to stay up to date on news and announcements.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today, we\u2019re excited to announce the first release of a series of previews for the Microsoft Graph Toolkit towards our v3.0 release.<\/p>\n","protected":false},"author":69087,"featured_media":13136,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[34],"class_list":["post-13125","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 announce the first release of a series of previews for the Microsoft Graph Toolkit towards our v3.0 release.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13125","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\/69087"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=13125"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/13125\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/13136"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=13125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=13125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=13125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}