Подключение клиентской веб-части к SharePoint (Hello World, часть 2)

Статья
03/21/2023

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

Вы также можете выполнить следующие действия, просмотрев это видео на канале YouTube Майкрософт 365 Platform Community (PnP):

Примечание.

В этой статье мы продолжим работу с веб-частью Hello World, создание которой показано в предыдущей статье Создание первой веб-части.

Запуск команды gulp serve

Убедитесь в том, что команда gulp serve запущена. В противном случае перейдите в каталог проекта helloworld-webpart и запустите ее, используя указанные ниже команды.

cd helloworld-webpart
gulp serve

Получение доступа к контексту страницы

Когда рабочая среда размещается в SharePoint, вы получаете доступ к контексту страницы с различными ключевыми свойствами, такими как:

название сайта;
абсолютный URL-адрес сайта;
URL-адрес относительно веб-сервера;
имя пользователя для входа.

Получение доступа к контексту страницы

Чтобы получить доступ к контекстной информации в веб-части, используйте в своем коде указанный ниже объект.

this.context.pageContext

В Visual Studio Code найдите &.\src\webparts\helloWorld\HelloWorldWebPart.ts.

В методе render() замените innerHTML блок кода следующим кодом:

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
</section>`;

Обратите внимание, что для вывода значения переменной в блоке HTML используется ${ }. Дополнительный HTML div используется для отображения this.context.pageContext.web.title.
Сохраните файл. Команда gulp serve, запущенная в консоли, определит эту операцию сохранения и сделает следующее:
- автоматически выполнит сборку и объединение в пакет обновленного кода.
Примечание.

Поместите окно консоли рядом с окном Visual Studio Code, чтобы видеть, как gulp автоматически выполняет компиляцию при сохранении изменений в Visual Studio Code.
Перейдите к версии Workbench, размещенной на сайте SharePoint. Полный URL-адрес: https://your-sharepoint-site-url/_layouts/workbench.aspx. Обновите размещенную рабочу среду, чтобы получить изменения из пакета кода после повторной сборки.

Теперь, когда веб-части доступен контекст страницы, в ней появится название сайта SharePoint.

Определение модели списка

Чтобы начать работу с данными списка SharePoint, нужна модель списка. Для получения списков нужны две модели.

В Visual Studio Code найдите и откройте файл src\webparts\helloWorld\HelloWorldWebPart.ts.
Определите следующие интерфейсы непосредственно перед объявлением класса HelloWorldWebPart:
```
export interface ISPLists {
  value: ISPList[];
}

