SharePoint Framework 把你的客戶端web部件鏈接到SharePoint

 博客地址： http://blog.csdn.net/FoxDave

把你的web部件鏈接到SharePoint來訪問SharePoint中的功能和數據，爲終端用戶提供更完整的體驗。本篇會基於以前構建的hello world的web部件繼續改進。

運行gulp serve

很少數，這步仍是首要的，不然無法進行調試的。確保你已經在命令行中運行了gulp serve這個命令。

訪問頁面上下文

當本地工做臺被承載起來的時候，你是沒法得到SharePoint頁面上下文的，固然你仍然能用許多不一樣的方式測試你的web部件。好比，你能夠專一於構建web部件的UX（用戶體驗），使用假數據去模擬與SharePoint的交互。

可是當工做臺在SharePoint中承載時，你就能夠訪問頁面上下文了，上下文提供了不少關鍵的屬性，如：

>網站標題

>網站絕對URL

>網站相對URL

>用戶登陸名

你能夠在web部件類中使用下面的變量訪問頁面上下文：

this.context.pageContext

切換到Visual Studio code（或者是你喜歡的IDE），打開文件src\webparts\helloWorld\HelloWorldWebPart.ts。

在render方法中，用下面的代碼替換代碼塊中的innerHTML部分：

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'>${this.properties.description}</p>
            <p class='ms-font-l ms-fontColor-white'>Loading from ${this.context.pageContext.web.title}</p>
            <a href='https://github.com/SharePoint/sp-dev-docs/wiki' class='ms-Button ${styles.button}'>
                <span class='ms-Button-label'>Learn more</span>
            </a>
        </div>
        </div>
</div>
</div>`;

注意一下${ }是如何被用來在HTML塊中輸出變量的。一個額外的HTML的P標籤用來顯示this.context.pageContext.web.title屬性。因爲這個web部件如今是從本地環境加載的，標題會顯示爲Local Workbench。

保存文件，運行着的gulp serve會發現保存操做並：

>自動編譯和打包更新的代碼。

>刷新你的本地工做臺頁面（由於web部件代碼須要從新加載）。

你能夠將Visual Studio Code和命令行窗體左右排列放在一塊兒，就能發現上述的機制。

在你的瀏覽器中，訪問本地的workbench.html，連接爲：http://localhost:4321/temp/workbench.html，以下圖。

下面我們訪問SharePoint的workbench.aspx，完整的URL是這樣的格式，具體的domain自行修改：https://your-sharepoint-site-url/Shared%20Documents/workbench.aspx。

咱們仍然用Chrome去看一下效果，以下圖，能夠看到可以讀取到網站的標題了。

定義列表模型

你須要一個列表模型去開始跟SharePoint列表數據交互，你須要兩個模型來獲取列表。

切換到Visual Studio Code，打開文件src\webparts\helloWorld\HelloWorldWebPart.ts。

在HelloWorldWebPart類的上方定義以下的接口模型：

export interface ISPLists {
    value: ISPList[];
}

export interface ISPList {
    Title: string;
    Id: string;
}

添加完代碼的文件以下圖所示，ISPList接口用來掌管咱們要鏈接的SharePoint列表信息。

從模擬存儲獲取列表

你須要一個假的存儲去返回假的數據來測試本地的工做臺。

在src\webparts\helloWorld路徑建立一個名爲MockHttpClient.ts的新文件，在項目結構上的helloWorld節點右鍵，選擇New File。

而後在新建的文件中輸入如下代碼：

import { ISPList } from './HelloWorldWebPart';

export default class MockHttpClient {

    private static _items: ISPList[] = [{ Title: 'Mock List', Id: '1' }];
    
    public static get(restUrl: string, options?: any): Promise<ISPList[]> {
    return new Promise<ISPList[]>((resolve) => {
            resolve(MockHttpClient._items);
        });
    }
}

關於上面的代碼須要知道如下幾點：

>因爲在HelloWorldWebPart.ts文件中有不少導出，特定的一個導入使用大括號｛｝指定了。在這裏，只須要導入數據模型ISPList。

>當從默認模塊導入時（這裏是HelloWorldWebPart），你不須要輸入文件的擴展名。

>它將MockHttpClient類導出爲默認模塊，這能夠在其餘文件被導入。

>它編譯初始的ISPList模擬數組並返回。

保存文件，如今你能夠在HelloWorldWebPart類中使用MockHttpClient類了。首先你須要導入MockHttpClient模塊。

打開HelloWorldWebPart.ts文件。

在代碼import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';的下面粘貼下面的代碼：

import MockHttpClient from './MockHttpClient';

在HelloWorldWebPart類中添加下面的私有方法來模擬獲取列表的操做。

private _getMockListData(): Promise<ISPLists> {
    return MockHttpClient.get(this.context.pageContext.web.absoluteUrl)
        .then((data: ISPList[]) => {
             var listData: ISPLists = { value: data };
             return listData;
         }) as Promise<ISPLists>;
}

保存文件，添加完代碼以後的文件以下圖：

從SharePoint網站獲取列表

接下來你須要從當前SharePoint網站獲取列表。你將會使用SharePoint REST API來從網站獲取列表數據，該操做的地址爲https://yourtenantprefix.sharepoint.com/_api/web/lists。

在HelloWorldWebPart類中添加下面的方法來從SharePoint中獲取列表數據：

private _getListData(): Promise<ISPLists> {
return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists?$filter=Hidden eq false`)
        .then((response: Response) => {
        return response.json();
        });
}

