Microsoft Graph Toolkit mgt-get的魅力

本篇我们介绍一下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的查询并显示结果这个事情。

Microsoft Graph Toolkit mgt-get的魅力

猜你喜欢