Freigeben über

Implementieren der FacePile-Komponente

  • Artikel

Dieses Beispiel zeigt, wie man mit React Komponenten mit dem Power Apps component framework erstellt. Die Facepile-Beispielkomponente wird anhand von React und der Office UI Fabric React-Komponenten implementiert. Dieser Code deckt möglicherweise nicht die bewährten Methoden für die erwähnten Drittanbieterbibliotheken ab.

Facepile in React.

Verfügbar für

Modellgesteuerte und Canvas-Apps

Code

Sie können die komplette Beispielkomponente hier herunterladen.

Wichtig

Obwohl die Power Apps Hostanwendungen auf React arbeiten, kommuniziert die Version von React, die Sie bündeln, nicht mit der Hostversion, noch ist sie von dieser Version abhängig. Eine neue Kopie von React (oder einer Bibliothek eines Drittanbieters, die Sie mit Ihrer Komponente bündeln) wird für jede Instanz dieses Steuerelements in die Host-Seite geladen, also achten Sie darauf, wie groß Sie Ihre Seite(n) machen, während Sie Komponenten hinzufügen. In einer künftigen Version werden wir eine Lösung zu diesem Problem haben.

Dieses Beispiel zeigt anhand von Beispielen, wie Abhängigkeiten für Bibliotheken von Drittanbietern und Office UI Fabric hinzugefügt werden können. Es wird gezeigt, wie die Office UI Fabric-Komponenten für React for UI verwendet werden können und wie eine bidirektionale Datenanbindung zwischen dem Power Apps component framework und dem React-Zustandsmodell durchgeführt wird.

Das Komponentenbeispiel besteht aus drei Office UI Fabric-Komponenten: ein Facepile, ein Schieberegler, ein Kontrollkästchen und eine Dropdownliste. Wenn Sie den Schieberegler bewegen, ändert sich die Anzahl der Gesichter in der Facepile. Das Auswahlfeld steuert, ob die Flächen ein- und ausgeblendet werden oder einfach erscheinen oder verschwinden, und die Optionen in der Dropdown-Liste steuern die Größe der Flächen. Wenn kein Wert festgelegt ist, ist die Anzahl der Gesichter standardmäßig 3.

  • Ist die Komponente geladen, wird der Schieberegler auf den Attributwert mit Bindung festgelegt. Die context.parameters.[property_name].attributes-Eigenschaft enthält die zugeordneten Metadaten.
  • In den Eigenschaften der React-Komponente wird ein Event-Handler übergeben, der es der React-Komponente ermöglicht, das Host Power Apps component framework-Steuerlement darüber zu informieren, dass sich ein Wert geändert hat. Der Ereignishandler legt dann fest, ob ein Aufruf der notifyOutputEvents-Methode erforderlich ist.
  • Durch das Bewegen des Schiebereglers aktualisiert React den Wert mit Bindung und ruft den weitergegebenen Ereignishandler auf. Wenn innerhalb dieses Handlers ein Aufruf an die Methode notifyOutputEvents erfolgt, dann wird die Methode getOutputs des Steuerelements asynchron aufgerufen und fließt zum Power Apps component framework.
  • Der Frameworkhost aktualisiert den Attributwert mit Bindung und der aktualisierte Wert wird an die Komponente weitergegeben, wodurch die updateView-Methode des Steuerelements ausgelöst wird. Das Steuerelement rendert dann erneut die React-Komponente mit dem neuen Wert.

Beispielkomponenten herunterladen
Beispielkomponenten verwenden
Manifestschemareferenz des Power Apps component framework
Power Apps component framework-API-Referenz
Power Apps component framework Übersicht

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).