Architektur des Power Apps Component Framework
Sie können Codekomponenten mit HTML, CSS und TypeScript implementieren. Es ist zwar nicht erforderlich, dass Sie ein bestimmtes UI-Framework verwenden, aber, React und Fluent UI sind eine beliebte Wahl.
Komponentenanordnung
Wie die folgende Abbildung zeigt, wird eine Power Apps-Komponente in Form von drei Hauptbereichen dargestellt: Manifesteingabedatei, Implementierung und alle anderen Ressourcendateien, die ggf. von der Komponente benötigt werden.
Ein Manifest wird verwendet, um alle Eigenschaften, die für die Anwendung zum Hosten der Komponenten zur Verfügung steht, zu identifizieren. Wenn App-Entwickler die Codekomponente verwenden, können sie statisch einen Wert für die Eigenschaften festlegen. Alternativ können Sie es dynamisch an eine der verfügbaren Datenspalten in der Anwendung binden. Mithilfe von Eigenschaften können die Anwendung und die Komponente über Daten kommunizieren, ohne dass die App die Implementierung der Komponente verstehen muss.
Wenn Sie eine Codekomponente erstellen, muss Ihr Code eine Schnittstelle implementieren, die eine konsistente Möglichkeit für die Hosting-App bietet, mit Ihrer Komponente zu interagieren. Dies wird durch Ihre Codekomponentenklasse erreicht, die die StandardControl-Schnittstelle implementiert.
export class FirstControl implements ComponentFramework.StandardControl<IInputs, IOutputs> {}
Power Apps-Komponentenlebenszyklus
Wenn Sie eine Komponente entwickeln, implementieren Sie alle oder einige der StandardControl-Schnittstellenmethoden in der folgenden Tabelle, je nach Ihren Komponentenanforderungen. Mit diesen Methoden kann die Hosting-Laufzeit den Lebenszyklus der Codekomponente verwalten.
| Methode | Beschreibung |
|---|---|
| init | Erforderlich Verwenden Sie diese Methode zum Initialisieren der Komponenteninstanz. Komponenten können bei dieser Methode Remoteserveraufrufe und andere Initialisierungsaktionen starten. Mit dieser Methode können Sie keine Datensatzwerte initialisieren. Sie müssen dazu die updateView-Methode verwenden. |
| updateView | Erforderlich Diese Methode wird aufgerufen, wenn sich ein Wert im Eigenschaftenbehälter der Komponente geändert hat. Wenn Sie in der Init-Methode Ladedatenanforderungen gestartet haben, die möglicherweise nicht abgeschlossen wurden, muss Ihr Code diesen Status verarbeiten und einen visuellen Ladeindikator zur Verfügung stellen. |
| getOutputs | Optional Wird vom Framework vor dem Empfang neuer Daten aufgerufen. Verwenden Sie diese Methode, wenn Sie gebundene Eigenschaften in einem Steuerelement dynamisch verwalten. |
| destroy | Erforderlich. Wird aufgerufen, wenn die Komponente aus der DOM-Struktur entfernt werden soll. Verwenden Sie die destroy-Methode zur Bereinigung und Freigabe des von der Komponente verwendeten Hauptspeichers. Wenn Sie zum Beispiel React nutzen, verwenden Sie ReactDOM.unmountComponentAtNode in der destroy-Methode. Dies verhindert Leistungsprobleme, die durch das Laden und Entladen von Codekomponenten in einer bestimmten Browsersitzung verursacht werden. |
Diese Methoden werden über einen Frameworklaufzeitprozess in einem standardisierten Lebenszyklus aufgerufen, wie in der folgenden Abbildung dargestellt.
Oben in der Abbildung ruft das Framework die Funktion init() für Ihre Komponente auf. Wenn Ihre Komponente interaktiv ist, müssen Sie auch den Host informieren, dass sich die Ausgabe der Komponente geändert hat. Dazu rufen Sie die notifyOutputChanged-Methode auf.
Die Framework-Laufzeit ruft dann die Methode getOutputs auf, um Werte für alle gebundenen Eigenschaften Ihrer Komponente abzurufen.
Die Laufzeit benachrichtigt dann den Host, der die Ausgabe überprüft. Wenn sich herausstellt, dass die Ausgabe gültig ist, wird die Methode updateView für Ihre Komponente aufgerufen. Wenn sie aus irgendeinem Grund nicht gültig ist (zum Beispiel, eine Geschäftsregel hat festgestellt, dass die neue Ausgabe ungültig ist), wird Ihre updateView-Methode aufgerufen und der alte Wert zusammen mit einer Fehlermeldung übergeben. In beiden Szenarien kann Ihre Komponente die Benutzeroberfläche aktualisieren und gegebenenfalls eine Fehlermeldung anzeigen.