Быстрое погружение в SharePoint Framework с AngularJS, Yeoman, TypeScript используя macOS

Всем привет, хотел поделиться опытом разработки в мире SharePoint используя макбук как площадку для разработки. Наконец то, дождались возможности не создавать виртулки, не ставить Windows для разработки. Всего, что нам нужно  - это Visual Studio Code (https://code.visualstudio.com/) и Office 365 SharePoint Online. А также установленные компоненты, которые нам нужны для разработки под SharePoint Framework Client Web Part (https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/). SharePoint Framework предоставляет вам возможность разрабатывать, тестировать локально (Workbanch). В моем примере я покажу как использовать компоненты AngulaJS для создания веб части в которой будет выпадающий список с элементами определенного списка SharePoint. Эти данные мы получим при обращении к списку SharePoint, используя REST API.

Итак начнем с установки компонентов, которые необходимы для разработки. Запускаем terminal консоль.

• Yeoman (https://yeoman.io/codelab/setup.html). Обязательно необходимо понимать, что выполнение последней команды (npm install --global yo) может вызвать ошибку, связанную с пролемой чтения Darwin и прочие сообщения. Попробуйте запустить terminal консоль в текущем профиле пользователя. Можно использовать Visual Studio Code и через инструмент запусть консоль.

  npm install --global npm@latest

  npm i -g yo gulp

  И установить шаблон SharePoint Framework

  npm i -g @microsoft/generator-sharepoint

• TypeScript (https://www.typescriptlang.org/)

  npm install -g typescript

  npm install typescript@next

Теперь создаем новый проект, предварительно создайте папку для новых решений и в консоли перейдите в эту папку. Выполняем команду yo

Выбираем наш шаблон и нажимаем далее

Указываем название нового проекта, название веб части и ждем установки.

Когда все установлено выполняем еще пару команд для добавления в проект AngularJS (https://angularjs.org/) и TypeScript definition

npm i angular -S

tsd install angular -s

Также добавляем в проект Office UI Fabric (https://dev.office.com/fabric) для дальнейшего использования стилей office 365

npm i angular ng-office-ui-fabric -S

Уже сейчас можно запустить и протестировать веб часть, используя Workbanch. Но есть одно но, может быть ошибка при открытии страницы, так как DNS не знает о вашем имени URL. Поэтому быстро можно просписать в файле hosts правильные настройки (https://www.imore.com/how-edit-your-macs-hosts-file-and-why-you-would-want)

gulp serveВсе настройки по портам и конфигарации можно найти в файле serve.jsonОткрываем наш файл веб части и добавим ссылки на нашы установленные компоненты в проектеimport styles from './SedIncomeAppWp.module.scss';import * as strings from 'sedIncomeAppWpStrings';// AngularJSimport * as angular from 'angular';// Office UI Fabricimport 'ng-office-ui-fabric';// ModuleLoaderimport ModuleLoader from '@microsoft/sp-module-loader';

Далее в конструктор добавляем ссылки на стили

ModuleLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.min.css');
ModuleLoader.loadCss('https://appsforoffice.microsoft.com/fabric/2.6.1/fabric.components.min.css');

Следующее, что нам нужно, это создать интерфейс для работы с нашим списком и описанием полей, которые мы будем получать и обрабатывать, в файле веб части добавляем пару строчек описания нашего списка

export interface ISPLists {
value: ISPList[];
}

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

Следующее, что нам необходимо, это создать некую тестовую модель для тестирования работы веб части, не используя SharePoint в качестве источника. Для этого необходимо создать новый файл в проекте и добавить в него описание методов с данными.

import { ISPList } from './SedIncomeAppWpWebPart';

export default class MockHttpClient {

private static _items: ISPList[] = [{ Title: 'Item 1', Id: '1' },
{ Title: 'Item 2', Id: '2' }];

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

То есть есть переменная в виде массива, в которой уже преднастроены данные для передачи в нашу веб часть и есть метод получения данных.

Следующий шаг это привязать наш класс к возможности использования в решении. Добавим строчку в файле веб части

import DataModel from './DataModel';

Также есть еще один момент, о котором необходимо знать. Если вы хотите использовать один и тот же проект и для тестирования и для работы уже в продуктиве, вы можете включить в проект один параметр

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

который помогает вам определить среду в которой идет работа над проектом. Существует 4 состояния этого параметра

1. Test
2. Local
3. SharePoint
4. ClassicSharePoint

Далее остается за малым. Создаем пару методов для обращения за данными

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

private _getSPListData(): Promise<ISPLists> {

return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/lists(guid'"+this.properties.listId+"')/items")
.then((response: Response) => {
return response.json();
});
}

Во втором методе используется параметр (свойство) listId, которой необходимо предварительно создать в методе propertyPaneSettings

PropertyPaneTextField('listId', {
label: "Income List Id"
})

А также описать в файле интерфейса свойств вашей веб части

export interface ISedIncomeAppWpWebPartProps {
description: string;
listId: string;
}

Если есть необходимость в указании значений по умолчанию, то это можно сделать в файле manifest вашей веб части

"preconfiguredEntries": [{
"groupId": "eda27d78-7eab-43a3-8603-c3e08c7259ab",
"group": { "default": "Under Development" },
"title": { "default": "SEDIncomeAppWP" },
"description": { "default": "SED APU Income Web Part SharePoint Framework" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "SEDIncomeAppWP",
"listId": "4d47112b-eb73-47c5-a6dc-c8517e528fcb"
}
}]

Далее создаем методы для render данных веб части

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

private _renderList(items: ISPList[]): void {
angular.module('ngrepeatSelect', [])
.controller('SEDIncomeAppController', ['$scope', function($scope) {

$scope.data = {
item: null,
availableOptions: items
};
}]);
// HTML разметка
this.domElement.innerHTML = require('./Layouts/IncomeTemplate.html');
angular.bootstrap(this.domElement, ['ngrepeatSelect']);
}

Во втором методе есть ссылка на шаблон отображения наших данных, который необходимо предварительно создать.

<div ng-controller="SEDIncomeAppController">
<form name="SEDIncomeAppForm">
<label for="repeatSelect"> Select your item: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.item">
<option ng-repeat="option in data.availableOptions" value="{{option.Id}}">{{option.Title}}</option>
</select>
</form>
<hr>
<tt>item = {{data.item | json}}</tt><br/>
</div>

Теперь можно решение компилировать и пакетировать и отправлять уже в SharePoint Online для тестирования. Для этого необходимо выполнить ряд команд

 gulp package-solution

После выполнения этой команды в проекте появиться файл с расширением spapp, который необходимо загрузить в SharePoint ../sites/../AppCatalog

После загрузки необходимо просто установить решение в нужный сайт и добавить на страницу веб часть.

Чтобы решение работало необходимо в консоли запустить команду

 gulp serve --nobrowser

так как веб часть использует локальный компьютер для обращения к файлам стилей и прочих необходимых компонентов. Для того, чтобы для этого использовать, например, Azure Blob можно выполнить ряд действий, которые хорошо описаны здесь - https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/deploy-web-part-to-cdn

Что еще нужно знать.

Тестирование можно делать, используя браузер отладчик или же Visual Studio Code. Более детально описано здесь - https://www.eliostruyf.com/how-to-debug-your-sharepoint-framework-web-part/

Если есть необходимость в использовании Git для версионности и управления исходным кодом, можно ознакомиться здесь - https://git-scm.com/download/mac

Больше информации можно найти здесь - https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview