博客地址: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. Sitecore中Core,Master和Web数据库之间的区别

    Core数据库 正如名称所示,Core Database是Sitecore应用程序的主干,它可用于多种用途. 核心数据库包含所有Sitecore设置. 它包含桌面模式,内容编辑器,页面编辑器等的定义. ...

  2. [c/c++] programming之路(25)、字符串(六)——memset,Unicode及宽字符,strset

    一.memset #include<stdio.h> #include<stdlib.h> #include<memory.h> void *mymemset(vo ...

  3. Cmd Markdown 编辑阅读器

    我们理解您需要更便捷更高效的工具记录思想,整理笔记.知识,并将其中承载的价值传播给他人,Cmd Markdown 是我们给出的答案 -- 我们为记录思想和分享知识提供更专业的工具. 您可以使用 Cmd ...

  4. 【做题】agc016d - XOR Replace——序列置换&环

    原文链接 https://www.cnblogs.com/cly-none/p/9813163.html 题意:给出初始序列\(a\)和目标序列\(b\),都有\(n\)个元素.每次操作可以把\(a\ ...

  5. server time zone

    问题原因 由于使用的Mysql数据库驱动版本太高,存在数据库和系统时区差异,所以出问题. 问题解决 Spring Boot配置文件中在url: jdbc:mysql://127.0.0.1:3306/ ...

  6. 【Visual Studio 扩展工具】如何在ComponentOne的DataTree中实现RightToLeft布局

    概述 C1FlexGrid提供了创建轮廓树的功能,其中可以显示缩进结构,每个节点行旁边都有折叠/展开图标. 然后,用户可以展开和折叠轮廓以查看所需的细节级别. 为此,C1FlexGrid允许您使用其T ...

  7. SAP Hybris电子商务最新功能

    SAP Hybris电子商务最新功能   SAP Hybris 电子商务6.0中国加速器是专为中国市场设计的电子商务平台,可满足企业在全渠道销售和订单履行方面的所有需求.新版的中国加速器基于SAP H ...

  8. [Java] int 转换为BigDecimal

    new BigDecimal(int i); BigDecimal.parseBigDecimal(String.valueOf(int i));

  9. HDU - 1061-快速幂签到题

    快速幂百度百科:快速幂就是快速算底数的n次幂.其时间复杂度为 O(log₂N), 与朴素的O(N)相比效率有了极大的提高. HDU - 1061 代码实现如下: import java.util.Sc ...

  10. React文档(十二)组合vs继承

    React拥有很强大的组合模型,我们建议使用组合来替代继承来重利用组件之间的代码. 在本章节中,我们将讨论一些开发者经常触及继承的问题,并且我们该如何使用组合来解决这些问题. 组合 一些组件事先不知道 ...