Getting started

关于这个组件的介绍，可以查看之前的文章。

使用 mgt-get 构建你的第一个自定义组件

我们演示一个显示当前登录用户姓名和邮箱的自定义组件。该组件需要两个主要属性：要查询的resource和必要的scope。

<mgt-get resource="/me" scopes="User.Read"><template>Hello, {{ givenName }} {{ surname }}! Your email is {{ mail }}</template>
</mgt-get>

返回的效果如下图所示：

使用 mgt-get 展示列表内容

使用 mgt-get 组件不仅能展示特定的对象，还可以展示列表内容。例如我们可以展示邮件的内容，可以自定义展示的格式。

<mgt-get resource="/me/mailFolders/Inbox/messages" scopes="Mail.Read"><template><ul><li data-for="email in value">{{ email.sender.emailAddress.address }} : {{ email.subject }}</li></ul></template>
</mgt-get>

效果如下图：

使用 mgt-get 的高级场景

调试

在开发模板时，我们会想要知道 Microsoft Graph 返回的数据是什么，我们可以使用下面的代码直接显示返回的数据。

<mgt-get resource="/me" scopes="User.Read"><template>{{ this }}</template>
</mgt-get>

数据转换

我们还可以基于现有返回的数据进行再加工，对数据扩充或加上自己的逻辑。下面的示例展示了如何使用自定义转换器在结果返回时将信息输出到浏览器命令行。

<mgt-get id="mgt-get-events" resource="/me/mailFolders/Inbox/messages" scopes="Mail.Read"><template><ul><li data-for="email in value">{{ getFormattedMessage(email) }}</li></ul></template>
</mgt-get><script>document.querySelector('#mgt-get-events').templateContext = {getFormattedMessage: (message) => {console.log(message);return `${message.sender.emailAddress.address} : ${message.subject}`;}}
</script>

缓存数据

mgt-get 组件有一个 cache-enabled 属性，通过它可以缓存从 Microsoft Graph 请求到的数据，以避免反复地请求，提高性能。

<mgt-get resource="/me" scopes="User.Read" cache-enabled="true"><template>Hello, {{ givenName }} {{ surname }}! Your email is {{ mail }}</template>
</mgt-get>

嵌套 mgt-get 组件

在更复杂的场景中，我们可能需要依次序向 Microsoft Graph 请求一些数据，以获得更多信息或相关信息。如下面的示例，找到当前登录用户的manager并展示他访问文件的趋势信息。

<mgt-get resource="/me/manager" scopes="User.Read.All"><template>Hello, your manager is {{ givenName }} {{ surname }}! Their email is {{ mail }}! The following list is what is trending around them :<mgt-get resource="/users/{{ id }}/insights/trending" scopes="Sites.Read.All" cache-enabled="true"><template><ul><li data-for="file in value"><a href="{{ file.resourceReference.webUrl }}">{{ file.resourceVisualization.title }}</a></li></ul></template></mgt-get></template>
</mgt-get>

使用其他 mgt 组件

不仅 mgt-get 组件自己可以嵌套，还可以嵌套其他组件，我们稍微改一下上面的示例，将 mgt-person 嵌套进来。

<mgt-get resource="/me/manager" scopes="User.Read.All" cache-enabled="true"><template>Hello, your manager is <mgt-person user-id="{{ id }}" view="oneline" show-presence="true" person-card="hover"></mgt-person> <br />The following list is what is trending around them :<mgt-get resource="/users/{{ id }}/insights/trending" scopes="Sites.Read.All" cache-enabled="true"><template><ul><li data-for="file in value"><a href="{{ file.resourceReference.webUrl }}">{{ file.resourceVisualization.title }}</a></li></ul></template></mgt-get></template>
</mgt-get>

本篇就介绍到这。

MSGraphMailbag - 利用 Microsoft Graph Toolkit 中的 mgt-get 组件相关推荐

Microsoft Graph Toolkit 初探
在今年的Build大会上面, Microsoft Graph 产品组公开宣布了一套新的Web组件,Microsoft Graph Toolkit(简称mgt),这套组件可以与任何前端开发平台无缝整合, ...
Microsoft Graph Toolkit 代理 Provider
本篇我们介绍一下代理Provider,即Proxy Provider. 什么是代理Provider? 正如其名,代理Provider使我们能够在Microsoft Graph Toolkit中使用代理 ...
Microsoft Graph Toolkit Providers
本篇我们介绍一下神秘的Provider. 我们在使用Microsoft Graph Toolkit的时候,会在页面中使用一个provider组件,如: <mgt-msal-provider cl ...
Microsoft Graph Toolkit更新了！
上周六的Microsoft 365开发者训练营上,我稍微提到了Graph Toolkit这套组件,可以大大方便前端的开发.正好看到官博发了更新消息,顺便推广一下. 新增组件:mgt-get mgt-g ...
Microsoft Graph Toolkit 新版发布 - 新的 Microsoft Teams 身份验证提供程序和文件上传功能
微软宣布 Microsoft Graph Toolkit 发布了新的 2.3 版本,这个版本包括一个新的 Microsoft Teams 身份验证提供程序,文件列表 (File List) 组件中的文 ...
Microsoft Graph Toolkit Teams 相关
本篇我们介绍一下Microsoft Graph Toolkit在Teams中应用的相关内容. 准备工作安装ngrok用于使用HTTPS承载我们的应用访问Teams管理中心,点开页面右上角的设置, ...
Microsoft Graph Toolkit mgt-get的魅力
本篇我们介绍一下mgt-get这个组件,在Microsoft Graph Toolkit的组件中,mgt-get是一个特殊的,最有趣和灵活的组件. 它不像是其他的组件是以控件的形式呈现的,比如登录.人 ...
使用 Microsoft Teams Toolkit for Visual Studio 高效构建一个指示板
Teams Toolkit for Visual Studio 现在可用了,这对于.NET开发者来说真是一个好消息. 本篇我们会介绍使用 ASP.NET Core 去构建一个 Teams 选项卡,并展 ...
【转】通过第三方工具体验Microsoft Graph
上一篇文章我介绍了如何利用官方提供的Graph 浏览器快速体验Microsoft Graph强大功能,这是极好的起点.官方的Graph浏览器力图用最简单的方式帮助您使用Microsoft Graph, ...

MSGraphMailbag - 利用 Microsoft Graph Toolkit 中的 mgt-get 组件