{"id":4513,"date":"2020-04-29T10:19:30","date_gmt":"2020-04-29T17:19:30","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4513"},"modified":"2020-04-29T10:19:30","modified_gmt":"2020-04-29T17:19:30","slug":"a-lap-around-microsoft-graph-toolkit-day-6-the-power-of-mgt-get","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/a-lap-around-microsoft-graph-toolkit-day-6-the-power-of-mgt-get\/","title":{"rendered":"A Lap around Microsoft Graph Toolkit Day 6 &#8211; The Power of mgt-get"},"content":{"rendered":"<p><strong>Author:<\/strong> Cameron Dwyer, Microsoft Office Development MVP<\/p>\n<p>On\u00a0<span data-contrast=\"auto\">D<\/span><span data-contrast=\"auto\">ay 6\u00a0<\/span><span data-contrast=\"auto\">of\u00a0<\/span><span data-ccp-charstyle=\"normaltextrun\" data-wac-het=\"1\">the <a href=\"https:\/\/aka.ms\/mgtlap\">Microsoft Graph Toolkit blog series<\/a><\/span><span data-contrast=\"none\">\u00a0we\u00a0<\/span><span data-contrast=\"auto\">are\u00a0taking\u00a0a look\u00a0at\u00a0mgt-get, one of the\u00a0most interesting and flexible\u00a0components\u00a0in the Microsoft Graph Toolkit. Unlike other controls, the\u00a0mgt-get\u00a0component\u00a0is not bound to specific data in\u00a0Microsoft\u00a0Graph, nor does it provide any UI visualization of the data. Rather it&#8217;s designed so that you as the developer specify the Graph API call to fetch the data and the template to render the results.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">This means\u00a0you can use\u00a0the\u00a0mgt-get\u00a0component\u00a0to present a data set from the\u00a0Microsoft\u00a0Graph API where no specific component exists in the toolkit for that dataset yet. This is incredibly powerful as the\u00a0mgt-get\u00a0component takes care of authentication, permissions, fetching data, handling loading and error states, and binding results to the provided template for display.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">Currently\u00a0there\u00a0are\u00a0no components\u00a0in the toolkit for displaying\u00a0items from a SharePoint list, so let\u2019s\u00a0use that\u00a0example to\u00a0illustrate how\u00a0mgt-get\u00a0works<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4514\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-1-3.png\" alt=\"code block of mgt-get with nested sample template \" width=\"800\" height=\"205\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-1-3.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-1-3-300x77.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-1-3-768x197.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<ul>\n<li><strong>Resource<\/strong><span data-contrast=\"auto\">\u2013 Graph API\u00a0call including query parameters such as $select,\u00a0$expand, $filter<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/li>\n<li><span data-contrast=\"auto\"> <strong>Scopes<\/strong><\/span><span data-contrast=\"auto\">\u2013 Permissions that user must have to\u00a0make the Graph API call (prompt will be shown if\u00a0required)<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/li>\n<li><span data-contrast=\"auto\"> <strong>Template<\/strong><\/span><span data-contrast=\"auto\">&#8211;\u00a0The template for rendering the results\u00a0iterates\u00a0each value in the result set\u00a0and exposes the\u00a0current\u00a0iteration value as an object\u00a0which you can directly reference properties to display. In the example above,\u00a0each value is a SharePoint item\u00a0and we display the value of the Title field.<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/li>\n<\/ul>\n<p><span data-contrast=\"auto\">Let\u2019s\u00a0apply\u00a0the\u00a0mgt-get\u00a0component to a real-world scenario\u00a0to explore it further. Consider\u00a0workers in a warehouse responsible for\u00a0packing\u00a0orders from an online shopping\u00a0vendor\u00a0where the orders are stored in a SharePoint list. The workers\u00a0need\u00a0to\u00a0access\u00a0orders in a timely fashion\u00a0and\u00a0on a\u00a0mobile\u00a0device.\u00a0With just a few lines of code we can use the\u00a0mgt-get\u00a0component to create a lightweight HTML page\u00a0that\u00a0will provide the order information direct from\u00a0the\u00a0source\u00a0in a secure\u00a0way.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4515\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-2-2.png\" alt=\"code block of example described in above paragraph \" width=\"800\" height=\"345\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-2-2.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-2-2-300x129.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-2-2-768x331.png 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/p>\n<p>In this sample the\u00a0<span data-contrast=\"auto\">resource<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">is specified to<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">quer<\/span><span data-contrast=\"auto\">y<\/span><span data-contrast=\"auto\">\u00a0the Graph API<\/span><span data-contrast=\"auto\">\u00a0to<\/span><span data-contrast=\"auto\">:<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<ul>\n<li><span data-contrast=\"auto\"> Return items within\u00a0the\u00a0specified\u00a0SharePoint\u00a0list<\/span><\/li>\n<li><span data-contrast=\"auto\"> Uses\u00a0$expandto include the SharePoint item field values\u00a0in the response<\/span><span data-ccp-props=\"{&quot;134233279&quot;:true,&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/li>\n<li><span data-contrast=\"auto\"> Uses\u00a0$filterto only include\u00a0items with a Status of \u2018Ready for Packing\u2019<\/span><\/li>\n<\/ul>\n<p>Notice\u00a0the use of the max-pages and polling-rate in the\u00a0mgt-get\u00a0component.\u00a0max-pages\u00a0limits the total number of items to be returned,\u00a0and the\u00a0polling-rate\u00a0automatically\u00a0calls the\u00a0resource\u00a0at\u00a0the specified interval and updates the\u00a0UX\u00a0accordingly.\u00a0This\u00a0allows the warehouse packing list to stay updated directly from the source every 30 seconds.\u00a0For resources that support delta queries, the\u00a0mgt-get\u00a0component will automatically take care of querying for changes since the last polling call.<span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<p><span data-contrast=\"auto\">With a little bit of CSS magic\u00a0the result of this small\u00a0amount of sample code is a secure\u00a0packing\u00a0app\u00a0with dynamic data being\u00a0read from source in near real-time.\u00a0(Check out this sample in Try-It-Out repo\u00a0<\/span><a href=\"https:\/\/github.com\/microsoftgraph\/mgtLap-TryItOut\/blob\/master\/06%20-%20Power%20of%20mgt-get\/index.html\"><span data-ccp-charstyle=\"Hyperlink\" data-wac-het=\"1\">here<\/span><\/a><span data-contrast=\"auto\">.)<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignleft wp-image-4516\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-3-1.png\" alt=\"UI of the packing app built from mgt-get \" width=\"650\" height=\"524\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-3-1.png 1024w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-3-1-300x242.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/04\/Image-3-1-768x619.png 768w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<p>As you can see mgt-get is really powerful for accessing any data set\u00a0<span data-contrast=\"auto\">within\u00a0<\/span><span data-contrast=\"auto\">the Microsoft Graph and allows you to concentrate on\u00a0<\/span><span data-contrast=\"auto\">querying the Graph<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">and d<\/span><span data-contrast=\"auto\">isplay<\/span><span data-contrast=\"auto\">ing<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">the result<\/span><span data-contrast=\"auto\">s<\/span><span data-contrast=\"auto\">,\u00a0<\/span><span data-contrast=\"auto\">while the component takes care of all the plumbing for you.<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">Y<\/span><span data-contrast=\"auto\">our head\u00a0<\/span><span data-contrast=\"auto\">may be\u00a0<\/span><span data-contrast=\"auto\">spinning with ideas for what you can do with mgt-get\u00a0<\/span><span data-contrast=\"auto\">but\u00a0<\/span><span data-contrast=\"auto\">don\u2019t forget to tune in to Day 7 in this <a href=\"http:\/\/aka.ms\/mgtlap\">series<\/a><\/span><span data-contrast=\"auto\">\u00a0when we take a<\/span><span data-contrast=\"auto\">\u00a0deeper look at authentication<\/span><span data-contrast=\"auto\">\u00a0<\/span><span data-contrast=\"auto\">with\u00a0<\/span><span data-contrast=\"auto\">Providers<\/span><span data-contrast=\"auto\">.<\/span><span data-ccp-props=\"{&quot;201341983&quot;:0,&quot;335559739&quot;:160,&quot;335559740&quot;:259}\" data-wac-het=\"1\">\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>On Day 6 of the Microsoft Graph Toolkit blog series we are taking a look at mgt-get, one of the most interesting and flexible components in the Microsoft Graph Toolkit. We will also construct a packing app using mgt-get<\/p>\n","protected":false},"author":69077,"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-4513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit"],"acf":[],"blog_post_summary":"<p>On Day 6 of the Microsoft Graph Toolkit blog series we are taking a look at mgt-get, one of the most interesting and flexible components in the Microsoft Graph Toolkit. We will also construct a packing app using mgt-get<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4513","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\/69077"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4513"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4513\/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=4513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}