博客地址:http://blog.csdn.net/FoxDave

使用GraphHttpClient类调用Microsoft Graph REST API,你可以使用GET,POST和PATCH请求(分别对应get(),post()和fetch()方法)。本文会讲述如何构建一个使用GraphHttpClient的web部件(你可以在任何SharePoint Framework客户端代码使用GraphHttpClient)。本篇主要讲解GET请求的应用。

使用GET请求获取Office 365组信息

你可以使用get()方法来向Microsoft Graph构建一个REST请求,下面的示例演示了如何获取Office 365的组列表。

创建一个新的web部件工程

1. 在你喜欢的目录创建一个新的工程目录,这里我使用D盘根目录。打开CMD,输入D:进入D盘根目录,接着输入命令mkdir hellograph-webpart来创建一个工程目录。

2. 进入刚才创建的目录,使用命令cd hellograph-webpart。

3. 在工程目录创建SharePoint工程,通过使用Yeoman的生成器来实现。输入命令yo @microsoft/sharepoint。

4. 如上图所示,输入完命令后会提示是不是发送匿名信息,一般这类的信息我都会选否。之后会弹出创建SharePoint解决方案的向导。这里需要输入以下信息:

>解决方案的名称

>解决方案的路径

>在弹出的提示的时候如果输入y确认,则允许租户管理员立即部署解决方案到所有的网站,而不用在网站中再运行任何功能部署和添加Add-in的步骤

>选择web部件作为客户端组件来创建

>输入web部件的名称

>输入web部件的描述

>选择脚本框架,这里可以直接输入回车选择默认的不使用

这里我的设置如下图。

5. 稍等几分钟等待解决方案创建完成。Yeoman生成器会构建web部件,构建完成之后你就可以使用自己的代码编辑器打开该工程了,这里我使用Visual Studio Code。

6. 接着输入gulp serve命令确认它已经在本地的工作台运行了。

为结果添加一个按钮和占位符

接下来,我们需要修改HTML,提供一个按钮来获取Office 365的组信息。HTML还需要一个占位符(placeholder)来显示组的信息。

1. 在Visual Studio Code中,打开文件/src\webparts\demoWp\DemoWpWebPart.ts。

2. 修改render()方法,添加一个按钮和一个div用来获取和展示组信息。代码如下(TypeScript代码,不了解的可以看看介绍,很好理解):

public render(): void {
this.domElement.innerHTML = `
<div class="${styles.helloGraph}">
<div class="${styles.container}">
<div class="ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}">
<div class="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
<span class="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
<p class="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
<p class="ms-font-l ms-fontColor-white">${escape(this.properties.description)}</p>
<a href="https://aka.ms/spfx" class="${styles.button}">
<span class="${styles.label}">Learn more</span>
</a>
<p>
<input id="readGroups" type="button" value="Read Groups"/>
</p>
<div id="spTableContainer" ></div>
</div>
</div>
</div>
</div>`;
this.domElement.querySelector('#readGroups').addEventListener('click',() => {this._readGroups();});
}

稍后会对这里面的_readGroups()方法进行定义。
3. 定义一个用来显示每个Office 365组信息的接口,将下面的代码添加到DemoWP类的上面但是要确保在imports的下面。

export interface IOffice365Group {
// Microsoft Graph has more group properties.
displayName: string;
mail: string;
description: string;
}

使用GraphHttpClient.get方法来获取Office 365的组

接下来,我们将使用GraphHttpClient.get()方法来执行一个REST请求到Microsoft Graph来获取Office 365组列表。

1. 在DemoWpWebPart.ts文件中添加如下import片段来引入GraphHttpClient类及其相关的类型。

import { GraphHttpClient, HttpClientResponse, IGraphHttpClientOptions } from '@microsoft/sp-http';

2. 在DemoWP类中添加下面的代码定义_readGroups()方法。

protected _readGroups(){
// Query for all groups on the tenant using Microsoft Graph.
this.context.graphHttpClient.get(`v1.0/groups?$orderby=displayName`, GraphHttpClient.configurations.v1).then((response: HttpClientResponse) => {
if (response.ok) {
return response.json();
} else {
console.warn(response.statusText);
}
}).then((result: any) => {
// Transfer result values to the group variable
this._renderTable(result.value);
});
}

在上面的代码片段中,context属性具有GraphHttpClient的实例对象。当我们调用get()方法时,会生成一个到Microsoft Graph的REST请求,传递指定的URL。在上面的示例中,URL为v1.0/groups?orderby=displayName。该请求会返回租户中所有Office 365组的信息并以显示名排序。

你可以通过这种方式构建任何GET请求,传入正确的URL值即可。关于URL值的说明,戳这里。例如,你可以使用这里提到的组相关的URL来获取组信息。

get()方法会返回一个HttpClientResponse对象,你可以通过它判断请求是否成功,返回的JSON在result.value属性中。这里由于我们需要获取组信息,将返回结果传给_renderTable()方法。

3. 创建_renderTable()方法来展示返回的组信息,将以下代码添加到DemoWP类中。

protected _renderTable(items: IOffice365Group[]): void {
let html: string = '';
if (items.length<=0){
html=`<p>There are no groups to list...</p>`;
}
else {
html += `
<table><tr>
<th>Display Name</th>
<th>Mail</th>
<th>Description</th></tr>`;
items.forEach((item: IOffice365Group) => {
html += `
<tr>
<td>${item.displayName}</td>
<td>${item.mail}</td>
<td>${item.description}</td>
</tr>`;
});
html += `</table>`;
}
const tableContainer: Element = this.domElement.querySelector('#spTableContainer');
tableContainer.innerHTML = html;
return;
}

运行web部件来调用Microsoft Graph
我们的代码需要调用运行在SharePoint上的GraphHttpClient应用程序,所以本地的工作台是无法正确运行的。我们需要打包并把它部署到SharePoint。

1. 使用gulp来打包解决方案,输入以下命令。

gulp package-solution

2. 将解决方案部署到SharePoint租户。

>访问网站的应用程序目录

>上传.sppkg的包到应用程序目录

>在弹出的提示框中进行确认,并选择部署。


3. 使用gulp serve来承载web部件,输入以下命令。

gulp serve --nobrowser

将web部件添加到网页,或使用SharePoint的工作台。结果类似下图显示的样子。

本篇就介绍到这里。

使用GraphHttpClient调用Microsoft Graph接口 - GET的更多相关文章

  1. 使用GraphHttpClient调用Microsoft Graph接口 - PATCH

    博客地址:http://blog.csdn.net/FoxDave 通过前两讲的阐述我们应该大致了解了使用GraphHttpClient调用Microsoft Graph接口的模式,并介绍了使用get ...

  2. 使用GraphHttpClient调用Microsoft Graph接口 - POST

    博客地址:http://blog.csdn.net/FoxDave 本篇接上一讲,我们继续看如何通过GraphHttpClient创建一个Office 365的组,需要使用POST请求. 为结果添加按 ...

  3. 【Azure Developer】Python 获取Micrisoft Graph API资源的Access Token, 并调用Microsoft Graph API servicePrincipals接口获取应用ID

    问题描述 在Azure开发中,我们时常面临获取Authorization问题,需要使用代码获取到Access Token后,在调用对应的API,如servicePrincipals接口. 如果是直接调 ...

  4. 在无人值守程序(服务)中调用Microsoft Graph

    作者:陈希章 发表于 2017年5月31日 什么是无人值守程序(服务) 我在此前用了几篇文章分别介绍了在桌面应用程序(控制台),Web应用程序(ASP.NET MVC),以及PowerSehll脚本中 ...

  5. Microsoft Graph Web应用程序极致开发体验

    作者:陈希章 重写于 2017年5月24日 前言 这篇文章最早写于2017年5月2日,当时的想法是从最简单的方式来写如何在一个ASP.NET MVC应用程序中集成Microsoft Graph,但实际 ...

  6. Microsoft Graph 桌面应用程序

    作者:陈希章 发表于 2017年3月22日 桌面应用程序,在我这篇文章的语境中,我是特指在Windows桌面上面直接运行的.NET应用程序,包括Console Application,WPF Appl ...

  7. 通过第三方工具体验Microsoft Graph

    作者:陈希章 发表于 2017年3月22日 上一篇文章我介绍了如何利用官方提供的Graph 浏览器快速体验Microsoft Graph强大功能,这是极好的起点.官方的Graph浏览器力图用最简单的方 ...

  8. win10 uwp 使用 Microsoft.Graph 发送邮件

    在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...

  9. 通过Graph 浏览器体验Microsoft Graph

    作者:陈希章 发表于 2017年3月18日 上一篇介绍了Microsoft Graph的基本概念,接下来我们快速体验一下Microsoft Graph到底能做什么? 为了帮助开发人员直观和快速体验Mi ...

随机推荐

  1. QT https 程序运行异常

    [1]问题现象描述 利用QT的https方式访问服务器,添加了libeay32.dll 和 ssleay32.dll, 且一直都使用正常. 正常现象:返回200,且该获取的值都正常返回(即replyB ...

  2. hdu5236 Article

    题目链接 概率DP $dp_i$表示连打$i$个字符的期望按键数 那么枚举保存的次数,均分一下连打的个数就好 #include<iostream> #include<cstdio&g ...

  3. js 清空html input file的值

    在做上传图片预览时,利用input onchange事件触发函数,但是type=file时,一定记得新建要清空原来的图片,因为原来的图片还存在在input里面,再选重复的图片没有change,故不会触 ...

  4. 大话npm,cnpm和yarn

    npm:基于node.js的包管理工具; 常用命令 npm install 包名; 缺点:因服务器在国外,所以下载包的速度超级慢,所以出现了cnpm和yarn cnpm:跟npm是一样的,这是淘宝出的 ...

  5. Scala--reduceLeft

    reduceLeft神语法 val a = Array(20, 12, 6, 15, 2, 9) 1 2 3 4 5 6 7 8 scala> a.reduceLeft(_ + _)  // 数 ...

  6. oracle insert、append、parallel、随后查询的redo与磁盘读写

    SQL> set autotrace traceonly statistics; SQL> insert into big_table_dir_test1 select * from bi ...

  7. Codeforces 979E Kuro and Topological Parity - 动态规划 - 组合数学

    题目传送门 传送点 题目大意 给定$n$个标号依次为$1, 2, \cdots, n$的点,其中一些点被染成一些颜色,剩下的点没有染色.你需要添加一些有向边并将剩下的点染色,满足有向边从编号小的一端指 ...

  8. 调用微信的扫一扫功能详解说明---(java 排坑版)

    最近碰到了这么一个需求,说是在前端页面调用手机本地的相机,扫描二维码这么一个需求,对于我一个后端来说, 这实在是难,难于上青天,但是决不能说一个不字.我说可以使用微信的扫码工具吗,这样可以方便一点,. ...

  9. 论文阅读:Deep Attentive Tracking via Reciprocative Learning

    Deep Attentive Tracking via Reciprocative Learning 2018-11-14 13:30:36 Paper: https://arxiv.org/abs/ ...

  10. Anaconda安装mysqldb模块

    在anaconda里mysqldb是封在mysql-python里的,所以要先在anaconda prompt里运行 conda install mysql-python.(注意要右键选管理员身份)有 ...