Créer des composants réutilisables dans Power Apps

Les composants Power Apps sont des blocs réutilisables que vous créez une fois et posez ensuite sur plusieurs écrans, ou dans plusieurs applications : un en-tête, un menu, un bouton de validation. Si vous modifiez le bloc, toutes ses copies suivent. Dans une entreprise, cela donne des applications qui se ressemblent et qui coûtent moins cher à faire évoluer.

Ce que les composants apportent à une entreprise

Prenons une situation type : une ETI a construit huit applications internes, pour les achats, les RH et la maintenance, chacune avec son en-tête recopié à la main. Le logo change. Sans composant, il faut ouvrir chaque application et chaque écran, et il y aura forcément des oublis. Avec un en-tête placé dans une bibliothèque commune, on le modifie une fois, on publie, et chaque application propose la mise à jour à son prochain passage en édition.

Trois effets se voient vite :

• Une apparence cohérente. Les utilisateurs retrouvent les mêmes repères d’une application à l’autre, et n’ont pas à réapprendre l’outil.
• Une maintenance plus simple. Un défaut dans un élément utilisé quinze fois se corrige à un seul endroit.
• Un travail d’équipe plus fluide. Les créateurs partent de blocs validés et ne refont pas ce qui existe déjà. Microsoft ajoute un gain de performances, car on évite de dupliquer des contrôles.

La suite est écrite pour la personne qui fabrique. Si vous débutez, commencez par une application simple à partir des modèles Power Apps prêts à l’emploi : les composants prennent tout leur intérêt quand les répétitions apparaissent.

Composant, bibliothèque, composant de code : de quoi parle-t-on

Cet article porte sur les deux premiers, créés sans code. L’ancienne importation et exportation de composants entre applications est retirée par Microsoft : ne bâtissez plus rien dessus.

Créer votre premier composant

1. Ouvrez l’application dans Power Apps Studio. Dans l’Arborescence, sélectionnez l’onglet Composants, puis Nouveau composant.
2. Un canevas vide s’ouvre. Sélectionnez le composant dans le volet de gauche, ouvrez les points de suspension (...), choisissez Renommer et donnez un nom clair, comme MenuPrincipal ou EnTeteSection.
3. Réglez sa largeur et sa hauteur dans le volet de droite.
4. Ajoutez les contrôles voulus : boutons, étiquettes, icônes, comme sur un écran ordinaire.
5. Revenez sur un écran. Dans le volet Insérer, votre composant apparaît dans la catégorie Personnalisé : sélectionnez-le pour placer une occurrence, c’est-à-dire une copie liée au modèle.

Chaque occurrence se positionne et se redimensionne comme un contrôle. Si vous modifiez la définition du composant, toutes les occurrences de l’application reflètent le changement.

Faire communiquer le composant avec l’écran

Par défaut, un composant est isolé : il ne voit ni les variables de l’application, ni ses données, ni les contrôles des écrans. Tout passe par des propriétés personnalisées, ce qui le rend facile à réutiliser. Les formules de cet article utilisent la virgule. Dans une interface en français, selon la langue ou les réglages régionaux, le séparateur d’arguments devient le point-virgule (;).

Les propriétés d’entrée : donner des données au composant

Sélectionnez le composant, puis Nouvelle propriété personnalisée. Renseignez le nom d’affichage, le nom de la propriété (sans espace) et la description. Laissez le type sur Entrée, choisissez le type de données Table, puis Créer. Donnez une valeur d’exemple à cette propriété Items :

Table({Item: "Exemple"})

Insérez dans le composant une galerie, qui affiche une ligne par élément d’une liste, et reliez sa propriété Items à la propriété du composant :

MenuPrincipal.Items

Sur chaque écran, l’occurrence reçoit ensuite sa propre liste. Le même menu peut donc afficher d’autres entrées ailleurs :

Table({Item: "Accueil"}, {Item: "Demandes"}, {Item: "Aide"})