該方法使用了一個httpClient幫助類，這個類在SharePoint客戶端平臺上可用來執行REST API。上面的代碼中它使用ISPLists模型並應用了不獲取隱藏列表的篩選條件。

保存文件，切換到運行gulp serve的命令行窗口看看是否有錯誤發生。若是有錯誤發生的話須要先修復錯誤再日後繼續。

添加新的樣式

SharePoint Framework使用Sass做爲CSS預處理器，特別使用了SCSS語法，該語法徹底符合正常的CSS語法。Sass擴展了CSS語言，容許你使用像變量、嵌套規則和內聯導入等功能來爲你的web部件組織和建立高效的樣式表。SharePoint Framework裏面已經提供了SCSS編輯器，它能夠將你的Sass文件轉換成正常的CSS文件，同時還在開發過程當中提供了類型的版本。

要想添加新的樣式，打開文件HelloWorld.module.scss，在這個SCSS文件中定義你本身的樣式。

默認狀況下，樣式的範圍是你的web部件，你能夠看到定義在.helloWorld下的樣式。

在.button樣式下添加下面的樣式：

.list {
    color: #333333;
    font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box;
    margin: 10;
    padding: 10;
    line-height: 50px;
    list-style-type: none;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.listItem {
    color: #333333;
    vertical-align: center;
    font-family: 'Segoe UI Regular WestEuropean', 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    box-shadow: none;
    *zoom: 1;
    padding: 9px 28px 3px;
    position: relative;
}

保存文件，gulp會立刻將代碼從新編譯，這也會在HelloWorld.module.scss.ts文件中同時生成相應的類型。一旦編譯爲typescript，你就能在你的web部件代碼中導入並引用這些樣式了。

你能夠看到web部件中的render方法。

<div class="${styles.container}">

獲取展現列表信息的方法

打開HelloWorldWebPart類文件。SharePoint工做臺提供了足夠的靈活性，使你能夠在本地環境和SharePoint中測試web部件。SharePoint Framework旨在藉助這種能力經過使用EnvironmentType模塊幫助你瞭解你的web部件運行在哪一個環境。

你首先須要從@microsoft/sp-client-base包中導入EnvironmentType模塊，將下面的代碼添加到導入部分：

import { EnvironmentType } from '@microsoft/sp-client-base';

將下面的私有方法添加到HelloWorldWebPart類中去調用各自的方法獲取列表數據：

private _renderListAsync(): void {
    // Local environment
    if (this.context.environment.type === EnvironmentType.Local) {
        this._getMockListData().then((response) => {
        this._renderList(response.value);
        }); }
        else {
        this._getListData()
        .then((response) => {
            this._renderList(response.value);
        });
    }
}

關於_renderListAsync方法中承載類型的說明：

>this.context.environment.type屬性會幫助你檢查當前是處在本地環境仍是SharePoint環境。

>調用哪一個方法取決於你的工做臺在哪承載。

>目前會提示_renderList找不到，不要着急，下面會補全。

保存文件，如今你須要將從REST API獲取到的列表數據展現出來。將下面的私有方法添加到HelloWorldWebPart類中：

private _renderList(items: ISPList[]): void {
    let html: string = '';
    items.forEach((item: ISPList) => {
        html += `
        <ul class="${styles.list}">
            <li class="${styles.listItem}">
                <span class="ms-font-l">${item.Title}</span>
            </li>
        </ul>`;
    });

    const listContainer: Element = this.domElement.querySelector('#spListContainer');
    listContainer.innerHTML = html;
}

該方法經過styles這個變量引用了以前新添加的CSS樣式，保存文件，沒有問題的話會彈出一個編譯成功的提示。

獲取列表數據

定位到render方法，而後用下面的代碼替換原來的內容：

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">${this.properties.description}</p>
                <p class="ms-font-l ms-fontColor-white">${this.properties.test2}</p>
                <p class='ms-font-l ms-fontColor-white'>Loading from ${this.context.pageContext.web.title}</p>
                <a href="https://github.com/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}">
                    <span class="ms-Button-label">Learn more</span>
                </a>
            </div>
        </div>
    <div id="spListContainer" />
    </div>
</div>`;

this._renderListAsync();

保存文件，一樣gulp serve會自動進行編譯，確保沒有發生任何錯誤。

切換到你的本地工做臺，添加HelloWorld的web部件，你會看到返回的模擬數據，以下圖：

接下來訪問SharePoint承載的工做臺，效果以下圖：

如今你能夠暫時中止gulp serve的運行了，切換到命令行，用Ctrl+C來中斷gulp task。

下一步

恭喜你成功地在你的web部件中鏈接了SharePoint的數據。在下一講咱們將繼續深刻講解，如何將web部件部署到一個傳統的SharePoint服務端頁面。