{"id":5752,"date":"2021-01-12T06:00:24","date_gmt":"2021-01-12T14:00:24","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=5752"},"modified":"2021-11-17T12:45:34","modified_gmt":"2021-11-17T20:45:34","slug":"microsoft-graph-mailbag-taking-advantage-of-mgt-get-component-in-the-microsoft-graph-toolkit","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-mailbag-taking-advantage-of-mgt-get-component-in-the-microsoft-graph-toolkit\/","title":{"rendered":"Microsoft Graph Mailbag – Taking advantage of mgt-get component in the Microsoft Graph Toolkit"},"content":{"rendered":"

In today\u2019s Microsoft Graph Mailbag post we will cover one of the most flexible components of the Microsoft Graph Toolkit, the mgt-get component! If you want to learn more about the Microsoft Graph Toolkit and get a primer on its capabilities, we suggest revisiting a blog series written by the team and community members called A Lap around Microsoft Graph Toolkit<\/a>.<\/p>\n

Please be sure to follow this blog series using\u00a0https:\/\/aka.ms\/MSGraphMailbag<\/a>\u00a0or with RSS using\u00a0https:\/\/developer.microsoft.com\/graph\/blogs\/feed\/?tag=MSGraphMailbag<\/a>.<\/p>\n

Getting started with the Microsoft Graph Toolkit mgt-get component<\/h2>\n

Unlike the other components of the Microsoft Graph Toolkit, the mgt-get component allows developers to build custom Microsoft Graph queries and their own HTML to render the data that is returned by Microsoft Graph. The component does not provide any default UI and requires you to write a template from scratch.<\/p>\n

To get started, we recommend you take a look at the Zero to Hero<\/a> blog post from the Lap around Microsoft Graph Toolkit<\/a> blog series to get your environment ready.<\/p>\n

Building your first custom component with mgt-get<\/h2>\n

Let us start by creating a very simple custom component using mgt-get. This first component will display the first name, last name, and email of the currently logged in user.<\/p>\n

The component will require 2 main attributes: the resource to query and the necessary scopes.<\/p>\n

<mgt-get resource=\"\/me\" scopes=\"User.Read\">\n  <template>\n    Hello, {{ givenName }} {{ surname }}! Your email is {{ mail }}\n  <\/template>\n<\/mgt-get><\/pre>\n
As you can see, the result returned by the \/me endpoint of Microsoft Graph is available within your template thanks to the use of brackets. The result is \u00a0simple but powerful HTML rendered with the data provide by Microsoft Graph.<\/p>\n
\"\"<\/p>\n
List content with mgt-get<\/h2>\n
Not only can you display a specific object when utilizing the mgt-get component, but also any list of data. For example, if you want to display a list of messages as part of your template, you need to be able to format and display all your messages in a certain way. The template will support different operations like conditional formatting<\/a> and looping<\/a>. This will help us to render a template in a way that brings some logic and control. With the following example, it is possible to display all the messages that are in the currently logged in user\u2019s inbox.<\/p>\n
<mgt-get resource=\"\/me\/mailFolders\/Inbox\/messages\" scopes=\"Mail.Read\">\n  <template>\n    <ul>\n      <li data-for=\"email in value\">\n        {{ email.sender.emailAddress.address }} : {{ email.subject }}\n      <\/li>\n    <\/ul>\n  <\/template>\n<\/mgt-get><\/pre>\n
This template will list all the emails as a simple unordered list and will allow you to fully style it.<\/p>\n
\"\"<\/p>\n
Advanced scenarios with mgt-get<\/h2>\n
Debugging<\/h3>\n
While you are developing templates, you will want to peek at the data that is returned by Microsoft Graph. You can use template capabilities to leverage a helper method to display the raw object directly in the UI while you are developing.<\/p>\n
<mgt-get resource=\"\/me\" scopes=\"User.Read\">\n  <template>\n    {{ this }}\n  <\/template>\n<\/mgt-get><\/pre>\n
\"\"<\/h3>\n
Converting data<\/h3>\n
If you want to bring this capability to the next level, you can also add features to augment the data, to do advanced formatting or to bring any of your custom logic to your templates. In the following example, we use a custom converter to allow logging to the browser console when messages are rendered.<\/p>\n
<mgt-get id=\"mgt-get-events\" resource=\"\/me\/mailFolders\/Inbox\/messages\" scopes=\"Mail.Read\">\n  <template>\n    <ul>\n      <li data-for=\"email in value\">\n        {{ getFormattedMessage(email) }}\n      <\/li>\n    <\/ul>\n  <\/template>\n<\/mgt-get>\n\n<script>\n  document.querySelector('#mgt-get-events').templateContext = {\n    getFormattedMessage: (message) => {\n      console.log(message);\n      return `${message.sender.emailAddress.address} : ${message.subject}`;\n    }\n  }\n<\/script><\/pre>\n
Caching data<\/h3>\n
To improve performance and to avoid round trips to Microsoft Graph, the mgt-get component supports caching data which will make a big difference when building custom components with the Microsoft Graph Toolkit. In order to enable caching you only need to specify \u201ccache-enabled\u201d on your component and the component will make sure your calls are cached at the browser level. Using the \u201ccache-invalidation-period\u201d you can also modify how long this item will be cached for the current user.<\/p>\n
<mgt-get resource=\"\/me\" scopes=\"User.Read\" cache-enabled=\"true\">\n  <template>\n    Hello, {{ givenName }} {{ surname }}! Your email is {{ mail }}\n  <\/template>\n<\/mgt-get><\/pre>\n
Nesting components<\/h3>\n
In more complex scenarios, you will want to do subsequent calls to Microsoft Graph to get more details or related information about an item that was retrieved. Luckily, the templating system of the Microsoft Graph Toolkit allows for nesting components. If you want to include a mgt-get component within another mgt-get component, it is possible! For example, you want to find your manager and then discover all the files trending around them. To achieve this, you can nest the following components.<\/p>\n
<mgt-get resource=\"\/me\/manager\" scopes=\"User.Read.All\">\n  <template>\n    Hello, your manager is {{ givenName }} {{ surname }}! Their email is {{ mail }}! The following list is what is trending around them :\n\n    <mgt-get resource=\"\/users\/{{ id }}\/insights\/trending\" scopes=\"Sites.Read.All\" cache-enabled=\"true\">\n      <template>\n        <ul>\n          <li data-for=\"file in value\">\n            <a href=\"{{ file.resourceReference.webUrl }}\">{{ file.resourceVisualization.title }}<\/a>\n          <\/li>\n        <\/ul>\n      <\/template>\n    <\/mgt-get>\n  <\/template>\n<\/mgt-get><\/pre>\n
\"\"<\/h3>\n
Using other mgt components<\/h3>\n
Finally, as we discovered it is possible to nest components within other components, one of the great capabilities is to utilize the other Microsoft Graph Toolkit components as part of your custom template. You could for instance leverage the mgt-person component to highlight your manager in a rich way.<\/p>\n
<mgt-get resource=\"\/me\/manager\" scopes=\"User.Read.All\" cache-enabled=\"true\">\n  <template>\n    Hello, your manager is <mgt-person user-id=\"{{ id }}\" view=\"oneline\" show-presence=\"true\" person-card=\"hover\"><\/mgt-person> <br \/>\n\n    The following list is what is trending around them :\n\n    <mgt-get resource=\"\/users\/{{ id }}\/insights\/trending\" scopes=\"Sites.Read.All\" cache-enabled=\"true\">\n      <template>\n        <ul>\n          <li data-for=\"file in value\">\n            <a href=\"{{ file.resourceReference.webUrl }}\">{{ file.resourceVisualization.title }}<\/a>\n          <\/li>\n        <\/ul>\n      <\/template>\n    <\/mgt-get>\n  <\/template>\n<\/mgt-get><\/pre>\n
 <\/p>\n
\"\"<\/p>\n
\"\"<\/p>\n
Conclusion<\/h3>\n
In today’s post, we looked at ways you can leverage the mgt-get component to build rich end-user experiences with the Microsoft Graph Toolkit. If you have any feedback or suggested features for the Microsoft Graph Toolkit, please open an issue on the GitHub repository<\/a>!<\/p>\n
You can also find a working example on the following GitHub repository<\/a>!<\/p>\n
Today\u2019s post was written by S\u00e9bastien Levert, Sr. Customer and Partner Experience PM with the Microsoft Graph Team.\u00a0 You can follow S\u00e9bastien on Twitter @sebastienlevert<\/a>.\u00a0 Join us for our next Microsoft Graph Mailbag post Jan 26, 2021.<\/p>\n","protected":false},"excerpt":{"rendered":"
In today\u2019s Microsoft Graph Mailbag post we will cover one of the most flexible components of the Microsoft Graph Toolkit, the mgt-get component.<\/p>\n","protected":false},"author":69075,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[34,17],"class_list":["post-5752","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","tag-microsoft-graph-toolkit","tag-msgraphmailbag"],"acf":[],"blog_post_summary":"
In today\u2019s Microsoft Graph Mailbag post we will cover one of the most flexible components of the Microsoft Graph Toolkit, the mgt-get component.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5752","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\/69075"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=5752"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5752\/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=5752"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=5752"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=5752"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}