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

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

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

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

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

cd helloworld-webpart
gulp serve

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

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

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

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

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

this.context.pageContext

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

2. В методе 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>`;
   

3. Обратите внимание, что для вывода значения переменной в блоке HTML используется ${ }. Дополнительный HTML div используется для отображения this.context.pageContext.web.title.

4. Сохраните файл. Команда gulp serve, запущенная в консоли, определит эту операцию сохранения и сделает следующее:

   • автоматически выполнит сборку и объединение в пакет обновленного кода.

   Примечание.

   Поместите окно консоли рядом с окном Visual Studio Code, чтобы видеть, как gulp автоматически выполняет компиляцию при сохранении изменений в Visual Studio Code.

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

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

   

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

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

1. В Visual Studio Code найдите и откройте файл src\webparts\helloWorld\HelloWorldWebPart.ts.

2. Определите следующие интерфейсы непосредственно перед объявлением класса 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

1. Прокрутите к началу файла HelloWorldWebPart.ts.

2. Найдите строку import * as strings from 'HelloWorldWebPartStrings'; и добавьте следующий код сразу после нее:

   import {
     SPHttpClient,
     SPHttpClientResponse
   } from '@microsoft/sp-http';
   

3. Добавьте приведенный ниже метод для получения списков из 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, а также применяет фильтр, чтобы не получать скрытые списки.

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

5. Перейдите в окно консоли, в котором запущена команда gulp serve, и проверьте наличие ошибок. Если gulp сообщит об ошибках, их нужно исправить.

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

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

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

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

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

2. Добавьте следующие стили после стиля .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;
   }
   

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

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

   Совет

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

   Это видно в методе render() веб-части:

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

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

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

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

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

3. Добавьте следующий частный метод в класс HelloWorldWebPart для вызова метода и получения данных списков:

   private _renderListAsync(): void {
     this._getListData()
       .then((response) => {
         this._renderList(response.value);
       })
       .catch(() => {});
   }
   

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

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

1. Перейдите к методу 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();
   

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

   Обратите внимание на перестроение кода в окне консоли gulp serve. Убедитесь, что нет ошибок.

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

   Должны появиться возвращаемые данные списка.

   

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

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

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

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