Hinzufügen von Unterstützung für Top Actions

Heutzutage müssen Benutzer die Webpart-Eigenschaftenbereiche kennen, um die zusätzlichen Optionen zu ermitteln, die jedes Webpart bietet. Dies ist ein gängiges Feedback, bei dem Benutzer Aktionen im Kontext ihrer Position anzeigen möchten, ohne sich darauf verlassen zu müssen, etwas zu öffnen, um zu diesen Optionen zu gelangen. Aus diesem Grund ermöglichen wir jetzt, die am häufigsten verwendeten Konfigurationen aus dem Eigenschaftenbereich eines Webparts direkt auf der Symbolleiste des Webparts anzuzeigen. Diese allgemeinen Konfigurationen werden als die wichtigsten Aktionen des Webparts bezeichnet.

Erste Schritte

Definieren Ihrer Konfigurationen für die wichtigste Aktion

Im folgenden Beispiel definieren wir die Rückruffunktion, die zum Pullen der Konfigurationen für unsere Befehle mit der obersten Aktion verwendet wird.

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

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

Definieren der Benutzeroberfläche ihrer Symbolleiste

Das topActions Array ist eine sortierte Liste von Steuerelementen, die in der Webpartsymbolleiste gerendert werden sollen. Im folgenden Beispiel definieren wir eine oberste Aktion als Schaltflächenschnittstelle.

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

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

Führen Sie den Befehl aus, wenn der Benutzer interagiert

Im vorherigen Schritt wurde gezeigt, wie Sie eine Schaltfläche abrufen, die auf der Symbolleiste des Webparts angezeigt wird. Jetzt führen wir eine Aktion aus, wenn der Benutzer die Schaltfläche auswählt. Beachten Sie, dass actionName im letzten Schritt als targetProperty definiert wurde, und da dies eine Schaltfläche ist, können wir den newValue ein- und aus ignorieren.

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

Codeausschnitte

Schaltflächenbefehl

Die Typinterace für eine Schaltfläche ähnelt der Schaltfläche des Eigenschaftenbereichs (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();
      }
    }
  };
}

Dropdownbefehl

Die Typschnittstelle für eine Dropdownliste ähnelt der Auswahlgruppe des Eigenschaftenbereichs (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();
      }
    }
  };
}

Erweiterte Konfigurationen

Wenn Sie erweiterte Konfigurationen Ihrer wichtigsten Aktionsbefehle erhalten möchten, sehen Sie sich die Typdefinitionen aus und @microsoft/sp-top-actionsan@microsoft/sp-property-pane. Derzeit können die beiden unterstützten Top-Aktionsbefehle, Schaltfläche und Dropdown, mithilfe einer Teilmenge der Typen IPropertyPaneChoiceGroupOption und IPropertyPaneButtonPropsdefiniert werden.

• Für IPropertyPaneButtonPropssind icondie derzeit unterstützten Eigenschaften , text, , ariaLabel, disabled
• Für IPropertyPaneChoiceGroupOptionist options der derzeit unterstützte Porperty, und aus diesem Array unterstützen keywir , text, iconProps.officeFabricIconFontName, imageSize, , checkedtitle

import { IPropertyPaneButtonProps, IPropertyPaneChoiceGroupOption } from '@microsoft/sp-property-pane'
import { ITopActions } from '@microsoft/sp-top-actions';

Weitere Informationen

Top Actions APIIPropertyPaneButtonPropsIPropertyPaneChoiceGroupOption