export interface ISPList {
  Title: string;
  Id: string;
}
```
Интерфейс ISPList содержит данные списков SharePoint, к которым мы подключаемся.

Получение списков с сайта SharePoint

Далее нужно получить списки с текущего сайта. Чтобы получить списки с сайта, расположенные в https://yourtenantprefix.sharepoint.com/_api/web/lists, нужно использовать REST API SharePoint.

Платформа SharePoint Framework включает вспомогательный класс spHttpClient для выполнения запросов REST API к SharePoint. Он добавляет заголовки по умолчанию, управляет дайджестом, необходимым для записей, и собирает данные телеметрии, которые помогают службе отслеживать производительность приложения.

Чтобы использовать этот вспомогательный класс, импортируйте их из модуля.@microsoft/sp-http

Прокрутите к началу файла HelloWorldWebPart.ts.
Найдите строку import * as strings from 'HelloWorldWebPartStrings'; и добавьте следующий код сразу после нее:
```
import {
  SPHttpClient,
  SPHttpClientResponse
} from '@microsoft/sp-http';
```
Добавьте приведенный ниже метод для получения списков из SharePoint в класс HelloWorldWebPart.
```
private _getListData(): Promise<ISPLists> {
  return this.context.spHttpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$filter=Hidden eq false`, SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      return response.json();
    })
    .catch(() => {});
}
```
Этот метод использует вспомогательный класс spHttpClient и отправляет запрос HTTP GET. Он использует интерфейс ISPLists, а также применяет фильтр, чтобы не получать скрытые списки.
Сохраните файл.
Перейдите в окно консоли, в котором запущена команда gulp serve, и проверьте наличие ошибок. Если gulp сообщит об ошибках, их нужно исправить.

Добавление новых стилей

Платформа SharePoint Framework использует Sass в качестве препроцессора CSS и синтаксис SCSS, который полностью совместим со стандартным синтаксисом CSS. Sass расширяет язык CSS и позволяет использовать такие возможности, как переменные, вложенные правила и встроенные операции импорта, для упорядочения и создания эффективных таблиц стилей для веб-частей. SharePoint Framework уже поставляется с компилятором SCSS, который преобразует файлы Sass в обычные CSS-файлы, а также предоставляет типизированные версии для использования во время разработки.

Добавление новых стилей

Откройте HelloWorldWebPart.module.scss. В этом SCSS-файле можно задавать стили.

По умолчанию стили действуют на уровне веб-части. Это видно, так как стили задаются в разделе .helloWorld.

Добавьте следующие стили после стиля .links:

.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 перестраивает код в консоли, как только вы сохраняете файл. При этом создаются соответствующие определения типов в файле HelloWorldWebPart.module.scss.ts. После компиляции для TypeScript вы можете импортировать эти стили и ссылаться на них в коде веб-части.

Совет

Этот файл создается в динамическом режиме при создании проекта. Он скрыт из представления обозревателя VS Code с помощью файла .vscode/settings.json.

Это видно в методе render() веб-части:
```
<div class="${styles.welcome}">
```

Отрисовка информации списков

Откройте класс HelloWorldWebPart.

Примечание.

SharePoint Framework предоставляет возможности для определения сведений о среде и местоположении узла с помощью свойства isServedFromLocalhost или сведений о EnvironmentType. В этом случае мы сосредоточимся на подключении к данным на сайте, на котором размещена веб-среда.

Добавьте следующий частный метод в класс 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>`;
  });

  if(this.domElement.querySelector('#spListContainer') != null) {
    this.domElement.querySelector('#spListContainer')!.innerHTML = html;
  }
}

Этот метод ссылается на новые стили CSS, добавленные с помощью переменной styles, и используется для отображения сведений о списке, полученных от REST API.

Сохраните файл.
Добавьте следующий частный метод в класс HelloWorldWebPart для вызова метода и получения данных списков:
```
private _renderListAsync(): void {
  this._getListData()
    .then((response) => {
      this._renderList(response.value);
    })
    .catch(() => {});
}
```
Сохраните файл.

Получение данных списков

Перейдите к методу render() и замените код в нем следующим кодом:

this.domElement.innerHTML = `
<section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
  <div class="${styles.welcome}">
    <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
    <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
    <div>${this._environmentMessage}</div>
  </div>
  <div>
    <h3>Welcome to SharePoint Framework!</h3>
    <div>Web part description: <strong>${escape(this.properties.description)}</strong></div>
    <div>Web part test: <strong>${escape(this.properties.test)}</strong></div>
    <div>Loading from: <strong>${escape(this.context.pageContext.web.title)}</strong></div>
  </div>
  <div id="spListContainer" />
</section>`;

this._renderListAsync();

Сохраните файл.

Обратите внимание на перестроение кода в окне консоли gulp serve. Убедитесь, что нет ошибок.
Если вы используете SharePoint Framework 1.12.1 или более ранней версии (например, работаете на локальном сервере SharePoint Server), перейдите в локальную рабочую среду и добавьте веб-часть HelloWorld.

Должны появиться возвращаемые данные списка.
Теперь вы можете остановить работу сервера. Перейдите в консоль и остановите выполнение команды gulp serve. Нажмите клавиши CTRL+C, чтобы остановить выполнение задачи gulp.

Дальнейшие действия

Поздравляем: вы подключили веб-часть к данным списков SharePoint!

Вы можете продолжить создание веб-части Hello World в следующей статье Развертывание веб-части на странице SharePoint. вы узнаете, как развернуть и просмотреть веб-часть Hello World на странице SharePoint.

Поделиться через

Подключение клиентской веб-части к SharePoint (Hello World, часть 2)

Запуск команды gulp serve

Получение доступа к контексту страницы

Получение доступа к контексту страницы

Определение модели списка

Получение списков с сайта SharePoint

Чтобы использовать этот вспомогательный класс, импортируйте их из модуля.@microsoft/sp-http

Добавление новых стилей

Добавление новых стилей

Отрисовка информации списков

Получение данных списков

Дальнейшие действия

Дополнительные ресурсы