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