Les propriétés de sortie : renvoyer une information à l’écran

Créez une seconde propriété, nommée Selected, de type Sortie, et donnez-lui cette valeur pour exposer l’élément choisi dans la galerie interne :

Gallery1.Selected.Item

Une étiquette de l’écran peut alors afficher MenuPrincipal_1.Selected. MenuPrincipal_1 est le nom de l’occurrence et non du modèle : vous pouvez la renommer.

Remettre un composant à zéro

Tout composant possède une propriété OnReset, disponible en production, qui s’exécute quand un contrôle extérieur appelle Reset(MenuPrincipal_1). On y place par exemple Set(_valeur, 12). L’option de propriété d’entrée Raise OnReset when value changes déclenche aussi ce traitement quand la valeur reçue change.

Les propriétés de comportement personnalisées, qui permettraient au composant de déclencher une action définie sur l’écran, sont toujours présentées comme expérimentales dans la documentation Microsoft sur les formules de comportement. Testez-les avant de construire une application de production dessus. Pour construire un menu qui change d’écran, voyez aussi les règles de navigation entre écrans.

Accéder aux données de l’application

Si un composant ne sert que dans une application, activez l’option Accéder à l’étendue de l’application (Access app scope) dans son volet de propriétés. Il voit alors les variables globales, les collections, les contrôles des écrans et les sources tabulaires, comme une table Dataverse. L’option n’existe pas dans une bibliothèque : il n’y a pas d’application unique à laquelle se référer.

Partager des composants entre applications

La bibliothèque de composants est le moyen recommandé par Microsoft pour réutiliser un bloc d’une application à l’autre.

1. Sur make.powerapps.com, ouvrez Plus, puis Tout découvrir et Bibliothèques de composants. Vous pouvez épingler l’entrée dans le menu de gauche.
2. Sélectionnez Nouvelle bibliothèque de composants et nommez-la.
3. Construisez vos composants comme plus haut. Les écrans de la bibliothèque ne servent qu’aux essais.
4. Enregistrez, avec une note de version si possible : elle s’affichera pour les créateurs lors de la mise à jour.
5. Publiez. Seules les versions publiées sont proposées aux applications.
6. Dans une application, ouvrez le volet Insérer ou le +, puis Obtenir plus de composants. Choisissez les composants à importer : ils apparaissent ensuite dans la catégorie Composants de la bibliothèque.

Si une bibliothèque n’apparaît pas dans la liste, c’est qu’elle n’est pas partagée avec vous : elle se partage comme une application Canvas. Pour la faire passer d’un environnement à l’autre, rangez-la dans une solution Power Platform, le paquet qui transporte applications et flux.

Mettre à jour une bibliothèque

Après une nouvelle publication, les applications ne changent pas toutes seules. Le créateur reçoit une notification à l’ouverture en édition, sélectionne Réviser, puis Mettre à jour. Il peut aussi cliquer sur l’icône de vérification des mises à jour dans le volet d’insertion. Testez d’abord sur une application de développement, puis republiez les applications concernées pour que leurs utilisateurs reçoivent la nouvelle version.

Le réglage Autoriser la personnalisation, actif par défaut, décide si une application peut modifier un composant de bibliothèque. Une modification crée une copie locale : celle-ci ne reçoit plus les mises à jour de la bibliothèque. Désactivez ce réglage pour les blocs qui doivent rester identiques partout.

Bonnes pratiques et limites connues

Quelques habitudes évitent la plupart des ennuis :

• Gardez chaque composant simple et concentré sur une seule fonction.
• Choisissez des noms de propriétés explicites, et remplissez leur description : elle s’affiche en info-bulle.
• Donnez une valeur par défaut sensée à chaque propriété, pour que le composant s’affiche correctement dès son insertion.
• Évitez de lier un composant générique à une source de données précise : passez les données en entrée.
• Testez sur différents écrans et tailles avant de le diffuser largement.

