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

  • 10 Minuten

React ist ein standardisiertes Client-Framework, das für das Erstellen von Benutzeroberflächen erstellt wird. Es bietet eine deklarative Möglichkeit zum Erstellen interaktiver Benutzeroberflächen und einen Mechanismus zum Einschließen von Komponenten, um komplexe Benutzeroberflächen zu erstellen, die Komponentenzustände verwalten und eine hohe Interaktivität aufweisen. Da React in JavaScript geschrieben ist, können Sie dieses Framework in einer Power Apps-Komponente verwenden.

Wenn React für Sie neu ist, wechseln Sie zu React. Hier finden Sie eine Vielzahl von Tutorials und Ressourcen zum Erstellen von React-Komponenten.

Ihren Computer auf Codekomponenten vorbereiten

Führen Sie die folgenden Schritte aus, um Ihren Computer darauf vorzubereiten, Codekomponenten zu erstellen:

  1. Installieren Sie Npm (in Node.js enthalten) oder Node.js (in npm enthalten). Wir empfehlen die Verwendung einer LTS-Version (Long Term Support).

  2. Installieren Sie Visual Studio Code.

  3. Installieren Sie Power Platform Tools-Erweiterung.

  4. Installieren Sie die Build Tools für Visual Studio von Visual Studio-Downloads.

Fluent UI

Eine der vielen großartigen Entwicklungen von Microsoft war die Implementierung von Fluent UI, einer Sammlung von UX-Frameworks, mit denen Sie reibungslose Erfahrungen erstellen können, die sich nahtlos in eine breite Palette von Microsoft-Produkten einfügen. Fluent UI in Ihrer Power Apps Code-Komponente zu verwenden, ist so einfach wie das Verweisen auf seine Bibliotheken und bietet eine React-spezifische Version, die Sie verwenden können. Weitere Informationen finden Sie unter Fluent UI.

Eine beispielhafte FacePile-Komponente implementieren

Wichtig

Laden Sie für diese Übung die ZIP-Datei FacePileComponent.zip herunter. Extrahieren Sie die ZIP-Datei.

In diesem Beispiel erstellen Sie eine Komponente, die die FacePile Fluent UI-Komponente verwendet. Die FacePile zeigt eine Liste von Gesichtern oder Initialen in einer horizontalen Suche, wobei jeder Kreis eine Person darstellt.

Ein praktisches Beispiel für die Verwendung dieser Suche ist das Auflisten von Mitwirkenden an einem Artikel oder Datensatz, z. B. in Microsoft Learn, wie in der folgenden Abbildung dargestellt.

Screenshot der FacePile Fluent UI-Komponente

Neues Komponentenprojekt erstellen

Gehen Sie wie folgt vor, um ein Komponentenprojekt zu erstellen:

  1. Legen Sie ein Verzeichnis an, in dem Sie Ihre Komponente erstellen. In diesem Beispiel legen Sie die Komponente unter C:\users\username\source\face-pile ab. Sie können aber auch ein eigenes Verzeichnis erstellen. Für die Erstellung eines eigenen Verzeichnisses verwenden Sie Visual Studio Code.

  2. Starten Sie Visual Studio Code.

  3. Wählen Sie Terminal und Neues Terminal aus, und schalten Sie das Terminal-Shell auf Eingabeaufforderung.

    Hinweis

    Wenn Sie mit dem Terminal in Visual Studio Code nicht vertraut sind, wechseln Sie zu Terminal-Grundlagen, um mehr zu erfahren.

  4. Erstellen Sie Ihren Quellordner.

    md \source

  5. Wechseln Sie das Verzeichnis zu Ihrem Quellordner.

    cd \source

  6. Erstellen Sie aus Ihrem Quellverzeichnis ein Verzeichnis mit dem Namen face-pile.

    md face-pile

  7. Wechseln Sie zum von Ihnen erstellten Verzeichnis.

     cd face-pile

  8. Sie sollten sich jetzt in dem von Ihnen neue erstellten Verzeichnis befinden.

  9. Initialisieren Sie Ihr Komponentenprojekt mit der Power Platform CLI über den folgenden Befehl.

    pac pcf init --namespace Learn --name ReactFacePile --template field --framework React

  10. Installieren Sie die Projekterstellungstools mit dem Befehl npm install. Möglicherweise werden einige Warnungen angezeigt. Sie können sie jedoch sicher ignorieren.

    npm install

  11. Führen Sie den folgenden Befehl aus, um das Projekt in Visual Studio Code zu öffnen.

    code -a .

  12. Das Projekt sollte wie in der folgenden Abbildung aussehen.

    Screenshot der Facepile UI in Visual Studio Code

