Übung – Anpassen von Listen mit Befehlssatzerweiterungen
- 16 Minuten
In dieser Übung erstellen Sie eine SharePoint Framework-Befehlssatzerweiterung (SPFx), die benutzerdefinierte Schaltflächen in einer SharePoint-Liste anzeigt.
Voraussetzungen
Wichtig
In den meisten Fällen ist die Installation der neuesten Versionen folgender Tools die beste Option. Die hier aufgeführten Versionen wurden verwendet, als dieses Modul veröffentlicht und zuletzt getestet wurde.
- Node.js v22.*
- Gulp-cli v3.*
- Yeoman v5.*
- Yeoman-Generator für SharePoint v1.21.1
- Visual Studio Code
Erstellen eines neuen SharePoint-Framework-Projekts
Öffnen Sie eine Eingabeaufforderung, und wechseln Sie zu dem Ordner, in dem Sie das Projekt erstellen möchten.
Führen Sie den SharePoint-Yeoman-Generator aus, indem Sie den folgenden Befehl ausführen:
yo @microsoft/sharepoint
Gehen Sie folgendermaßen vor, um die angezeigte Eingabeaufforderung abzuschließen (wenn weitere Optionen angezeigt werden, übernehmen Sie die Standardantwort):
- Wie lautet der Name der Projektmappe?: SPFxCommandSet
- Welchen Typ von clientseitiger Komponente möchten Sie erstellen?: Erweiterung
- Welche Art von clientseitiger Erweiterung soll erstellt werden?: ListView-Befehlssatz
- Wie lautet der Name des Befehlssatzes?: CommandSetDemo
Nach der Bereitstellung der für das Projekt erforderlichen Ordner installiert der Generator alle Abhängigkeitspakete, indem npm install automatisch ausgeführt wird. Wenn NPM das Herunterladen aller Abhängigkeiten abgeschlossen hat, öffnen Sie den Projektordner in Visual Studio Code.
Definieren der Schaltflächen für den Befehlssatz
Der erste Schritt zum Erstellen einer Befehlssatzerweiterung besteht darin, die Schaltflächen zu definieren. Schaltflächen sind in der Manifestdatei der Komponente definiert.
Suchen und öffnen Sie die Datei ./src/extensions/commandSetDemo/CommandSetDemoCommandSet.manifest.json. Ersetzen Sie die vorhandene items-Eigenschaft durch den folgenden JSON-Code:
"items": {
"ONE_ITEM_SELECTED": {
"title": { "default": "One Item Selected" },
"iconImageUrl": "icons/request.png",
"type": "command"
},
"TWO_ITEM_SELECTED": {
"title": { "default": "Two Items Selected" },
"iconImageUrl": "icons/cancel.png",
"type": "command"
},
"ALWAYS_ON": {
"title": { "default": "Always On" },
"iconImageUrl": "icons/cancel.png",
"type": "command"
}
}
Aktualisieren des Codes des Befehlssatzes
Nachdem Sie die Schaltflächen definiert haben, besteht der nächste Schritt darin, den Code zur Implementierung der Erweiterung zu schreiben.
Suchen und öffnen Sie die Datei ./src/extensions/commandSetDemo/CommandSetDemoCommandSet.ts. Suchen Sie die Benutzeroberfläche ICommandSetDemoCommandSetProperties, und fügen Sie für deren Mitglieder den folgenden Code hinzu:
messagePrefix: string;
Suchen Sie die Methode onInit() in der CommandSetDemoCommandSet-Klasse und ersetzen Sie deren Inhalt durch den folgenden Code. Dieser Code steuert, was geschieht, wenn die Erweiterung initialisiert wird.
Log.info(LOG_SOURCE, 'Initialized CommandSetDemoCommandSet');
const one_item_selected: Command = this.tryGetCommand('ONE_ITEM_SELECTED');
one_item_selected.visible = false;
const two_item_selected: Command = this.tryGetCommand('TWO_ITEM_SELECTED');
two_item_selected.visible = false;
this.context.listView.listViewStateChangedEvent.add(this, this._onListViewStateChanged);
return Promise.resolve();
Suchen Sie den Ereignishandler _onListViewStateChanged in der CommandSetDemoCommandSet -Klasse, und ersetzen Sie dessen Inhalt durch den folgenden Code. Mit diesem Code werden je nach Anzahl der Elemente, die in der Liste ausgewählt sind, zwei Schaltflächen ein- bzw. ausgeblendet.
Log.info(LOG_SOURCE, 'List view state changed');
const one_item_selected: Command = this.tryGetCommand('ONE_ITEM_SELECTED');
if (one_item_selected) {
one_item_selected.visible = this.context.listView.selectedRows?.length === 1;
}
const two_item_selected: Command = this.tryGetCommand('TWO_ITEM_SELECTED');
if (two_item_selected) {
two_item_selected.visible = this.context.listView.selectedRows?.length === 2;
}
// You should call this.raiseOnChange() to update the command bar
this.raiseOnChange();
Suchen Sie die Methode onExecute() in der CommandSetDemoCommandSet-Klasse und ersetzen Sie deren Inhalt durch den folgenden Code. Dieser Code definiert, was bei Auswahl einer benutzerdefinierten Schaltfläche passiert.
/* eslint-disable @typescript-eslint/no-floating-promises */
switch (event.itemId) {
case 'ONE_ITEM_SELECTED':
Dialog.alert(`${this.properties.messagePrefix} ONE_ITEM_SELECTED command checked; Title = ${event.selectedRows[0].getValueByName('Title')}`);
break;
case 'TWO_ITEM_SELECTED':
Dialog.alert(`${this.properties.messagePrefix} TWO_ITEM_SELECTED command checked; Title = ${event.selectedRows[event.selectedRows.length-1].getValueByName('Title')}`);
break;
case 'ALWAYS_ON':
Dialog.alert(`${this.properties.messagePrefix} ALWAYS_ON command checked. Total selected: ${event.selectedRows.length}`);
break;
default:
throw new Error('Unknown command');
}
/* eslint-enable @typescript-eslint/no-floating-promises */
Aktualisieren der Bereitstellungskonfiguration
Wenn Befehlssätze bereitgestellt werden, fügen sie eine neue benutzerdefinierte Aktion hinzu, die mit dem Skript in der Bundledatei des Befehlssatzes verknüpft ist.
Suchen und öffnen Sie die Datei ./sharepoint/assets/elements.xml. Aktualisieren Sie die Eigenschaft ClientSideComponentProperties für das <CustomAction>-Element, und legen Sie die Werte für die öffentlichen Eigenschaften im Befehlssatz fest:
ClientSideComponentProperties="{"messagePrefix":"[command_set_prefix]"}"
Testen des Befehlssatzes
Navigieren Sie in einem Browser zu einer SharePoint Online-Websitesammlung, in der Sie in der vorherigen Übung die Liste Arbeitsstatus erstellt haben. Wählen Sie im linken Navigationsmenü den Link Websiteinhalte aus. Wählen Sie die Liste Arbeitsstatus aus:
Um die Erweiterung zu testen, müssen Sie die Konfigurationsdatei serve.json ändern. Öffnen Sie die Datei ./config/serve.json. Suchen Sie die Eigenschaft serveConfigurations.default.pageUrl. Es ist derzeit mit einer Platzhalter-URL konfiguriert.
"pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
Die {tenantDomain} Zeichenfolge wird automatisch durch den gulp serve-Task mithilfe einer Umgebungsvariablen auf Ihrer Arbeitsstation ersetzt. Legen Sie die Umgebungsvariable SPFX_SERVE_TENANT_DOMAIN auf die Domäne Ihrer gehosteten SharePoint Online-Website fest, die Sie zum Testen verwenden möchten.
Tipp
Erfahren Sie mehr über das Festlegen von Umgebungsvariablen auf der Entwicklungsplattform Ihrer Wahl:
Windows: Festlegen (Umgebungsvariable)macOS: Verwenden von Umgebungsvariablen im Terminal auf dem MacFestlegen der SharePoint-Framework Hosted Workbench-Testwebsite
Aktualisieren Sie den verbleibenden Teil der URL mit dem Pfad zur seite AllItems.aspx für die Liste, die Sie in der vorherigen Übung erstellt haben. Wenn Sie beispielsweise über eine Entwicklerwebsite mit der Homepage-URL verfügen https://contoso.sharepoint.com/sites/DeveloperSite/Lists/Work%20Stsatus/AllItems.aspx, aktualisieren Sie alle pageUrl Eigenschaften in dieser Datei, um den Pfad zu dieser Seite wie folgt einzuschließen:
"pageUrl": "https://{tenantDomain}/sites/DeveloperSite/Lists/Work%20Stsatus/AllItems.aspx",
Suchen Sie das serveConfigurations.default.customActions.properties-Objekt.
Ersetzen Sie den Wert des properties-Objekts durch den folgenden JSON-Code:
"properties": {
"messagePrefix": "[command_set_prefix]"
}
Starten Sie das Projekt, indem Sie den folgenden Befehl ausführen:
gulp serve
Wenn Sie dazu aufgefordert werden, wählen Sie die Schaltfläche Debug-Skripts laden aus.
Nach dem Laden der Seite wird auf der Symbolleiste eine neue Schaltfläche angezeigt. Wenn Sie die Schaltfläche Always On auswählen, werden in einem Dialogfeld eine Meldung und die Anzahl der ausgewählten Elemente angezeigt. Wenn die Schaltflächen nicht angezeigt werden, kehren Sie zur Eingabeaufforderung zurück, warten Sie, bis der Vorgang abgeschlossen ist, und aktualisieren Sie dann.
Wählen Sie ein Element in der Liste aus. Eine neue Schaltfläche wird angezeigt. Wählen Sie die Schaltfläche aus. Daraufhin sollte das Dialogfeld folgendermaßen aussehen:
Wählen Sie ein zweites Element in der Liste aus. Eine neue Schaltfläche wird angezeigt. Wählen Sie die Schaltfläche aus. Daraufhin sollte das Dialogfeld folgendermaßen aussehen:
Beenden Sie den lokalen Webserver, indem Sie in der Eingabeaufforderung STRG+C drücken.
Zusammenfassung
In dieser Übung haben Sie eine SharePoint-Framework-Befehlssatzerweiterung (SPFx) erstellt, die benutzerdefinierte Schaltflächen in einer SharePoint-Liste anzeigt.
Testen Sie Ihr Wissen
Feedback
War diese Seite hilfreich?
No
Benötigen Sie Hilfe zu diesem Thema?
Möchten Sie versuchen, Ask Learn zu verwenden, um Sie durch dieses Thema zu klären oder zu leiten?