Présentation de l’utilisation de React dans un composant Power Apps

  • 10 minutes

React est une infrastructure client standardisée permettant de créer des interfaces utilisateur. Elle fournit un moyen déclaratif de créer des IU interactives et un mécanisme conçu pour encapsuler les composants afin de créer des IU complexes qui gèrent les états des composants et présentent un degré d’interactivité élevée. Comme React est écrit en JavaScript, vous pouvez utiliser cette infrastructure dans un composant Power Apps.

Si vous faites vos premiers pas avec React, accédez à React pour trouver une multitude de didacticiels et de ressources sur la création de composants React.

Préparer votre ordinateur pour les composants de code

Pour préparer votre ordinateur à créer des composants de code, procédez comme suit :

  1. Installez npm (fourni avec Node.js) ou Node.js (fourni avec npm). Nous vous recommandons d’utiliser une version LTS (support à long terme).

  2. Installez Visual Studio Code.

  3. Installez l’extension Power Platform Tools.

  4. Installez les outils Build Tools pour Visual Studio depuis Téléchargements Visual Studio.

Fluent UI

L’un des nombreux développements importants de Microsoft a été l’implémentation de Fluent UI, une collection d’infrastructures d’expérience utilisateur vous permettant de créer des expériences fluides qui s’intègrent facilement à un large éventail de produits Microsoft. Utiliser Fluent UI dans votre composant de code Power Apps est aussi simple que de référencer ses bibliothèques, et cela fournit une version spécifique à React que vous pouvez utiliser. Pour en savoir plus, consultez Fluent UI.

Implémenter un exemple de composant FacePile

Important

Téléchargez le fichier zip FacePileComponent.zip à utiliser avec cet exercice. Extrayez le fichier zip.

Dans cet exemple, vous allez créer un composant qui utilise le composant FacePile Fluent UI. Le FacePile affiche une liste de visages ou d’initiales dans une recherche horizontale, chaque cercle représentant une personne.

Un exemple pratique de l’utilisation de cette recherche consiste à répertorier les contributeurs à un article ou à un enregistrement, comme ce que vous verriez dans Microsoft Learn, tel qu’illustré dans l’image suivante :

Capture d’écran du composant FacePile Fluent UI.

Créer un projet de composant

Pour créer un projet de composant, procédez comme suit :

  1. Créez un répertoire où vous allez créer votre composant. Dans cet exemple, vous allez placer le composant dans C:\users\username\source\face-pile ; vous pouvez toutefois créer votre propre répertoire. Le cas échéant, créez votre répertoire à l’aide de Visual Studio Code.

  2. Lancez Visual Studio Code.

  3. Cliquez sur Terminal et sur Nouveau terminal, puis basculez l’interpréteur de commandes du terminal vers l’Invite de commande.

    Remarque

    Si vous n’êtes pas familier avec la fonctionnalité Terminal dans Visual Studio Code, consultez Notions de base de la fonctionnalité Terminal pour en savoir plus.

  4. Créez votre dossier source.

    md \source

  5. Redéfinissez le répertoire sur votre dossier source.

    cd \source

  6. À partir de votre répertoire source, créez un répertoire nommé face-pile.

    md face-pile

  7. Accédez au répertoire que vous avez créé.

     cd face-pile

  8. Vous devriez maintenant vous trouver dans le répertoire que vous avez créé.

  9. Initialisez votre projet de composant à l’aide de la CLI Power Platform avec la commande suivante :

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

  10. Installez les outils de création de projet à l’aide de la commande npm install. Il se peut que certains avertissements s’affichent ; cependant, vous pouvez les ignorer en toute sécurité.

    npm install

  11. Exécutez la commande suivante pour ouvrir le projet dans Visual Studio Code :

    code -a .

  12. Le projet devrait ressembler à l’image suivante :

    Capture d’écran de Facepile UI dans Visual Studio Code.

Implémenter la logique de votre composant de code

