Das bearbeitbare Rastersteuerelement anpassen

Artikel
05/03/2023

Das Power Apps-Rastersteuerelement verwendet moderne Microsoft Fluent-Steuerelemente, damit Benutzer Werte in Rasterzellen anzeigen und bearbeiten können. Es können Szenarien existieren, die spezielle Anforderungen haben, die eine Änderung der sofort einsatzbereiten visuellen Elemente und Benutzerinteraktionen erfordern. Um dies zu erleichtern, bietet das Power Apps-Rastersteuerelement Erweiterbarkeits-APIs, mit denen die Raster-Schnittstelle angepasst werden kann. Mithilfe dieser APIs können Hersteller ein Rasteranpassungssteuerelement (Codekomponente) implementieren, um dem Raster benutzerdefinierte Zellenrenderer- und -editorkomponenten bereitzustellen.

Anpassungssteuerelement für das Raster

Eine Rasteranpassung ist ein PCF-Steuerelement, das die Anpassungsschnittstelle für das Power Apps Rastersteuerelement implementiert. Mit dieser Schnittstelle können Sie das React-Element definieren, das gerendert wird, wenn sich eine Rasterzelle im schreibgeschützten Modus befindet (der Zellenrenderer) oder im Bearbeitungsmodus (der Zelleneditor). In einer Umgebung können mehrere Rasteranpassungs-Steuerelemente vorhanden sein, aber jedem Raster kann nur ein einziges Rasteranpassungs-Steuerelement zugewiesen werden. Sie können entscheiden, dass für jedes Raster, das Sie ändern möchten, ein separates Anpassungssteuerelement benötigt wird, oder Sie können dasselbe Anpassungssteuerelement für mehrere Raster wiederverwenden.

Implementieren eines Rasteranpassungs-Steuerelements

Um ein Rasteranpassungssteuerelement zu implementieren, müssen Sie sich zunächst mit den Schritten zum Erstellen und Entwickeln einer Code-Komponente vertraut machen, und Sie müssen Zugriff auf das Vorlagensteuerelement haben.

Das Vorlagensteuerelement ist in den PowerApps-Beispielen im GitHub-Repository enthalten. Sie müssen das Repository klonen oder herunterladen, um auf die Dateien zuzugreifen, die sich hier befinden: PowerApps-Samples/component-framework/resources/GridCustomizerControlTemplate

Öffnen Sie den GridCustomizerControlTemplate-Ordner mit Visual Studio Code.
Führen Sie in einem Terminal-Fenster npm install aus.
Erstellen Sie Ihre benutzerdefinierten Zellenrenderer und -editoren.

Der Anpassungscode befindet sich im Ordner customizers.
- CellRendererOverrides.tsx enthält Anpassungsfunktionen für Zellrenderer pro Datentyp.
- CellEditorOverrides.tsx enthält Anpassungsfunktionen für Zelleditoren pro Datentyp.
Ändern Sie diese Dateien, um react-Elemente hinzuzufügen, die gerendert werden sollen, wenn sich eine Zelle im schreibgeschützten Modus (Zellenrenderer) oder im Bearbeitungsmodus (Zelleneditor) befindet.

Jede Datei exportiert ein Objekt, das den Spaltendatentyp einer Funktion zuordnet, die ein react-Element zurückgibt, das in den Zellen für diesen Spaltentyp gerendert werden soll.
```
/**
 * Provide cell renderer overrides per column data type.
*/
 export interface CellRendererOverrides {
   [dataType: string]: (props: CellRendererProps, rendererParams: GetRendererParams)
   => React.ReactElement | null | undefined; 
};

/**
 * Provide cell editor overrides per column data type.
*/
 export interface CellEditorOverrides {
   [dataType: string]: (defaultProps: CellEditorProps, rendererParams: GetEditorParams)
   => React.ReactElement | null | undefined; 
};
```
Hinweis

Wenn die Funktion null oder undefiniert zurückgibt, verwendet das Raster den internen Renderer/Editor für die Zielzellen.
Nachdem Sie Ihre benutzerdefinierten Renderer und Editoren für Zellen definiert haben, verpacken Sie das Rasteranpassungssteuerelement und importieren Sie es in die Power Apps-Umgebung. Alternativ können Sie den pac pcf push-Befehle verwenden.
Öffnen Sie nach dem Veröffentlichen des Rasteranpassungssteuerelements den Bereich System anpassen im Menü Einstellungen > Anpassungen.
Wählen Sie im Entitätenknoten eine Entität aus, auf die Ihr Anpassungssteuerelement abzielt (z. B. Konto).
Wählen Sie im rechten Bereich die Registerkarte Steuerelemente aus.
Fügen Sie aus der Liste Steuerelemente das Power Apps-Steuerelement hinzu.
Legen Sie im Bereich Eigenschaften die Eigenschaft Anpassungssteuerelement auf den vollständigen logischen Namen Ihrer Rasteranpassungs-Codekomponente fest.

Vollständiger logischer Name = {publisher prefix}_{namespace}.{control name}
Speichern und veröffentlichen Sie Ihre Anpassungen für diese Entität.
Testen Sie Ihre Anpassung, indem Sie das Hauptraster für die angepasste Entität öffnen.
Wiederholen Sie die Schritte 6 bis 11 für alle anderen Entitäten, deren Raster ein Rasteranpassungssteuerelement benötigt.

Best Practices

Zellrenderer und -Editoren sind Komponenten der Benutzeroberfläche. Verwenden Sie sie nicht, um Daten oder Metadaten des Rasters zu mutieren.
Die Steuerelemente für die Anpassung sollten leicht und schnell sein, um die Gesamtleistung des Rasters nicht zu beeinträchtigen.
Um die Designkonsistenz beizubehalten, folgen Sie Prinzipien für fließende Gestaltung und verwenden Sie Fließende Steuerelemente in Ihren Anpassungen.
Stellen Sie sicher, dass auf Ihren benutzerdefinierten Renderer oder Editor zugegriffen werden kann.
Die Funktion für die Anpassung sollte rein sein, da das Raster sie mehrmals aufruft, um angepasste Elemente abzurufen, und erwartet, dass der Rückgabewert konsistent ist.
Das Raster kann jederzeit über ein Anpassungselement verfügen und jederzeit ein neues abrufen. Stellen Sie sicher, dass Sie alle internen Zustände bei der Aufhebung der Einbindung löschen, um Speicherlecks zu vermeiden.
Verwenden Sie keine Renderer, um die Werte im Raster zu überschreiben, da die neuen Werte vom Server nicht zum Filtern oder Sortieren verwendet werden.

Beispiel

Ein Beispiel für ein angepasstes bearbeitbares Rastersteuerelement finden Sie hier: Angepasstes bearbeitbares Raster.

Siehe auch

Übersicht über das Power Apps component framework
Erstellen Sie Ihre erste Codekomponente
Erlernen des Power Apps component framework

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).

Freigeben über