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

Добавление поддержки основных действий

  • Статья

Осторожностью

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

Для производственных сред рекомендуется использовать версию SPFx, указанную в разделе Как настроить среду разработки SharePoint Framework.

Сегодня пользователям необходимо знать о панелях свойств веб-частей, чтобы узнать дополнительные параметры, которые предоставляет каждая веб-часть. Это общий элемент обратной связи, когда пользователи хотят, чтобы действия всплыли в контексте, где они находятся, без необходимости полагаться на открытие чего-то, чтобы добраться до этих вариантов. Таким образом, теперь мы можем отображать наиболее распространенные конфигурации из панели свойств веб-части непосредственно на панели инструментов веб-части. Эти распространенные конфигурации называются главными действиями веб-части.

Важно!

Эта функция по-прежнему находится в состоянии предварительной версии в составе выпуска 1.16 и не должна использоваться в рабочей среде. Мы планируем официально выпустить их в рамках предстоящего выпуска 1.17. На момент написания этой статьи основные действия поддерживали отрисовку только команды раскрывающегося списка и кнопки.

Пример основных действий

Начало работы

Совет

В этих инструкциях предполагается, что вы знаете, как создать веб-часть hello world.

Определение конфигураций основных действий

В приведенном ниже примере мы определяем функцию обратного вызова, которая будет использоваться для извлечения конфигураций для команд Top Action.

Примечание.

getTopActionsConfiguration должен быть определен как общедоступный в классе веб-части.

import { ITopActions } from '@microsoft/sp-top-actions';

public getTopActionsConfiguration(): ITopActions | undefined {
  return {
    topActions: [],
    onExecute: (actionName: string, newValue: any) => {}
  };
}

Определение пользовательского интерфейса панели инструментов

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

import { PropertyPaneFieldType } from '@microsoft/sp-property-pane';

return {
  topActions: [
    {
      targetProperty: 'reset',
      properties: {
        icon: 'Reset'
      },
      type: PropertyPaneFieldType.Button
    }
  ]
  ...
}

Выполнение команды при взаимодействии пользователя

На предыдущем шаге было показано, как получить кнопку для отображения на панели инструментов веб-части. Теперь мы будем выполнять действие, когда пользователь нажимает кнопку. Обратите внимание, что actionName на последнем шаге было определено как targetProperty , и так как это кнопка, мы можем игнорировать newValue входящее.

return {
  ...
  onExecute: (actionName: string, newValue: any) => {
    if (actionName === 'reset') {
      // user defined logic to reset the web part
      this.reset();
    }
  }
}

Совет

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

Фрагменты кода

Команда "Кнопка"

Тип взаимодействия для кнопки аналогичен кнопке панели свойств (IPropertyPaneButtonProps).

import { ITopActions } from '@microsoft/sp-top-actions';
import { PropertyPaneFieldType } from '@microsoft/sp-property-pane';
...
public getTopActionsConfiguration(): ITopActions | undefined {
  return {
    topActions: [
      {
        targetProperty: 'reset',
        type: PropertyPaneFieldType.Button,
        properties: {
          icon: 'Reset'
        }
      }
    ],
    onExecute: (actionName: string, newValue: any) => {
      if (actionName === 'reset') {
        // user defined logic to reset the web part
        this.reset();
      }
    }
  };
}

Интерфейс типа для раскрывающегося списка аналогичен группе выбора панели свойств (IPropertyPaneChoiceGroupOption).

import { ITopActions } from '@microsoft/sp-top-actions';
import { PropertyPaneFieldType } from '@microsoft/sp-property-pane';
...
public getTopActionsConfiguration(): ITopActions | undefined {
  return {
    topActions: [{
      targetProperty: 'layout',
      type: PropertyPaneFieldType.ChoiceGroup,
      properties: {
        options: [
          {
            // key maps to newValue in onExecute
            key: 'card',
            text: 'Card Layout',
            imageSize: { width: 32, height: 32 },
            iconProps: { officeFabricIconFontName: 'ArticlesIcon' },
            checked: this.state.layout === 'card'
          },
          {
            key: 'list',
            text: 'List Layout',
            imageSize: { width: 32, height: 32 },
            // you can use iconProps, icon to define icons
            icon: 'List',
            checked: this.state.alignment === 'list'
          }
        ]
      }
    }],
    // for ChoiceGroup drop-down, the newValue tells us which option's key was selected
    onExecute: (actionName: string, newValue: any) => {
      if (actionName === 'layout') {
        this.setLayout(newValue);
        this.render();
      }
    }
  };
}

Расширенные конфигурации

Дополнительные конфигурации основных команд действий см. в определениях типов из @microsoft/sp-property-pane и @microsoft/sp-top-actions. В настоящее время две поддерживаемые основные команды действий, кнопка и раскрывающийся список, можно определить с помощью подмножества типов IPropertyPaneChoiceGroupOption и IPropertyPaneButtonProps.

  • Для IPropertyPaneButtonPropsв настоящее время поддерживаемыми свойствами являются icon, text, ariaLabel, . disabled
  • Для IPropertyPaneChoiceGroupOptionв настоящее время поддерживается options porperty, а из этого массива мы поддерживаем key, text, iconProps.officeFabricIconFontName, imageSize, , checked, . title
import { IPropertyPaneButtonProps, IPropertyPaneChoiceGroupOption } from '@microsoft/sp-property-pane'
import { ITopActions } from '@microsoft/sp-top-actions';

Посмотреть больше

API top ActionsIPropertyPaneButtonPropsIPropertyPaneChoiceGroupOption