Быстрое погружение в 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 состояния этого параметра
- Test
- Local
- SharePoint
- 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