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

本篇接上一讲,我们继续看如何通过GraphHttpClient创建一个Office 365的组,需要使用POST请求。

为结果添加按钮和占位符(PlaceHolder)

我们需要再次修改HTML代码,添加一个用来创建组的按钮。

1. 在Visual Studio Code中打开文件\src\webparts\helloWorld\HelloWorldWebPart.ts。

2. 修改render()方法,使其包含一个按钮和一个div用来显示创建成功与否的结果信息。修改后的render方法代码如下所示:

public render(): void {
this.domElement.innerHTML = `
<div class="${styles.helloWorld}">
<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"/>
<input id="createGroup" type="button" value="Create New Group"/>
</p>
<div id="spCreateGroupResults" ></div>
<div id="spTableContainer" ></div>
</div>
</div>
</div>
</div>`;
this.domElement.querySelector('#createGroup').addEventListener('click',() => {this._createGroup();});
this.domElement.querySelector('#readGroups').addEventListener('click',() => {this._readGroups();});
}

添加_createGroup()方法来调用Microsoft Graph API创建一个组,_createGroup()方法的代码如下所示:

protected _createGroup(){
// Use Microsoft Graph to create a sample group.
this.context.graphHttpClient.post(`v1.0/groups`,GraphHttpClient.configurations.v1,{
body: JSON.stringify({"description": "Self help community for library",
"displayName": "Library Assist",
"groupTypes": [
"Unified"
],
"mailEnabled": true,
"mailNickname": "library",
"securityEnabled": false
})
}).then((response: HttpClientResponse) => {
const resultContainer: Element = this.domElement.querySelector('#spCreateGroupResults');
if (response.ok) {
resultContainer.innerHTML = `<p>Sample group created</p>`;
} else {
resultContainer.innerHTML = `<p>Could not create group see console for details</p>`;
console.warn(response.status);
}
});
}

上面使用Microsoft Graph的代码示例中的代码创建了一个简单的组,可以点击这里了解详情。
post()方法发起了一个POST REST接口请求去调用URLv1.0/groups。第三个参数是IGraphHttpClientOptions值,里面的JSON体用来描述要创建的新组。HttpClientResponse用来判定调用是否成功执行并显示恰当的信息。

运行web部件去创建一个新组

1. 使用gulp打包你的解决方案
打开命令行,转到你的工程所在目录,输入命令gulp package-solution来打包你的解决方案。

2. 部署解决方案到你的SharePoint租户:

>访问你的应用程序目录网站,访问Apps for SharePoint。

>上传刚才打出的.sppkg包(\demowp\sharepoint\solution),如果提示已存在选择覆盖即可。

>在接下来弹出的提示是否信任解决方案的窗口中选择部署。

3. 使用gulp serve命令来承载我们写好的web部件,命令为gulp serve --nobrowser。

4. 添加web部件到任意一个网页或者使用工作台来测试,做法跟上一讲一样,此刻我的网络环境实在是非常的差,我就不上图了。

5. 当点击Create New Group按钮时,代码会创建一个新的Office 365组。注意如果创建的组在Office 365中已存在,就会返回组已存在的错误信息。

本篇就介绍到这里,下一篇会简单介绍一下如何更新组信息。

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

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

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

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

    博客地址:http://blog.csdn.net/FoxDave 使用GraphHttpClient类调用Microsoft Graph REST API,你可以使用GET,POST和PATCH请求 ...

  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. Hdu2041 超级楼梯 (斐波那契数列)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2041 超级楼梯 Time Limit: 2000/1000 MS (Java/Others)    M ...

  2. ASP.NET Core SignalR

    ASP.NET Core SignalR 是微软开发的一套基于ASP.NET Core的与Web进行实时交互的类库,它使我们的应用能够实时的把数据推送给Web客户端. 功能 自动管理连接 允许同时广播 ...

  3. 『Numpy』np.meshgrid

    生成网格坐标,一个很好的说明图如下: 虽然xy双坐标比较常用,但实际上其输入可以是任意多的数组,输出数组数目等于输出数组数目,且彼此间shape一致. 如果输入数组不是一维的,会拉伸为1维进行计算. ...

  4. 使用查询分析器和SQLCMD分别登录远程的SQL2005的1434端口

    SQLCMD是操作SQLSERVER的一个命令行工具, 而查询分析器是它的图形工具     查询分析器(SQL2005下叫managerment studio),连接远程的SQLSERVER2005, ...

  5. vue-i18n安装配置,运行

    需求:根据浏览器语言自动切换语言 1.安装vue-i18n, yarn安装 $ yarn add vue-i18n npm安装 $ npm install vue-i18n 2.导入语言包 src下创 ...

  6. StringUtils工具类常用方法汇总(截取、去除空白、包含、查询索引)

    一.截取   StringUtils中常用的截取字符串的方法如下: substring(String str,int start) substring(String str,int start, in ...

  7. 基于PI+QT实现OpenCV图像处理操作(基本环境搭建)

    这篇博客就是在PI上直接写出来的!cheers!! PI3的性能已经非常强劲,而作为一个能够独立运行的运算单元,使用它来做图像处理,将是非常适合的.为了挖掘机器的最大潜能,我没有采用比较常见的pyth ...

  8. Oracle 实例名/服务名 请问SID和Service_Name有什么区别啊?

    可以简单的这样理解:一个公司比喻成一台服务器,数据库是这个公司中的一个部门. 1.SID:一个数据库可以有多个实例(如RAC),SID是用来标识这个数据库内部每个实例的名字, 就好像一个部门里,每个人 ...

  9. 模块——Getopt::Long接收客户命令行参数和Smart::Comments输出获得的命令行参数内容

     我们在linux常常用到一个程序需要加入参数,现在了解一下 perl 中的有关控制参数的模块 Getopt::Long ,比直接使用 @ARGV 的数组强大多了.我想大家知道在 Linux 中有的参 ...

  10. vue脚手架的目录结构

    . |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node.npm等版本 ...