Bibliothèque de composants Power Apps

Cette manipulation explique comment utiliser une bibliothèque de composants Power Apps, afin de réutiliser ses modules dans vos programmes.

L’avantage de cette technique est de conserver la dépendance entre les composants de la bibliothèque et les applications Power Apps.

Autrement dit, la modification du composant dans la bibliothèque peut être répercutée automatiquement dans vos applications.

En effet, vous êtes prévenu d’une mise à jour du composant d’origine. Puis, c’est vous qui décidez de mettre à jour, ou pas, l’application Power Apps qui est lié au composant d’origine.

Si vous rencontrez des erreurs dans les manipulations ci-dessous, lisez l’article qui explique comment débuguer les erreurs dans Power Apps.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Power Platform

Avant de créer une bibliothèque de composants Power Apps, vous devez faire une vérification.

Notamment, vous devez vérifier que la fonctionnalité qui permet d’ajouter des composants d’une bibliothèque de composants dans une application est active.

Par ailleurs, faites attention que le paramétrage de cette fonctionnalité nécessite d’ouvrir le Centre d’administration Power Platform : vous devez donc disposer des droits nécessaires.

Ensuite, l’accès à ce paramètre demande de suivre très précisément la procédure ci-dessous.

Premièrement, ouvrez Power Apps.

Ensuite, dans le volet de gauche, cliquez sur le lien Power Platform : un menu s’ouvre.

Puis, dans ce menu, cliquez sur Centre d’administration Power Platform : un autre onglet s’ouvre.

Ensuite, dans l’onglet du Centre d’administration de Power Platform, cliquez sur le lien Environnements (dans le volet de gauche) : la liste de vos environnements s’ouvre.

Ensuite, dans cette liste, cliquez sur votre environnement de travail pour l’ouvrir (généralement c’est celui avec Default dans le nom).

Puis, dans le menu horizontal, cliquez sur Paramètres.

Enfin, cliquez sur Produit puis sur Fonctionnalités.

Dans cette page, il y a de nombreuses fonctionnalités.

Aussi, appuyez sur les touches CTRL + F du clavier pour lancer la recherche sur cette page et cherchez la fonctionnalité Power Apps component framework pour les applications de canevas.

Dans cette fonctionnalité, regardez si la case Autoriser la publication d’applications de canevas avec des composants de code est active.

Si la case est active, c’est parfait.

Si la case n’est pas active, cochez cette case pour l’activer.

Ensuite, cliquez sur le bouton Enregistrer (tout en bas, à droite).

Enfin, fermez l’onglet du Centre d’administration de Power Platform.

Créer une bibliothèque de composants Power Apps

Ensuite, vous allez afficher la liste des bibliothèques de composants Power Apps.

Pour cela, dans l’accueil de Power Apps, cliquez sur le mot Applications dans le volet de gauche : le volet central Applications s’ouvre.

Par ailleurs, remarquez simplement, sans cliquer dessus pour l’instant, la présence de l’onglet Bibliothèques de composants.

Ensuite, dans le volet central Applications, cliquez sur l’onglet Bibliothèques de composants.

Normalement, la liste est vide.

Par ailleurs, remarquez simplement, sans cliquer dessus pour l’instant, la présence du lien + Nouvelle bibliothèque de composants et du bouton Créer une bibliothèque de composants.

Bien évidemment, s’il existe déjà une bibliothèque de composants, celle-ci s’affiche.

Vous allez créer une bibliothèque de composants Power Apps.

Notamment, cliquez sur le lien + Nouvelle bibliothèque de composants (ou le bouton Créer une bibliothèque de composants : peu importe) : un pop-up s’ouvre et vous demande son nom.

Dans ce scénario, elle se nomme Menus. Vous pouvez la nommer comme vous voulez.

Personnaliser le composant

Après validation, un composant Component1 est créé automatiquement.

Vous allez immédiatement le renommer.

Pour cela, double-cliquez sur le mot Component1 et renommez-le en menuPrincipal.

Vous allez modifier sa hauteur et largeur.

Avant de modifier les valeurs, remarquez que dans un composant d’une bibliothèque, vous ne pouvez pas utiliser la barre de formule, en haut et au milieu. Vous ne pouvez utiliser que le volet de propriétés sur la droite.

Ensuite, indiquez les valeurs suivantes pour les propriétés de menuPrincipal :

• Largeur : 160
• Hauteur : 400

Puis, insérez une étiquette de texte que vous renommez en menu_1.

Ensuite, indiquez les valeurs suivantes pour les propriétés de menu_1 :

• Texte : Liste
• X : 0
• Y : 0

Puis, copiez-collez le contrôle menu_1 en menu_2.

Ensuite, indiquez les valeurs suivantes pour les propriétés de menu_2 :

• Texte : Afficher
• X : 0
• Y : 70

Puis, copiez-collez le contrôle menu_2 en menu_3.

Ensuite, indiquez les valeurs suivantes pour les propriétés de menu_3 :

• Texte : Modifier
• X : 0
• Y : 140

Pour l’instant et dans un but purement pédagogique, les liens du menu sont fixes (« Liste », « Afficher », « Modifier »). Dans la manipulation avancée de l’article sur la Propriété personnalisée en entrée d’un composant Power Apps, vous verrez qu’il est tout à fait possible d’avoir des menus dynamiques.

