使用GraphHttpClient调用Microsoft Graph接口 - POST
博客地址: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的更多相关文章
- 使用GraphHttpClient调用Microsoft Graph接口 - PATCH
博客地址:http://blog.csdn.net/FoxDave 通过前两讲的阐述我们应该大致了解了使用GraphHttpClient调用Microsoft Graph接口的模式,并介绍了使用get ...
- 使用GraphHttpClient调用Microsoft Graph接口 - GET
博客地址:http://blog.csdn.net/FoxDave 使用GraphHttpClient类调用Microsoft Graph REST API,你可以使用GET,POST和PATCH请求 ...
- 【Azure Developer】Python 获取Micrisoft Graph API资源的Access Token, 并调用Microsoft Graph API servicePrincipals接口获取应用ID
问题描述 在Azure开发中,我们时常面临获取Authorization问题,需要使用代码获取到Access Token后,在调用对应的API,如servicePrincipals接口. 如果是直接调 ...
- 在无人值守程序(服务)中调用Microsoft Graph
作者:陈希章 发表于 2017年5月31日 什么是无人值守程序(服务) 我在此前用了几篇文章分别介绍了在桌面应用程序(控制台),Web应用程序(ASP.NET MVC),以及PowerSehll脚本中 ...
- Microsoft Graph Web应用程序极致开发体验
作者:陈希章 重写于 2017年5月24日 前言 这篇文章最早写于2017年5月2日,当时的想法是从最简单的方式来写如何在一个ASP.NET MVC应用程序中集成Microsoft Graph,但实际 ...
- Microsoft Graph 桌面应用程序
作者:陈希章 发表于 2017年3月22日 桌面应用程序,在我这篇文章的语境中,我是特指在Windows桌面上面直接运行的.NET应用程序,包括Console Application,WPF Appl ...
- 通过第三方工具体验Microsoft Graph
作者:陈希章 发表于 2017年3月22日 上一篇文章我介绍了如何利用官方提供的Graph 浏览器快速体验Microsoft Graph强大功能,这是极好的起点.官方的Graph浏览器力图用最简单的方 ...
- win10 uwp 使用 Microsoft.Graph 发送邮件
在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...
- 通过Graph 浏览器体验Microsoft Graph
作者:陈希章 发表于 2017年3月18日 上一篇介绍了Microsoft Graph的基本概念,接下来我们快速体验一下Microsoft Graph到底能做什么? 为了帮助开发人员直观和快速体验Mi ...
随机推荐
- 转:在 C# 中使用 P/Invoke 调用 Mupdf 函数库显示 PDF 文档
在 C# 中使用 P/Invoke 调用 Mupdf 函数库显示 PDF 文档 一直以来,我都想为 PDF 补丁丁添加一个 PDF 渲染引擎.可是,目前并没有可以在 .NET 框架上运行的免费 PDF ...
- vue组件传值
组件的传值(组件之间的通讯) 1.父子通信 1)父传子 传递:当子组件在父组件中当做标签使用的时候,通过给子组件绑定一个自定义属性,值为需要传递的数据 接收:在子组件内部通过props进行接收 接收的 ...
- Vue基础进阶 之 过渡效果
进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...
- Tomcat基本
Tomcat web 应用服务器基础 jdk+tomcat安装 1.运行Tomcat为什么要装jdk? http://blog.sina.com.cn/s/blog_753bc97d0102w5rd. ...
- python学习笔记:深浅拷贝的使用和原理
在理解深浅拷贝之前,我们先熟悉下变量对象和数据类型 1.变量和对象 变量-引用-对象(可变对象,不可变对象) 在python中一切都是对象,比如[1,2],'hello world',123,{'k1 ...
- [福建集训2011][LOJ10111]相框
这题主要还是分类讨论欧拉回路 首先对于导线一端没有东西的新建一个节点 由于原图不一定连通所以需要用到并查集判断有多少个连通块 将一条导线连接的两个焊点连接 然后先对于只有一个连通块考虑 1.如果一个焊 ...
- Redhat配置yum源(使用阿里云yum Repo)
1. 查看版本号和系统类别: cat /etc/redhat-release archor cat /etc/issue && arch 2.检查yum是否安装,以及安装了哪些依赖源并 ...
- sigmod函数
#include <cmath> //math.h double sigmod(double x) { return 1/(1+exp(-x)); }
- Asp.net core 学习笔记 ( Data protection )
参考 : http://www.cnblogs.com/xishuai/p/aspnet-5-identity-part-one.html http://cnblogs.com/xishuai/p/a ...
- 文献导读 | A Pan-Cancer Analysis of Enhancer Expression in Nearly 9000 Patient Samples
Chen, H., Li, C., Peng, X., Zhou, Z., Weinstein, J.N., Liang, H. and Cancer Genome Atlas Research Ne ...