Einführung in die Verwendung von React innerhalb einer Power Apps-Komponente

Abgeschlossen

Das Power Apps component framework bietet Ihnen integrierte Funktionen, die Teil Ihrer Logik sein können, wenn Sie komplexere Codekomponenten erstellen. Mit dieser Funktionen können Sie mehr über den Client erfahren, der Ihre Komponente hostet, über das Gerät, auf dem die Komponente ausgeführt wird, und über andere dienstprogrammartige Dienste wie die Formatierung. Für Komponenten, mit denen Sie interagieren möchten, wenn Sie Dataverse-Tabellendaten verwenden, können Sie für die Interaktion mit den Daten die WebAPI-Funktion verwenden.

Bei einfachen Komponenten ist es üblich, dass HTML-Codes manuell erstellt werden. Es kann jedoch hilfreich sein, für komplexere Aufgaben eine UI-Framework-Bibliothek zu verwenden. Für JavaScript-UI-Frameworks gibt es viele Möglichkeiten zur Auswahl, React ist jedoch eines der Bibliotheken mit Power Apps-Codekomponenten, die am häufigsten verwendet werden.

Im Rest dieses Modules untersuchen wir diese Themen genauer. Wir verwenden mehrere praktische Beispiele, an denen Sie mitarbeiten und Ihre Komponenten mithilfe einiger dieser erweiterten Funktionen des Frameworks erstellen können.

Den Komponentenkontext verwenden

Das Kontextobjekt enthält vom Anpasser eingerichtete Werte, die Eigenschaftsnamen zugeordnet sind, die in den Manifest- und Dienstprogrammfunktionen definiert sind. Sie können dies in Ihrer Komponentenlogik verwenden, um auf die meisten integrierten Funktionen zuzugreifen, die wir später in diesem Modul in den von Ihnen erstellten Komponenten verwenden werden.

Der Kontextparameter steht Komponenten in Form der Methoden init und updateView zur Verfügung. Es ist üblich, dass Sie in der Init-Methode eine Variable auf Klassenebene füllen, damit andere Methoden in Ihrer Komponente einen einfachen Zugriff auf den Kontext haben. Im Folgenden finden Sie ein Beispiel für das Speichern des Kontexts zur späteren Verwendung in der Init-Methode:

export class ChoicesPicker implements ComponentFramework.StandardControl<IInputs, IOutputs> {
    
    private _context: ComponentFramework.Context<IInputs>;

    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary,
        container: HTMLDivElement,
    ): void {
     
        this._context = context;

        /* other logic goes here */
    }
}

Die Komponente Kontextobjekt kann viele Informationen über die Umgebung abdecken, in der Ihre Komponente ausgeführt wird. Im Folgenden erhalten Sie eine Übersicht über die verfügbaren Haupteigenschaften:

• client – Diese Eigenschaft liefert Ihnen Informationen über den Client (Web, Outlook oder mobiles Gerät), den Formfaktor (Desktop, Tablet oder Telefon), ob Sie offline sind und ob das Netzwerk verfügbar ist.

• Modus – Diese Eigenschaft stellt Informationen über den aktuellen Status der Codekomponente bereit. Ist die Komponente zum Beispiel sichtbar, ist sie deaktiviert und wie hoch ist die aktuell zugewiesene Größe.

• userSettings – Diese Eigenschaft stellt Informationen über den aktuellen Benutzer bereit, wie beispielsweise seine Sprach-ID, Benutzer-ID und seinen Namen. Die securityRoles-Eigenschaft kann für modellgesteuerte Apps hilfreich sein, um die Rollen für den aktuellen Benutzer zu erfahren.

Das Kontextobjekt bietet zudem Zugriff auf mehrere nützliche integrierte Dienste. Die folgenden sind die häufigsten:

• device – Mit dieser Eigenschaft wird Zugriff auf Methoden zur Verwendung von nativen Gerätefunktionen bereitgestellt. Sie können diese Dienste verwenden, um Audio-, Video- und Bilddaten zu erfassen, Barcodewerte abzurufen, den Standort des Geräts zu ermitteln und Dateien auszuwählen.

• factory – Dies bietet derzeit nur Methoden für die Arbeit mit dem Popup-Dienst, kann aber in Zukunft auch andere Dienste unterstützen.

• formatting – Bietet Methoden, mit denen Sie Daten von Währung in Zeit formatieren können. Mit diesen Methoden können Sie die Formatierung im Einklang mit den Benutzereinstellungen der Hosting-Anwendung halten.

• navigation – Bietet navigationsbezogene Methoden wie offene Formulare, offene URLs, Dialoge (Warnung, Bestätigung, Fehler) und weitere.

• resources – Bietet Zugriff auf die Methoden, um alle Informationen über die im Manifest festgelegten Ressourcendateien abzurufen. Diese Methoden sind für die Lokalisierung des gesamten Inhalts Ihrer Komponente wichtig.

• utils – Bietet Zugriff auf Tabellenmetadaten und ermöglicht Ihnen zudem, den Benutzerzugriff auf bestimmte Tabellen zu überprüfen. Mit der Methode „lookupObjects“ können Komponenten auf das Standard-Suchdialogfeld zugreifen, sodass Benutzer eine oder mehrere Zeilen auswählen können.

• webAPI – Bietet grundlegenden Zugriff, mit dem Sie Dataverse-Tabellendaten erstellen, lesen, aktualisieren und löschen können.

Im Folgenden finden Sie ein Beispiel zum Verwenden der pickFile-Funktionen für das Gerät:

 private onUploadButtonClick(event: Event): void {
    this._context.device.pickFile().then(this.processFile.bind(this), this.showError.bind(this));
  }

Es ist wichtig zu beachten, dass einige dieser Dienste eine Aktivierung im Abschnitt „Funktionsverwendung“ des Manifests erfordern, damit sie funktionieren. Einige stehen möglicherweise auch nur in bestimmten Arten von Hosting-Apps zur Verfügung. WebAPI ist zum Beispiel nur in modellgesteuerten Apps und Power Pages verfügbar und nicht für Canvas-Apps. Auf den Referenzseiten der einzelnen Dienste finden Sie weitere Informationen.

React verwenden

Sie können aus vielen UI-Frameworks auswählen, es bietet jedoch Vorteile, React zu verwenden. React wird bevorzugt, da die zugrunde liegende Power Apps-Plattform React intern nutzt. Das Power Apps Component Framework bietet zudem integrierte Unterstützung, um die gleiche Infrastruktur zu verwenden. Aufgrund dieser Funktion müssen sie die React‑ und Fluent-UI-Bibliotheken nicht manuell in jedes Steuerelement einpacken. Für ein nahtloses und konsistentes Erlebnis verwenden alle Steuerelemente eine gemeinsame Bibliotheksinstanz und -version.

Der folgende Befehl zeigt, wie eine Komponente initialisiert und das React-Framework verwendet wird:

pac pcf init -n ReactSample -ns SampleNamespace -t field -fw react -npm

Der einzige Unterschied, der Ihnen vielleicht auffällt, ist die Option -fw (or--framework), die die Verwendung von React ermöglicht. Durch diese Option haben Sie für die generierten Anfangsdateien die erforderlichen React-Konfigurationen.

In diesem Modul erstellen Sie später mit dieser React-Funktion eine Codekomponente.

Weiter