Das bearbeitbare Grid-Steuerelement anpassen

In diesem Artikel wird erläutert, wie Sie das bearbeitbare Rastersteuerelement in Power Apps an spezielle visuelle und Interaktionsanforderungen anpassen. Verwenden Sie die Power Apps Rastersteuerelementerweiterungs-APIs, um eine Grid Customizer-Codekomponente mit benutzerdefinierten Zellrenderern und Editoren zu erstellen.

Screenshot von benutzerdefinierten Zellrenderern im bearbeitbaren Rastersteuerelement von Power Apps.

Anpassungssteuerung für das Raster

Ein Grid Customizer ist ein PCF-Steuerelement, das die Power Apps Grid Control Customizer-Schnittstelle implementiert. Diese Schnittstelle ermöglicht es Ihnen, das React-Element zu definieren, das gerendert wird, wenn eine Gitterzelle im schreibgeschützten Modus (der Zellen-Renderer) oder im Bearbeitungsmodus (der Zellen-Editor) ist. 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 erforderlich ist, oder Sie können dasselbe Anpassungssteuerelement für mehrere Raster wiederverwenden.

Ein Steuerelement zum Anpassen des Rasters implementieren

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

  1. Öffnen Sie den GridCustomizerControlTemplate-Ordner mit Visual Studio Code.

  2. Führen Sie in einem Terminal-Fenster npm install aus.

  3. 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 dargestellt werden, wenn sich eine Zelle im Nur-Lese-Modus (Zell-Renderer) oder im Bearbeitungsmodus (Zell-Editor) befindet.

    Jede Datei exportiert ein Objekt, das den Spaltendatentyp einer Funktion zuordnet, die ein React-Element zurückgibt, das in den Zellen dieses Spaltentyps gerendert wird.

    /**
 * 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; 
};

    Anmerkung

    Wenn die Funktion NULL oder nicht definiert zurückgibt, verwendet das Raster den internen Renderer oder Editor für die Zielzellen.

  4. 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-Pushbefehl verwenden.

  5. Öffnen Sie nach dem Veröffentlichen des Rasteranpassungssteuerelements den Bereich System anpassen im Menü Einstellungen > Anpassungen.

    Screenshot des Menüs

  6. Wählen Sie im Knoten „Entitäten“ eine Entität aus, auf die das Steuerelement Ihrer Anpassung abzielt (z. B. Konto).

  7. Wählen Sie im rechten Bereich die Registerkarte Steuerelemente aus.

    Screenshot der Registerkarte „Steuerelemente“ für die ausgewählte Entität in „System anpassen“.

  8. Fügen Sie aus der Liste Steuerelemente das Power Apps-Rastersteuerelement hinzu.

    Screenshot der Liste

  9. 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}

    Screenshot einer Grid Customizer-Codekomponente, die der Eigenschaft des Customizer-Steuerelements zugewiesen ist.

  10. Speichern und veröffentlichen Sie Ihre Anpassungen für diese Entität.

  11. Testen Sie Ihre Anpassung, indem Sie das Hauptraster für die angepasste Entität öffnen.

  12. Wiederholen Sie die Schritte 6 bis 11 für alle anderen Entitäten, für deren Rasteransicht ein Steuerelement zum Anpassen der Rasteransicht erforderlich ist.

Best Practices

  • Zellrenderer und -Editoren sind Komponenten der Benutzeroberfläche. Verwenden Sie sie nicht, um Daten oder Metadaten des Rasters zu ändern.
  • Die Anpassungssteuerelemente sollten leicht und schnell sein, sodass sie sich nicht auf die Gesamtleistung des Rasters auswirken.
  • 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 den benutzerdefinierten Renderer oder Editor zugegriffen werden kann.
  • Die Anpassungsfunktion sollte ordnungsgemäß sein, da das Raster sie mehrmals aufruft, um angepasste Elemente abzurufen, und erwartet, dass der Rückgabewert konsistent ist.
  • Das Raster kann jederzeit ein Anpassungselement verwerfen und ein neues abrufen. Stellen Sie sicher, dass interner Zustand beim Unmounten bereinigt wird, um Speicherlecks zu verhindern.
  • Verwenden Sie keine Renderer, um die Werte im Raster zu überschreiben, da der Server die neuen Werte nicht zum Filtern oder Sortieren verwendet.

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

  • Last updated on