Сделайте клиентскую веб-часть SharePoint настраиваемой

С помощью области свойств пользователи могут настраивать различные свойства веб-части. В статье Создание первой веб-части рассказывается, как определить область свойств в классе HelloWorldWebPart. Свойства для области свойств определяются в propertyPaneSettings.

Область свойств содержит страницу, необязательный заголовок и как минимум одну группу.

• Элементы pages позволяют разделять сложные взаимодействия, добавляя их на одну или несколько страниц. Элементы pages содержат элементы header и groups.
• Элементы header позволяют определить заголовок области свойств.
• Элементы groups позволяют определить различные разделы или поля для группировки наборов полей в области свойств.

На представленном ниже рисунке показан пример области свойств в SharePoint.

Настройка области свойств

В приведенном ниже примере кода инициализируется и настраивается область свойств для веб-части. Вы переопределяете метод getPropertyPaneConfiguration() и возвращаете коллекцию страниц области свойств.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
  return {
    pages: [
      {
        header: {
          description: strings.PropertyPaneDescription
        },
        groups: [
          {
            groupName: strings.BasicGroupName,
            groupFields: [
              PropertyPaneTextField('description', {
                label: strings.DescriptionFieldLabel
              })
            ]
          }
        ]
      }
    ]
  };
}

Поля области свойств

Поддерживаемые типы полей представлены ниже.

• Кнопка
• Флажок
• Группа выбора
• Раскрывающийся список
• Горизонтальная линейка
• Метка
• Ссылка
• Ползунок
• Текстовое поле
• Многострочное текстовое поле
• Переключатель
• Пользовательский сервер

Типы полей доступны в виде модулей в @microsoft/sp-property-pane. Чтобы использовать объекты в веб-частях, необходимо импортировать их в модуль:

import {
  PropertyPaneTextField,
  PropertyPaneCheckbox,
  PropertyPaneLabel,
  PropertyPaneLink,
  PropertyPaneSlider,
  PropertyPaneToggle,
  PropertyPaneDropdown
} from '@microsoft/sp-property-pane';

Примечание.

Объекты области свойств были разделены на собственный модуль @microsoft/sp-property-pane в выпуске SharePoint Framework версии 1.9. До этого они были включены в модуль @microsoft/sp-webpart-base .

Метод определения каждого типа поля приведен ниже (для примера используется тип PropertyPaneTextField).

PropertyPaneTextField('targetProperty',{
  //field properties are defined here
})

targetProperty определяет связанное открытое свойство веб-части для этого типа поля, а также определяется в интерфейсе свойств веб-части.

Чтобы назначить типы этим свойствам, определите в классе веб-части интерфейс, включающий одно или несколько целевых свойств.

export interface IHelloWorldWebPartProps {
  targetProperty: string
}

В веб-части можно получить к нему доступ с помощью this.properties.targetProperty.

<p class="ms-font-l ms-fontColor-white">${escape(this.properties.targetProperty)}</p>

Когда свойства заданы, вы можете получить к ним доступ в веб-части, используя this.properties.[property-name]. Более подробные сведения см. в статье Создание веб-части HellowWorld: метод веб-части render().

Обработка изменений полей

У области свойств есть два режима взаимодействия:

• Реактивный
• Нереактивный

В реактивном режиме при каждом изменении в элементе управления полем в области свойств вызывается событие изменения. В этом режиме свойство веб-части автоматически обновляется в соответствии с новыми значениями. Реактивный режим является режимом по умолчанию для веб-частей.

Хотя реактивного режима достаточно для многих сценариев, иногда требуется нереактивное поведение. В нереактивном режиме веб-часть не обновляется автоматически, если пользователь не подтвердит изменения.

Чтобы включить нереактивный режим, добавьте в веб-часть следующий код:

protected get disableReactivePropertyChanges(): boolean {
  return true;
}

Пользовательские элементы управления для области свойств

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

См. также

• Обзор SharePoint Framework