博客地址：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中已存在，就会返回组已存在的错误信息。
本篇就介绍到这里，下一篇会简单介绍一下如何更新组信息。