Pour implémenter la logique de votre composant de code, procédez comme suit :

  1. Développez le dossier ReactFacePile, puis ouvrez le fichier ControlManifest.Input.xml.

  2. Recherchez le nœud property, puis remplacez-le par le code XML suivant :

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

  3. Recherchez le nœud resources, puis supprimez les commentaires css et resx.

    Capture d’écran de la suppression du commentaire css dans Visual Studio Code.

  4. Vérifiez que le fichier ControlManifest.Input.xml est toujours sélectionné, puis cliquez sur New Folder.

  5. Nommez le nouveau dossier components.

  6. Accédez au dossier dans lequel vous avez extrait le fichier FacePileComponent.zip téléchargé, puis ouvrez le dossier FacePileComponent.

  7. Faites glisser les fichiers dans le dossier FacePileComponents, puis déposez-les dans le dossier components que vous avez créé.

  8. Le dossier components devrait maintenant contenir deux fichiers.

    Capture d’écran de la suppression de deux dossiers Facepile.

  9. Ouvrez le fichier Index.ts.

  10. Remplacez import { HelloWorld, IHelloWorldProps } from "./HelloWorld"; par l’extrait de code suivant :

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

  11. Après les importations, ajoutez la constante suivante :

    const DEFAULT_NUMBER_OF_FACES = 3;

  12. Ajoutez l’extrait de code avant le constructeur.

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

  13. Les changements que vous avez apportés devraient ressembler à l’image suivante :

    Capture d’écran de la modification du code dans le fichier index.ts.

  14. Recherchez la méthode init, puis ajoutez l’extrait de code suivant après this.notifyOutputChanged = notifyOutputChanged; line :

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

  15. Remplacez la méthode updateView par la méthode suivante :

    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. Les méthodes init et updateView devraient maintenant ressembler à l’image suivante :

    Capture d’écran du code de la méthode updateView dans le fichier index.ts.

  17. Remplacez la méthode getOutputs par la méthode suivante :

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

  18. Ajoutez la méthode suivante après la méthode destroy :

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

  19. Cliquez sur Fichier et Enregistrer tout pour enregistrer vos modifications.

Ajouter un style à votre composant de code

Pour ajouter un style à votre composant de code, procédez comme suit :

  1. Cliquez sur le fichier ControlManifest.Input.xml, puis sur New Folder.

  2. Nommez le nouveau dossier css.

  3. Sélectionnez le dossier css que vous avez créé, puis cliquez sur Nouveau fichier.

  4. Nommez le nouveau fichier ReactFacePile.css.

  5. Ouvrez le fichier ReactFacePile.css que vous avez créé, puis collez l’extrait de code CSS suivant :

    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. Cliquez sur Fichier, puis sur Enregistrer pour enregistrer vos modifications.

  7. Cliquez sur le fichier ControlManifest.Input.xml, puis sur New Folder.

  8. Nommez le nouveau dossier strings.

  9. Accédez au dossier dans lequel vous avez extrait le fichier FacePileComponent.zip téléchargé, puis ouvrez le dossier FacePileStrings.

  10. Glissez-déposez le fichier ReactFacePile.1033.resx dans le dossier strings que vous avez créé.

  11. Le dossier strings devrait maintenant contenir le fichier resx.

    Capture d’écran illustrant l’ajout du fichier Facepile.

  12. Cliquez sur Fichier, puis sur Enregistrer pour enregistrer vos modifications.

  13. Accédez au terminal et exécutez la commande build suivante :

    npm run build

    Remarque

    Si vous recevez une erreur indiquant que JSX n’est pas défini, ouvrez le fichier .eslintrc.json. Sur la ligne 11 : "ComponentFramework": true, ajoutez une virgule, puis une nouvelle ligne avec "JSX": true. Sur la ligne 41 : remplacez JSX.Element par React.JSX.Element. Enregistrez les modifications et répétez la commande npm run build.

  14. La création devrait se terminer avec succès.

  15. Testez les composants en exécutant la commande suivante :

    npm start

  16. L’atelier de test devrait ouvrir une nouvelle fenêtre de navigateur.

  17. Le composant devrait ressembler à l’image suivante :

    Capture d’écran de l’image du nouveau composant.

  18. Définissez la taille du conteneur sur 500 x 220 et réglez le curseur sur 5.

  19. Le composant devrait maintenant ressembler à l’image suivante : Fermez la fenêtre de navigateur de l’atelier de test.

    Capture d’écran de l’image du nouveau composant avec des ajustements.

  20. Fermez la fenêtre de navigateur de l’atelier de test.

  21. Revenez au terminal et arrêtez le Watcher en appuyant sur [CTRL] + C.

  22. Tapez Y, puis appuyez sur [ENTRÉE].

Pour en savoir plus, consultez Implémentation du composant FacePile.