Microsoft liste plusieurs limites à connaître avant de se lancer :

• Un composant ne peut pas être inséré dans une galerie ni dans un formulaire, y compris un formulaire SharePoint.
• On ne peut pas enregistrer dans un composant des sources de données, ni des contrôles qui en contiennent, comme les formulaires ou les tables de données.
• UpdateContext n’est pas disponible. Set fonctionne, avec une variable limitée au composant, lisible de l’extérieur par une propriété de sortie.
• Les flux Power Automate ne peuvent être ni ajoutés ni exécutés dans une bibliothèque de composants.
• Relier l’entrée d’une occurrence à la sortie d’une occurrence du même composant provoque un avertissement de référence circulaire. La solution de contournement est une copie du composant.
• Les composants de code ne sont pas pris en charge dans les bibliothèques, et une bibliothèque enregistrée en local ne s’importe pas.

Si un composant ne réagit pas comme prévu, la cause est souvent une confusion entre ses propriétés et celles de ses contrôles internes : ces derniers ne sont pas accessibles de l’extérieur, il faut les exposer par une propriété personnalisée. Si une modification de bibliothèque n’arrive pas dans une application, vérifiez qu’elle a bien été publiée. Si l’application ralentit, simplifiez les formules du composant ou réduisez le nombre d’occurrences affichées.

Quand déléguer la conception de vos composants

Pour un en-tête ou un bouton dans une seule application, vous n’avez aucun besoin d’aide : c’est un bon exercice pour progresser. Il vaut mieux confier le sujet à quelqu’un d’expérimenté quand plusieurs services construisent leurs applications en parallèle, quand une charte commune doit s’imposer, ou quand une mise à jour de bibliothèque peut toucher des applications en production. Se posent alors des questions d’organisation autant que de technique : qui publie, qui teste, comment garder les versions. Notre page sur les applications métier Power Apps situe ces projets et ce qu’ils remplacent.

Questions fréquentes

Quelle est la différence entre un composant et un écran dans Power Apps ?

Un écran est une page complète de l’application, vers laquelle l’utilisateur navigue. Un composant est un élément réutilisable que vous placez sur plusieurs écrans. Il garde sa structure partout, tandis que ses propriétés peuvent varier d’une occurrence à l’autre.

Puis-je modifier un composant déjà utilisé sur plusieurs écrans ?

Oui, c’est l’intérêt de la méthode. Dans une même application, toutes les occurrences reflètent aussitôt la modification. Pour une bibliothèque, il faut publier la nouvelle version, puis accepter la mise à jour dans chaque application.

Combien de composants peut-on créer dans une application ?

Les pages consultées de la documentation ne fixent pas de nombre maximal. Le bon critère est l’usage : un composant se justifie quand un élément se répète vraiment. Des composants trop complexes, affichés en grand nombre, peuvent ralentir l’application.

Les composants fonctionnent-ils dans les applications Canvas et pilotées par modèle ?

Ils sont conçus pour les applications Canvas. Vous pouvez aussi les utiliser dans une application pilotée par modèle, construite à partir des données Dataverse, grâce aux pages personnalisées et à la bibliothèque de composants. Microsoft le précise dans sa présentation des composants Canvas.

Peut-on placer un composant dans une galerie ?

Non, Microsoft indique qu’on ne peut l’insérer ni dans une galerie, ni dans un formulaire. Un composant peut en revanche contenir une galerie, comme le menu de cet article. Pour personnaliser l’affichage d’une ligne de galerie, travaillez directement sur son modèle.

Comment supprimer un composant qui n’est plus utilisé ?

Repérez d’abord les écrans qui l’utilisent et retirez-en les occurrences. Supprimez ensuite le composant depuis ses points de suspension, dans l’onglet Composants de l’arborescence. Une bibliothèque, elle, ne peut pas être supprimée tant qu’une application y fait référence.