{"id":4377,"date":"2020-04-13T12:10:59","date_gmt":"2020-04-13T19:10:59","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4377"},"modified":"2020-04-13T12:10:59","modified_gmt":"2020-04-13T19:10:59","slug":"a-lap-around-microsoft-graph-toolkit-in-day-1-an-overview-of-microsoft-graph-toolkit","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/a-lap-around-microsoft-graph-toolkit-in-day-1-an-overview-of-microsoft-graph-toolkit\/","title":{"rendered":"A Lap around Microsoft Graph Toolkit Day 1 – An Overview of Microsoft Graph Toolkit"},"content":{"rendered":"

Welcome to day 1 of A Lap around Microsoft Graph Toolkit<\/a>!<\/p>\n

Microsoft Graph Toolkit <\/span>is a collection of <\/span>reusable<\/span>\u00a0and\u00a0<\/span>framework-agnostic web components and helpers for accessing and working with\u00a0<\/span>Microsoft Graph. Wow, that is a long sentence.\u00a0<\/span>Let\u2019s<\/span>\u00a0break it down.<\/span>\u00a0<\/span><\/p>\n

Customer needs\u00a0<\/span>are<\/span>\u00a0our\u00a0<\/span>top\u00a0<\/span>priority<\/span> when it comes to creating Microsoft Graph Toolkit.\u00a0<\/span>We talked\u00a0<\/span>with<\/span>\u00a0our developer community, took the\u00a0<\/span>most commonl<\/span>y built<\/span>\u00a0experiences<\/span>\u00a0powered by Microsoft Graph APIs, and developed this collection of\u00a0<\/span>w<\/span>eb\u00a0<\/span>c<\/span>omponents<\/span>.\u00a0<\/span>Using these web components<\/span>\u00a0is as simple as adding two lines of code to your HTML to enable a login button on the page.\u00a0<\/span>No fuss.<\/span>\u00a0<\/span><\/p>\n

\"Preview<\/p>\n

But \u201c<\/span>W<\/span>hy<\/span>\u00a0<\/span>W<\/span>eb\u00a0<\/span>C<\/span>omponents<\/span>?<\/span>\u201d<\/span>,<\/span>\u00a0y<\/span>ou<\/span>\u00a0may ask. One major advantage is that\u00a0<\/span>they are<\/span>\u00a0a defined standard included in the<\/span>\u00a0official<\/span>\u00a0<\/span>W3C HTML spec<\/span><\/a>. This means\u00a0<\/span>they\u00a0<\/span>have native support,\u00a0<\/span>and\u00a0<\/span>hence<\/span>\u00a0<\/span>are<\/span>\u00a0compatible with<\/span>\u00a0<\/span>all\u00a0<\/span>the b<\/span>ig web<\/span>\u00a0frameworks<\/span>\u00a0–<\/span>\u00a0<\/span>React, Angular, Vue\u2026 you name it!\u00a0<\/span>\u00a0<\/span><\/p>\n

We want\u00a0<\/span>to save\u00a0<\/span>developers\u00a0<\/span>as<\/span>\u00a0much time as possible.\u00a0<\/span>Microsoft Graph Toolkit<\/span>\u00a0includes various\u00a0<\/span>authentication\u00a0<\/span>providers\u00a0<\/span>out of the box. This means you\u00a0<\/span>can\u00a0<\/span>quickly\u00a0<\/span>add<\/span>\u00a0these toolkit controls in web applications, Microsoft Teams tabs, and SharePoint web parts.\u00a0<\/span>\u00a0<\/span><\/p>\n

One question our community asks quite often is<\/span>,<\/span>\u00a0\u201c<\/span>W<\/span>hat is the difference between Microsoft Graph Toolkit and Office UI Fabric<\/span>?<\/span>\u201d<\/span>\u00a0Just like\u00a0<\/span>Office UI Fabric,\u00a0<\/span>Microsoft Graph Toolkit<\/span>\u00a0components\u00a0<\/span>are<\/span>\u00a0<\/span>designed<\/span>\u00a0to<\/span>\u00a0<\/span>look and feel like Microsoft<\/span>\u00a0<\/span>365 experiences<\/span>\u00a0because we built\u00a0<\/span>them<\/span>\u00a0on top of\u00a0<\/span>UI F<\/span>abric<\/span>\u00a0core<\/span>.\u00a0<\/span>We also took them another step forward and\u00a0<\/span>connected\u00a0<\/span>them\u00a0<\/span>to<\/span>\u00a0Microsoft Graph APIs.\u00a0<\/span>You can easily render<\/span>\u00a0the d<\/span>ata in a UI without having to write your own code.\u00a0<\/span>This is because\u00a0<\/span>Microsoft Graph Toolkit<\/span>\u00a0<\/span>components\u00a0<\/span>enca<\/span>ps<\/span>ulate<\/span>\u00a0Mic<\/span>ro<\/span>soft Graph API logic<\/span>\u00a0<\/span>to\u00a0<\/span>pro<\/span>v<\/span>id<\/span>e<\/span>\u00a0<\/span>co<\/span>m<\/span>pl<\/span>ete experiences.<\/span>\u00a0<\/span>However, we\u00a0<\/span>designed\u00a0<\/span>the toolkit so that\u00a0<\/span>it\u2019<\/span>s<\/span>\u00a0e<\/span>a<\/span>s<\/span>il<\/span>y extensible and customizable with templating and CSS custom properties.<\/span>\u00a0<\/span><\/p>\n

To recap, Microsoft Graph Toolkit is great for developers of all experience levels looking to develop a web application, Microsoft Teams tab, or SharePoint webpart that connects to\u00a0<\/span>the<\/span>\u00a0Microsoft Graph. It helps cut development time and works everywhere! We will go into\u00a0<\/span>further\u00a0<\/span>details of these topics in future posts.\u00a0<\/span>There are also many helpful\u00a0<\/span>Try It Out<\/span><\/a>\u00a0<\/span>samples for you to play with if you keep following our blog series.<\/span>\u00a0<\/span><\/p>\n

Stay tuned with the series<\/a>! <\/span>Nex<\/span>t up:\u00a0<\/span>Z<\/span>ero to Hero<\/span> with Microsoft Graph Toolkit (April 16<\/span>th<\/span>, 2020)<\/span>\u00a0<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Microsoft Graph Toolkit in Day 1 – An overview of Microsoft Graph Toolkit. Why we designed it, who should use it, and what it is designed to do. <\/p>\n","protected":false},"author":69099,"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-4377","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"

Microsoft Graph Toolkit in Day 1 – An overview of Microsoft Graph Toolkit. Why we designed it, who should use it, and what it is designed to do. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4377","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\/69099"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4377"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4377\/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=4377"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4377"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}