Logik der Codekomponente implementieren

Gehen Sie wie folgt vor, um die Logik der Codekomponente zu implementieren:

  1. Erweitern Sie den Ordner ReactFacePile, und öffnen Sie die Datei ControlManifest.Input.xml.

  2. Suchen Sie den Knoten property, und ersetzen Sie ihn durch das folgende XML:

    <property name="numberOfFaces" display-name-key="numberOfFaces_Display_Key" description-key="numberOfFaces_Desc_Key" of-type="Whole.None" usage="bound" required="false" />

  3. Suchen Sie die Ressourcen, und löschen Sie den Kommentar für CSS und Resx.

    Screenshot vom Entfernen von CSS-Bemerkungen in Visual Studio Code

  4. Stellen Sie sicher, dass die Datei ControlManifest.Input.xml noch ausgewählt ist, und klicken Sie dann auf New Folder.

  5. Nennen Sie den neuen Ordner components.

  6. Wechseln Sie zu dem Ordner, in den Sie die heruntergeladene Datei FacePileComponent.zip extrahiert haben, und öffnen Sie den Ordner FacePileComponent.

  7. Ziehen Sie die Dateien in den FacePileComponents-Ordner, und legen Sie sie in dem von Ihnen erstellten components-Ordner ab.

  8. Im Komponentenordner sollten jetzt zwei Dateien vorhanden sein.

    Screenshot vom Entfernen von zwei Facepile-Ordnern.

  9. Öffnen Sie die Datei Index.ts.

  10. Ersetzen Sie den Import { HelloWorld, IHelloWorldProps } from "./HelloWorld"; mit diesem Ausschnitt.

    import { FacepileBasicExample, IFacepileBasicExampleProps } from "./components/Facepile" ;

  11. Fügen Sie nach den Imports die folgende Konstante hinzu.

    const DEFAULT_NUMBER_OF_FACES = 3;

  12. Fügen Sie den Ausschnitt vor dem Konstruktor hinzu.

    private props: IFacepileBasicExampleProps = {
    numberFacesChanged: this.numberFacesChanged.bind(this),
};

  13. Die von Ihnen vorgenommenen Änderungen sollten nun wie im folgenden Bild aussehen.

    Screenshot vom Ändern des Codes in der Datei „index.ts“

  14. Suchen Sie die Methode init, und fügen Sie nach der Zeile „this.notifyOutputChanged = notifyOutputChanged; line“ das folgende Snippet hinzu

    this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;

  15. Ersetzen Sie die Methode updateView durch die folgende Methode.

    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
    if (context.updatedProperties.indexOf("numberOfFaces") > -1) {
        this.props.numberOfFaces = context.parameters.numberOfFaces.raw || DEFAULT_NUMBER_OF_FACES;
    }
    return React.createElement(FacepileBasicExample, this.props);
}

  16. Die Methoden init und updateView sollten jetzt wie in der folgenden Abbildung aussehen.

    Screenshot des aktualisierten Ansichtscodes in der Datei „index.ts“

  17. Ersetzen Sie die Methode getOutputs durch die folgende Methode.

    public getOutputs(): IOutputs {
    return {
        numberOfFaces: this.props.numberOfFaces,
    };
}

  18. Fügen Sie die folgende Methode nach der Methode „destroy“ hinzu.

    private numberFacesChanged(newValue: number) {
    if (this.props.numberOfFaces !== newValue) {
        this.props.numberOfFaces = newValue;
        this.notifyOutputChanged();
    }
}

  19. Wählen Sie Datei aus, und Alle speichern Sie alle Ihre Änderungen.

