Microsoft 365 Microsoft Graph

A Lap around Microsoft Graph Toolkit Day 6 – The Power of mgt-get

Author: Cameron Dwyer, Microsoft Office Development MVP

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. Unlike other controls, the mgt-get component is not bound to specific data in Microsoft Graph, nor does it provide any UI visualization of the data. Rather it’s designed so that you as the developer specify the Graph API call to fetch the data and the template to render the results. 

This means you can use the mgt-get component to present a data set from the Microsoft Graph API where no specific component exists in the toolkit for that dataset yet. This is incredibly powerful as the mgt-get component takes care of authentication, permissions, fetching data, handling loading and error states, and binding results to the provided template for display. 

Currently there are no components in the toolkit for displaying items from a SharePoint list, so let’s use that example to illustrate how mgt-get works 

code block of mgt-get with nested sample template

  • Resource– Graph API call including query parameters such as $select, $expand, $filter 
  • Scopes– Permissions that user must have to make the Graph API call (prompt will be shown if required) 
  • Template– The template for rendering the results iterates each value in the result set and exposes the current iteration value as an object which you can directly reference properties to display. In the example above, each value is a SharePoint item and we display the value of the Title field. 

Let’s apply the mgt-get component to a real-world scenario to explore it further. Consider workers in a warehouse responsible for packing orders from an online shopping vendor where the orders are stored in a SharePoint list. The workers need to access orders in a timely fashion and on a mobile device. With just a few lines of code we can use the mgt-get component to create a lightweight HTML page that will provide the order information direct from the source in a secure way. 

code block of example described in above paragraph

In this sample the resource is specified to query the Graph API to: 

  • Return items within the specified SharePoint list
  • Uses $expandto include the SharePoint item field values in the response 
  • Uses $filterto only include items with a Status of ‘Ready for Packing’

Notice the use of the max-pages and polling-rate in the mgt-get component. max-pages limits the total number of items to be returned, and the polling-rate automatically calls the resource at the specified interval and updates the UX accordingly. This allows the warehouse packing list to stay updated directly from the source every 30 seconds. For resources that support delta queries, the mgt-get component will automatically take care of querying for changes since the last polling call. 

With a little bit of CSS magic the result of this small amount of sample code is a secure packing app with dynamic data being read from source in near real-time. (Check out this sample in Try-It-Out repo here.) 

UI of the packing app built from mgt-get

As you can see mgt-get is really powerful for accessing any data set within the Microsoft Graph and allows you to concentrate on querying the Graph and displaying the resultswhile the component takes care of all the plumbing for you. Your head may be spinning with ideas for what you can do with mgt-get but don’t forget to tune in to Day 7 in this series when we take a deeper look at authentication with Providers. 

filter-icon