本篇我们介绍一下mgt-get这个组件,在Microsoft Graph Toolkit的组件中,mgt-get是一个特殊的,最有趣和灵活的组件。
它不像是其他的组件是以控件的形式呈现的,比如登录、人员、日程等内容展示的控件,亦不需要绑定指定的Microsoft Graph中的数据。它是一款为开发者设计的用来调用自定义Graph API获取数据并自定义模板去呈现结果的组件。
下面举个例子来说明一下,目前Microsoft Graph Toolkit里没有能够显示SharePoint列表中列表项的组件,我们就用mgt-get实现一下,示例如下:
<mgt-get resource="/sites/{site-id}/lists/{list-id}" scopes="sites.read.all">
<template data-type="default">
<div class="listItem">{{name}}</div>
</template>
<template data-type="loading">
loading...
</template>
<template data-type="error">
{{this.message}}
</template>
</mgt-get>
这里使用了mgt-get的两个参数:
Resource表示包括查询参数在内的要调用的Graph API的终结点地址。
Scopes表示用户想要调用Resource参数中的Graph API所需要的权限。
上面的例子比较简单,只是获取SharePoint网站指定列表中的Title内容。下面我们来看一个更加接近真实情况的例子。假设有一个存储在线订单的SharePoint列表,员工需要及时地通过移动设备获取订单,一个轻量级的订单展示页面示例代码如下:
<mgt-get resource="/sites/root/lists/{list-id}/items?$expand=fields&filter=fields/Status eq 'Ready for Packing'" scopes="sites.read.all" max-pages="2" polling-rate="30000">
<template data-type="value">
<div class="order">
<div class="orderheader">Order {{fields.Title}} for {{fields.ContactName}}</div>
<div class="orderheader">{{fields.OrderManifest}}</div>
<div class="orderheader">Items {{fields.TotalItems}}<button>Packed</button></div>
</div>
</template>
<template data-type="loading">
loading...
</template>
<template data-type="error">
{{this.message}}
</template>
</mgt-get>
本例中新增了两个参数,max-pages和polling-rate。
max-pages用来限制返回结果的最大数。
polling-rate表示自动刷新数据的毫秒数间隔,本例为30秒。
完整的示例代码可以访问下面的地址查看。
https://github.com/microsoftgraph/mgtLap-TryItOut/blob/master/06%20-%20Power%20of%20mgt-get/index.html
mgt-get对于访问Microsoft Graph中的任何数据集都是非常强大的,组件本身负责所有的准备工作,使我们能够专注于Graph的查询并显示结果这个事情。