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


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

Подключите веб-часть к 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
  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 на сайте 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.

Примечание.

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

  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.

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

    Отрисовка данных списков из localhost

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

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

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

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