{"id":14357,"date":"2023-06-27T07:26:55","date_gmt":"2023-06-27T14:26:55","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=14357"},"modified":"2023-06-27T16:22:24","modified_gmt":"2023-06-27T23:22:24","slug":"microsoft-graph-toolkit-v3-0-is-now-generally-available","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-toolkit-v3-0-is-now-generally-available\/","title":{"rendered":"Microsoft Graph Toolkit v3.0 is now generally available"},"content":{"rendered":"

After four months of preview and release candidates where our community provided feedback, insights and contributed to our project, we are announcing the general availability of the Microsoft Graph Toolkit v3.0<\/strong>.<\/p>\n

This release is packed with new capabilities, improvements and so much more. With this version of Microsoft Graph Toolkit, you will now be able to build apps for new scenarios like selecting an item from a collection of entities, toggle between light and dark mode, switch between multiple logged in account, send chat messages in the context of your apps, select taxonomy items, provide a fully functional search experience, and leverage our entirely new theming experience. Your apps will now look more familiar with other Microsoft 365 apps and will look even better when used in our different canvases (Teams, Outlook, Office.com, SharePoint, etc.).<\/p>\n

We 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 excited to share with you today.<\/p>\n

If you are new to the 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 documentation<\/a> or by trying one of our getting started guides<\/a>.<\/p>\n

\ud83d\udce3 What\u2019s new in v3.0<\/h2>\n

https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2023\/06\/MGT-v3.0-Feature-Video.mp4<\/a><\/video><\/div><\/p>\n

Infrastructure updates<\/h3>\n

We updated the Microsoft Graph JavaScript 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

Major styling updates<\/h3>\n

We enhanced the styling of all our components to meet our accessibility standards and to fully embrace Fluent 2<\/a> and its implementation in web components<\/a>. Your applications will feel a lot more connected to the rest of Microsoft 365 by having the familiar look and feel, simplifying the adoption and usage of your apps for your users! We also updated our dark and light themes to feel closer to Microsoft 365 experiences.<\/p>\n

<\/p>\n

Improved the SharePoint Framework development experience<\/h3>\n

In the past, if you wanted to build 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 did not provide 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<\/a> 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

New scenarios<\/h2>\n

Select an item from a collection of entities<\/h3>\n

As part of v3.0, we are adding a new mgt-picker<\/a> 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

\"Graphical<\/h3>\n

\"Graphical<\/h3>\n

Easily switch between light and dark mode<\/h3>\n

To simplify switching from one theme to the next, we are introducing a mgt-theme-toggle<\/a> 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<\/a> to invoke the same using your custom code.<\/p>\n

\"Graphical<\/p>\n

Select a term from Microsoft Graph taxonomy<\/h3>\n

We are adding a new mgt-taxonomy-picker<\/a> component, allowing selection of Microsoft Graph taxonomy entities. Built on top of our mgt-picker component, it\u2019s intended to be used to select a term from a term set. We want to share our gratitude to the contributor of this new component, Anoop Tatti<\/a>, for this highly requested component!<\/p>\n

<\/p>\n

Build a search-driven application<\/h3>\n

As requested by our community, we wanted to provide a new capability that allows developers to build solutions leveraging the Microsoft Graph search APIs. Up until now, it was not possible to use any of our components, including the mgt-get<\/a> component to achieve this scenario. Starting with this release, we are excited to add 2 new components helping you to build search scenarios: mgt-search-box<\/a> and mgt-search-results<\/a>! These components, when used together, can offer a perfect foundation for a search-driven application.<\/p>\n

<\/p>\n

Improved scenarios<\/h2>\n

Seamlessly switch between accounts<\/h3>\n

We heard from a lot of our partners and customers that offering a mechanism to allow multiple users connected to be able to switch to a different user account was key to a great experience. We\u2019re bringing multi-account support to our mgt-login<\/a> component in this version!<\/p>\n

\"Graphical<\/p>\n

Send messages while staying in-context<\/h3>\n

We had a basic messaging feature in our mgt-person-card<\/a> 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

\"A<\/p>\n

Bug fixes and improvements<\/h3>\n

This update also includes bug fixes and improvements that aren\u2019t specifically highlighted in this post. To see the full list, check out our release notes<\/a>.<\/p>\n

\ud83e\uddd1\u200d\ud83d\udcbb Updating your applications<\/h2>\n

To update your application to use the newest version of Microsoft Graph Toolkit, navigate to your project directory and run:<\/p>\n

npm i @microsoft\/mgt<\/p>\n

If you\u2019re using the Toolkit via mgt-loader, update your script tag to:<\/p>\n

<script src=\"https:\/\/unpkg.com\/@microsoft\/mgt@3\/dist\/bundle\/mgt-loader.js\"><\/script><\/code><\/p>\n

This update includes breaking 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 refer to our upgrade guide<\/a> to see a detailed list of the changes.<\/p>\n

\ud83d\udcaa Try it now<\/h2>\n

We can\u2019t wait for you to try Microsoft Graph Toolkit v3.0. We look forward to hearing from you<\/a> about these improvements and how we can continue to make the Microsoft Graph Toolkit even better.<\/p>\n

Visit the\u00a0Microsoft Graph Dev Center<\/a>\u00a0for more resources. Follow us\u00a0on Twitter @Microsoft365Dev<\/a> to stay up to date on news and announcements.<\/p>\n","protected":false},"excerpt":{"rendered":"

Microsoft Graph Toolkit v3.0 is now generally available, packed with new features, capabilities and so much more.<\/p>\n","protected":false},"author":69087,"featured_media":14440,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,9],"tags":[34],"class_list":["post-14357","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-sharepoint-framework","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"

Microsoft Graph Toolkit v3.0 is now generally available, packed with new features, capabilities and so much more.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/14357","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=14357"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/14357\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/14440"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=14357"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=14357"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=14357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}