Exercice : utiliser la CLI Power Apps

Effectué

Dans cet exercice, vous allez installer la CLI Power Platform et créer votre premier composant Power Apps Component Framework (PCF).

Tâche 1 : installer la CLI

1. Installez Npm (fourni avec Node.js) ou Node.js (fourni avec npm). Nous vous recommandons d’utiliser LTS (Support à long terme) version 10.15.3 ou supérieure.

2. InstallezVisual Studio Code.

3. Installez l’extensionPower Platform Tools.

4. Lancez Visual Studio Code.

5. Cliquez sur Terminal, puis sur Nouveau terminal.

   

6. Exécutez la commande pac pour voir quelles commandes sont disponibles :

   pac

   

7. Vous pouvez saisir pac, puis une commande pour voir les options disponibles. Essayez, par exemple, ce qui suit :

   pac admin

8. Accédez à Power Apps Maker Portal et vérifiez que l’environnement de développement est sélectionné.

9. Dans le coin supérieur droit de l’écran, cliquez sur l’icône Paramètres, puis sur Détails de la session.

   

10. Dans la boîte de dialogue des détails de la session Power Apps, sélectionnez la valeur de l’URL de l’instance et copiez-la car vous l’utiliserez plus tard dans l’exercice.

    

11. Retournez au terminal Visual Studio Code, puis saisissez la commande suivante pour établir une connexion à partir de la CLI et connectez-vous à votre environnement de test lorsque vous y êtes invité.

    pac auth create --name Lab --url <Your Instance URL>

12. Saisissez la commande who suivante qui affichera l’environnement et les informations utilisateur. Cela est utile pour vous assurer que vous êtes dans l’environnement correct.

    pac org who

Tâche 2 : créer un composant PCF

1. Exécutez la commande ci-dessous pour créer un dossier nommé labPCF dans votre dossier utilisateur.

   md labPCF

2. Remplacez le répertoire par le dossier que vous avez créé.

   cd labPCF

3. Exécutez la commande ci-dessous pour initialiser le projet de composant.

   pac pcf init --namespace lab --name FirstControl --template field

4. Tapez la commande suivante, puis appuyez sur Entrée : Cela extrait toutes les dépendances du référentiel npm.

   npm install

5. Ouvrez le dossier dans Visual Studio Code.

   code -a .

6. Explorez les fichiers qui ont été créés.

7. Ouvrez Index.ts dans le dossier FirstControl.

8. Collez les deux variables suivantes dans l’exportation.

   private label: HTMLInputElement;

   private _container: HTMLDivElement;

   

9. Collez ce qui suit dans la fonction init() pour créer les contrôles HTML et définir la valeur du libellé.

   this.label = document.createElement("input");
   this.label.setAttribute("type", "label");
   this.label.value = "My First PCF";
   this._container = document.createElement("div");
   this._container.appendChild(this.label);
   container.appendChild(this._container);
   

10. Enregistrez le fichier.

11. Accédez au terminal et saisissez la commande suivante, puis appuyez sur Entrée. L’atelier de test est alors lancé avec le dernier code.

    npm start

12. Il peut être utile de recourir à l’atelier de test au début du projet pour voir à quoi ressemble votre contrôle visuellement sans avoir à le déployer dans un environnement. Vous pouvez définir des valeurs de propriété pour modifier la taille de la zone de contrôle. Après avoir terminé d’explorer l’atelier de test, revenez au terminal et appuyez sur Ctrl-C pour terminer l’exécution de l’atelier de test.

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

14. Exécutez la commande suivante pour répertorier les solutions dans votre environnement.

    pac solution list

15. Il s’agit des solutions actuelles qui se trouvent dans votre environnement. L’étape suivante en ajoutera une pour le composant.

16. Saisissez la commande push suivante pour pousser notre contrôle vers l’environnement.

    pac pcf push --publisher-prefix lab

17. Exécutez à nouveau la commande de liste de solutions pac. Vous devriez voir une solution PowerAppsTools_lab répertoriée. C’est ainsi que votre composant est installé dans l’environnement de développement pour les tests unitaires avant d’être emballé pour les tests utilisateur ou la production ou inclus dans le cadre d’une autre solution.

Tâche 3 : utiliser le composant dans une application (facultatif)

1. Accédez au Centre d’administration de Microsoft Power Platform.

2. Sélectionnez l’environnement que vous utilisez pour le labo.

3. Cliquez sur Paramètres.

4. Développez la zone Produit et sélectionnez Fonctionnalités.

5. Sur le côté droit, activez la fonctionnalité Autoriser la publication d’applications canevas avec des composants de code.

   

6. Accédez à Power Apps Maker Portal et vérifiez que vous vous trouvez dans l’environnement approprié.

7. Cliquez sur Solutions.

8. Sélectionnez la solution Labo PowerAppsTools pour l’ouvrir.

9. Vous devriez voir votre composant répertorié.

10. Cliquez sur + Nouvelle | Application | Application canevas.

11. Sélectionnez Téléphone pour le format, saisissez Premier PCF pour le nom de l’application, puis cliquez sur Créer.

12. Dans le volet gauche, cliquez sur Ajouter (+), puis sur Obtenir plus de composants.

13. Cliquez sur l’onglet Code.

14. Sélectionnez votre composant.

    

15. Cliquez sur Importer.

16. Dans la barre d’outils de gauche, sélectionnez +, puis développez Composants de code.

17. Cliquez sur FirstControl. Vous devriez maintenant voir le contrôle avec le texte Mon premier PCF sur le canevas.

    

18. Cliquez sur Enregistrer pour enregistrer l’application.

Vous venez de créer votre premier composant PCF et vous l’avez utilisé dans une application canevas.

Continuer