Puis, enregistrez votre bibliothèque avec les touches CTRL + S du clavier.

Enfin, publiez votre bibliothèque avec les touches CTRL + Maj + P du clavier.

Ensuite, cliquez sur la flèche Précédent (en haut, à gauche) : un pop-up demande s’il faut quitter.

Dans ce pop-up, cliquez sur Quitter : la liste des bibliothèques de composants Power Apps s’affiche.

Ouvrir une application

Ensuite, vous allez ouvrir une application Power Apps dans un autre onglet dans le navigateur.

En particulier, créez un nouvel onglet dans votre navigateur web en appuyant sur les touches CTRL + T du clavier.

Puis, dans ce nouvel onglet, ouvrez Power Apps.

Dans ce nouvel onglet Power Apps, ouvrez la liste des applications Power Apps, en cliquant sur le menu Applications (à gauche).

Ensuite, ouvrez en modification l’application Liberté, en cliquant sur les 3 petits points à droite du mot Liberté puis sur le choix Modifier.

Vous avez pu créer l’application Liberté, dans les manipulations de Composants Power Apps.

Utiliser le composant de la bibliothèque de composants Power Apps

Ensuite, positionnez-vous sur le premier écran Screen1_1.

Puis, cliquez directement sur le lien + Insérer du volet de gauche (et non pas dans le menu horizontal) : le volet Insérer s’ouvre.

Tout en bas de ce volet, remarquez la présence du lien Obtenir plus de composants.

Si vous ne voyez pas le lien Obtenir plus de composants, vérifiez que vous avez bien cliqué sur le lien + Insérer du volet de gauche (et non pas dans le menu horizontal). Par ailleurs, vérifiez que la case Autoriser la publication d’applications de canevas avec des composants de code est bien active ; cf. la toute première manipulation sur la Power Platform.

Ensuite, tout en bas du volet Insérer, cliquez sur le lien Obtenir plus de composants. : le volet Importer des composants s’affiche à droite.

Enfin, cochez la case du composant menuPrincipal puis cliquez sur le bouton Importer (tout en bas).

Ensuite, remarquez l’apparition dans le volet Insérer du groupe Composants de bibliothèque.

Puis, cliquez sur le groupe Composants de bibliothèque puis sur le composant menuPrincipal : le composant est ajouté à l’écran Screen1_1.

Enfin, déplacez légèrement vers le bas le composant pour qu’il ne chevauche pas le bandeau et le logo.

Puis, enregistrez votre application avec les touches CTRL + S du clavier.

Enfin, publiez votre application avec les touches CTRL + Maj + P du clavier.

Ensuite, cliquez sur la flèche Précédent (en haut, à gauche) : un pop-up demande s’il faut quitter.

Dans ce pop-up, cliquez sur Quitter : la liste des applications Power Apps s’affiche.

Modifier le composant d’origine

Vous allez vérifier la dépendance entre le composant de la bibliothèque et celui de l’application en modifiant le composant d’origine.

Par ailleurs, un autre onglet est normalement ouvert sur Power Apps et affiche la bibliothèque de composants Power Apps Menus.

Aussi, ouvrez en modification la bibliothèque Menus, en cliquant sur les 3 petits points à droite du mot Menus puis sur le choix Modifier.

Ensuite, cliquez sur le mot menuPrincipal (dans le volet de gauche) pour le sélectionner puis modifiez sa propriété Remplir (Fill en anglais) avec la valeur Color.LightGoldenRodYellow.

Puis, enregistrez votre bibliothèque avec les touches CTRL + S du clavier.

Enfin, publiez votre bibliothèque avec les touches CTRL + Maj + P du clavier.

En effet, gardez à l’esprit que si vous ne publiez pas, vous ne verrez pas l’impact de votre modification.

Ensuite, cliquez sur la flèche Précédent (en haut, à gauche) : un pop-up demande s’il faut quitter.

Dans ce pop-up, cliquez sur Quitter : la liste des bibliothèques de composants Power Apps s’affiche.

Vérifier la dépendance avec la bibliothèque de composants Power Apps

Ensuite un autre onglet est normalement ouvert sur Power Apps et affiche la bibliothèque des applications Power Apps.

Aussi, ouvrez en modification l’application Liberté, en cliquant sur les 3 petits points à droite du mot Liberté puis sur le choix Modifier.

Un bandeau s’ouvre en haut du volet central.

En effet, la mise à jour n’est pas systématique. Vous pouvez décider de faire la mise à jour du composant ou pas.

Dans ce scénario, vous allez faire la mise à jour.

En particulier, cliquez sur le bouton Examiner : un pop-up s’affiche avec la liste des composants à mettre à jour, ainsi que le jour et l’heure de leur publication.

Ensuite, dans ce pop-up, cliquez sur le bouton Mettre à jour : le composant menuPrincipal se met à jour dans votre application.

Puis, enregistrez votre application avec les touches CTRL + S du clavier.

Enfin, publiez votre application avec les touches CTRL + Maj + P du clavier.

Ensuite, cliquez sur la flèche Précédent (en haut, à gauche) : un pop-up demande s’il faut quitter.

Dans ce pop-up, cliquez sur Quitter : la liste des applications Power Apps s’affiche.

La manipulation est terminée.