使用GraphHttpClient呼叫Microsoft Graph介面 - POST

Justin-Liu發表於2017-11-13
HTTPclientROS

部落格地址：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中已存在，就會返回組已存在的錯誤資訊。

本篇就介紹到這裡，下一篇會簡單介紹一下如何更新組資訊。

相關文章