{"id":18480,"date":"2024-02-08T08:00:15","date_gmt":"2024-02-08T16:00:15","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=18480"},"modified":"2024-11-06T12:21:35","modified_gmt":"2024-11-06T20:21:35","slug":"microsoft-graph-toolkit-v4-0-is-now-generally-available","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-toolkit-v4-0-is-now-generally-available\/","title":{"rendered":"Microsoft Graph Toolkit v4.0 is now generally available"},"content":{"rendered":"<p>After a very successful <a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-toolkit-v3-0-is-now-generally-available\/\">version 3.0<\/a> in June 2023, we are excited to announce the <strong>general availability of the Microsoft Graph Toolkit v4.0<\/strong>.<\/p>\n<p>This release is packed with new capabilities, improvements to the developer experience and bug fixes that will be appreciated by end-users. Starting with v4.0 of Microsoft Graph Toolkit, users will be able to edit To Do items directly using the components, see colleagues\u2019 presence and cards when selecting them via our people picker. We also promoted our search components to their general availability and are now fully supported. For developers, this release greatly improves the developer experience. Our investments were mainly in 2 areas: performance and convenience.<\/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 excited 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>What\u2019s new in v4.0?<\/h2>\n<h3>New scenarios: update your To Do items directly within the Toolkit<\/h3>\n<p>Some feedback we were getting with the Toolkit was that it was providing great productivity enhancements in LOB and ISV apps, but that some of our components were missing key scenarios. To overcome the most requested missing scenario, we added the ability to edit To Do items directly in the component. This enables users to take quick action on their tasks and ensure they are up to date.<\/p>\n<p><img decoding=\"async\" width=\"785\" height=\"214\" class=\"wp-image-18482\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/02\/a-screenshot-of-a-website-description-automatical.gif\" alt=\"A screenshot of a website Description automatically generated\" \/><\/p>\n<h3>More context provided with our people picker<\/h3>\n<p>Selecting people is critical in productivity scenarios. Whether it is to assign a task to someone or to start a conversation with a group of people, we believe picking people in a rich way is important for end users. To provide more context to this component, we have added the presence of users as part of the control and the ability to see the person\u2019s card of every selected individual.<\/p>\n<p><img decoding=\"async\" width=\"780\" height=\"395\" class=\"wp-image-18483\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/02\/word-image-18480-2.gif\" \/><\/p>\n<h3>Build a search-driven application<\/h3>\n<p>After 6 months of preview, we believe our search components have enough power to provide rich search-driven applications. We have promoted them to GA components to help developers build rich search centers and users to easily find what they are looking for.<\/p>\n<p><img decoding=\"async\" width=\"728\" height=\"794\" class=\"wp-image-18484\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/02\/word-image-18480-3.png\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/02\/word-image-18480-3.png 728w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2024\/02\/word-image-18480-3-275x300.png 275w\" sizes=\"(max-width: 728px) 100vw, 728px\" \/><\/p>\n<h2>Developer experience<\/h2>\n<h3>Improved performance<\/h3>\n<p>In this version of Microsoft Graph Toolkit, we wanted to focus on performance and drive down the size of the resulting bundles that include our components.<\/p>\n<p>First, we updated our underlying framework (Lit) to take advantage of asynchronous rendering. This allows our components to be a lot more aware of their state and re-render less often, leaving more memory and cycles for the rest of the page.<\/p>\n<p>Second, we drastically improved the size of the consumers\u2019 bundles by moving to an explicit registration of the components that are used. With this approach, only the used components are bundled, leaving behind everything that is not necessary. While this has an impact on the developer experience, we believe it will provide a much better user experience.<\/p>\n<h3>Provide more productivity for developers<\/h3>\n<p>As part of this release, we enhanced numerous aspects of the developer experience to make them more productive and focus on the problems they are trying to solve.<\/p>\n<ul>\n<li>We converted all our attributes to leverage string unions instead of Enums. This allows for simpler code and better documentation, especially when using the Toolkit with React<\/li>\n<li>We removed the need for our specific SPFx package. This simplifies the experience for all SharePoint developers and is more performant.<\/li>\n<li>We removed the mgt-loader to simplify the onboarding experience and to offer a single way to consume the Toolkit thanks to all major browsers supporting ESM modules.<\/li>\n<li>For developers using our playground, we enabled a log-in experience where it is now possible to test and experience the toolkit with your own data.<\/li>\n<\/ul>\n<h3>Bug fixes and improvements<\/h3>\n<p>This update also includes bug fixes and improvements that aren\u2019t specifically highlighted in this post. To see the full list, check out our <a href=\"https:\/\/github.com\/microsoftgraph\/microsoft-graph-toolkit\/releases\/tag\/v4.0.0\">release notes<\/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><code>npm i @microsoft\/mgt<\/code><\/p>\n<p>This update includes\u00a0breaking changes that may impact your application. Please go to our\u00a0<a href=\"https:\/\/learn.microsoft.com\/graph\/toolkit\/upgrade\">upgrade guide<\/a>\u00a0to see a detailed list of the changes.<\/p>\n<h2>Try it now!<\/h2>\n<p>We can\u2019t wait for you to try Microsoft Graph Toolkit v4.0. We\u2019re looking forward to <a href=\"https:\/\/aka.ms\/mgt\/issues\">hearing from you<\/a> about these improvements and how we can continue to make the Microsoft Graph Toolkit even better.<\/p>\n<p>Visit the\u00a0<a href=\"https:\/\/developer.microsoft.com\/en-us\/graph\" target=\"_blank\" rel=\"noopener\">Microsoft Graph Dev Center<\/a> for more resources.<\/p>\n<p><em>Follow us on\u00a0<a href=\"http:\/\/twitter.com\/microsoft365dev\" target=\"_blank\" rel=\"noopener\">X (Twitter) \/ @Microsoft365Dev<\/a>\u00a0and subscribe to our\u00a0<a href=\"https:\/\/www.youtube.com\/microsoft365developer\" target=\"_blank\" rel=\"noopener\">YouTube channel<\/a>\u00a0to stay up to date on the latest developer news and announcements.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This release is packed with new capabilities, improvements to the developer experience, and bug fixes that will be appreciated by end-users.<\/p>\n","protected":false},"author":69087,"featured_media":18576,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[34],"class_list":["post-18480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"<p>This release is packed with new capabilities, improvements to the developer experience, and bug fixes that will be appreciated by end-users.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/18480","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=18480"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/18480\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/18576"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=18480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=18480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=18480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}