Ihrer Codekomponente Stil hinzufügen

Gehen Sie wie folgt vor, um Ihrer Codekomponente einen Stil hinzuzufügen:

  1. Wählen Sie die Datei ControlManifest.Input.xml und dann New Folder aus.

  2. Nennen Sie den neuen Ordner css.

  3. Wählen Sie den von Ihnen erstellten Ordner css aus, und klicken Sie dann auf Neue Datei.

  4. Geben Sie der neuen Datei den Namen ReactFacePile.css.

  5. Öffnen Sie die neu erstellte Datei ReactFacePile.css, und fügen Sie den Ausschnitt CSS ein.

    msFacepileExample {
max-width: 300px;
}
.msFacepileExample .control {
 padding-top: 20px;
}
.msFacepileExample .ms-Dropdown-container, .msFacepileExample.ms-Slider {
margin: 10px 0 10px 0;
}
.msFacepileExample .ms-Dropdown-container .ms-Label {
padding-top: 0;
}
.msFacepileExample .ms-Checkbox {
padding-top: 15px;
}
.exampleCheckbox {
margin: 10px 0;
}
.exampleLabel {
margin: 10px 0;
}

  6. Wählen Sie Datei aus, und Speichern Sie Ihre Änderungen.

  7. Wählen Sie die Datei ControlManifest.Input.xml und dann New Folder aus.

  8. Nennen Sie den neuen Ordner strings.

  9. Wechseln Sie zu dem Ordner, in den Sie die heruntergeladene Datei FacePileComponent.zip extrahiert haben, und öffnen Sie den Ordner FacePileStrings.

  10. Ziehen Sie die Datei ReactFacePile.1033.resx, und legen Sie sie in dem von Ihnen erstellten Ordner strings ab.

  11. Der Ordner „strings“ sollte jetzt die resx-Datei enthalten.

    Screenshot des Hinzufügens der Facepile-Datei

  12. Wählen Sie Datei aus, und Speichern Sie Ihre Änderungen.

  13. Navigieren Sie zum Terminal, und führen Sie diesen Erstellungsbefehl aus.

    npm run build

    Hinweis

    Öffnen Sie die Datei .eslintrc.json, wenn Sie eine Fehlermeldung erhalten, dass JSX nicht festgelegt ist. In Zeile 11: "ComponentFramework": true, fügen Sie ein Komma hinzu und dann eine neue Zeile mit "JSX": true. In Zeile 41: Ändern Sie JSX.Element in React.JSX.Element. Speichern Sie die Änderungen, und wiederholen Sie den Befehl „npm run build“.

  14. Die Erstellung sollte erfolgreich abgeschlossen werden.

  15. Führen Sie den folgenden Befehl aus, um die Komponenten zu testen.

    npm start

  16. Die Testumgebung sollte ein neues Browserfenster öffnen.

  17. Die Komponente sollte nun wie im folgenden Bild aussehen.

    Screenshot des neuen Komponentenbilds

  18. Ändern Sie die Größe des Containers auf 500 x 220, und bewegen Sie den Schieberegler auf 5.

  19. Die Komponente sollte nun wie im folgenden Bild aussehen. Schließen Sie das Testumgebungs-Browserfenster.

    Screenshot des neuen Komponentenbilds mit Anpassungen

  20. Schließen Sie das Testumgebungs-Browserfenster.

  21. Wechseln Sie zurück zum Terminal, und stoppen Sie den Beobachter, indem Sie [CONTROL] + C drücken.

  22. Geben Sie Y ein, und drücken Sie dann [ENTER].

Weitere Informationen finden Sie unter Die FacePile-Komponente implementieren.