Vue d’ensemble d’un composant canevas

Les composants sont des blocs de construction réutilisables pour les applications canevas afin que les créateurs d’applications puissent créer des contrôles personnalisés à utiliser dans une application ou entre les applications à l’aide de la bibliothèque de composants. Les composants peuvent utiliser des fonctionnalités avancées telles que des propriétés personnalisées et activer des capacités complexes. Cet article présente les concepts de composants et quelques exemples.

Les composants sont utiles pour créer de plus grandes applications qui ont des modèles de contrôle similaires. Si vous mettez à jour une définition de composant dans l’application, toutes les instances de l’application reflètent vos modifications. Les composants réduisent également la duplication des efforts en éliminant la nécessité de copier/coller des contrôles et d’améliorer les performances. Les composants aident également à créer un développement collaboratif et standardisent l’apparence dans une organisation lorsque vous utilisez une bibliothèque de composants.

Regardez cette vidéo pour apprendre à utiliser les composants dans les applications canevas :

Composants dans les applications canevas

Vous pouvez créer un composant à partir d’une application, comme expliqué dans cet article, ou en créant un nouveau composant dans une bibliothèque de composants. Une bibliothèque de composants doit être utilisée pour les exigences d’utilisation des composants sur plusieurs écrans d’application. Vous pouvez également copier les composants existants dans une bibliothèque de composants existante ou nouvelle.

Pour créer un composant dans une application, accédez à Arborescence, sélectionnez l’onglet Composants, puis sélectionnez Nouveau composant :

Sélectionner Nouveau composant ouvre un canevas vide. Vous pouvez ajouter des contrôles dans le cadre de la définition de composant sur le canevas. Si vous modifiez un composant dans le canevas, vous mettrez à jour les instances du même composant dans d’autres écrans d’application. Les applications qui réutilisent un composant déjà créé peuvent également recevoir des mises à jour de composant après la publication des modifications de composant.

Vous pouvez sélectionner un composant dans la liste des composants existants dans le volet de gauche après avoir sélectionné un écran. Lorsque vous sélectionnez un composant, vous insérez une occurrence de ce composant à l’écran, tout comme vous insérez un contrôle.

Les composants disponibles dans l’application sont répertoriés sous la catégorie Personnalisé dans une liste des composants dans l’arborescence. Les composants importés depuis les bibliothèques de composants importés sont répertoriés sous la catégorie Composants de bibliothèque :

Propriétés personnalisées

Un composant peut recevoir des valeurs d’entrée et émettre des données si vous créez une ou plusieurs propriétés personnalisées. Ces scénarios sont avancés et nécessitent que vous compreniez les formules et les contrats d’engagement.

Propriété Input désigne la façon dont un composant reçoit les données à utiliser dans le composant. Les propriétés Input apparaissent dans l’onglet Propriétés du volet de droite si une occurrence du composant est sélectionnée. Vous pouvez configurer des propriétés Input avec des expressions ou des formules, tout comme vous configurez des propriétés standard dans d’autres contrôles. D’autres contrôles ont des propriétés d’entrée, telles que la propriété Default d’un contrôle Saisie de texte.

Propriété Output est utilisé pour émettre des données ou l’état d’un composant. Par exemple, la propriété Selected sur un contrôle Galerie est une propriété de sortie. Lorsque vous créez une propriété Output, vous pouvez déterminer quels autres contrôles peuvent faire référence à l’état du composant.

La procédure suivante explique plus en détail ces concepts.

Créer un exemple de composants

Dans cet exemple, vous allez créer un composant de menu qui ressemble au graphique suivant. Et vous pouvez modifier le texte plus tard pour l’utiliser dans plusieurs écrans, applications ou les deux :

Création d’un composant

1. Créez une application canevas vide.

2. Dans l’Arborescence, sélectionnez Composants, puis Nouveau composant pour créer un composant.

   

3. Sélectionnez le nouveau composant dans le volet de gauche, puis les points de suspension (…), et enfin Renommer. Tapez ou collez le nom comme MenuComponent.

4. Dans le volet de droite, définissez la largeur du composant sur 150 et sa hauteur sur 250, puis sélectionnez Nouvelle propriété personnalisée. Vous pouvez également définir la hauteur et la largeur sur toute autre valeur appropriée.

   

5. Dans les zones Nom d’affichage, Nom de propriété et Description, tapez ou collez du texte comme Items.

   

   N’incluez pas d’espaces dans le nom de la propriété, car vous ferez référence au composant par ce nom lorsque vous écrivez une formule. Par exemple, ComponentName.PropertyName.

   Le nom complet apparaît sous l’onglet Propriétés du volet droit si vous sélectionnez le composant. Un nom complet descriptif vous aide, vous et d’autres créateurs, à comprendre l’objectif de cette propriété. La Description apparaît dans une info-bulle si vous survolez le nom complet de cette propriété dans l’onglet Propriétés.

6. Dans la liste Type de données, sélectionnez Table, puis sélectionnez Créer.

   

   La propriété Items est définie sur une valeur par défaut en fonction du type de données que vous avez spécifié. Vous pouvez la définir sur une valeur qui convient à vos besoins. Si vous avez spécifié des données de type Table ou Enregistrement, vous souhaiterez peut-être modifier la valeur de la propriété Items pour qu’elle corresponde au schéma que vous souhaitez entrer dans le composant. Dans ce cas, vous allez la changer en une liste de chaînes.

   Vous pouvez définir la valeur de la propriété dans la barre de formule si vous sélectionnez le nom de la propriété sur l’onglet Propriétés du volet droit.

   

   Comme le montre le graphique suivant, vous pouvez également modifier la valeur de la propriété sur l’onglet Avancé du volet droit.

7. Définissez la propriété Items du composant sur la formule suivante :

   Table({Item:"SampleText"})
   

   

8. Dans le composant, insérez un contrôle Galerie vertical vide et sélectionnez Disposition dans le volet des propriétés en tant que Titre.

9. Assurez-vous que la liste des propriétés affiche la propriété Items (comme par défaut). Puis définissez la valeur de cette propriété sur cette expression :

   MenuComponent.Items
   

   Ainsi, la propriété Items du contrôle Galerie lit et dépend de la propriété en entrée Items du composant.

10. Facultatif - Définissez la propriété BorderThickness du contrôle Galerie sur 1 et sa propriété TemplateSize sur 50. Vous pouvez également mettre à jour les valeurs d’épaisseur de bordure et de taille de modèle avec toute autre valeur appropriée.

Ajouter un composant à un écran

Ensuite, vous allez ajouter le composant à un écran et spécifier une table de chaînes pour le composant à afficher.

1. Dans le volet de gauche, sélectionnez la liste des écrans, puis sélectionnez l’écran par défaut.

   

2. Sous l’onglet Insérer, ouvrez le menu Composants, puis sélectionnez MenuComponent.

   

   Le nouveau composant est nommé MenuComponent_1 par défaut.

3. Définissez la propriété Items de MenuComponent_1 sur cette formule :

   Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
   

   Cette instance ressemble à ce graphique, mais vous pouvez personnaliser le texte et les autres propriétés de chaque instance.

   

Créer et utiliser une propriété de sortie

Jusqu’à présent, vous avez créé un composant et l’avez ajouté à une application. Ensuite, vous allez créer une propriété de sortie qui reflète l’élément que l’utilisateur sélectionne dans le menu.

1. Ouvrez la liste des composants, puis sélectionnez MenuComponent.

2. Dans le volet de droite, sélectionnez l’onglet Propriétés, puis sélectionnez Nouvelle propriété personnalisée.

3. Dans les zones Nom d’affichage, Nom de propriété et Description, tapez ou collez du texte comme Selected.

4. Sous Type de propriété, sélectionnez Sortie, puis Créer.

   

5. Sur l’onglet Avancé, définissez la valeur de la propriété Selected sur cette expression, en ajustant le nombre dans le nom de la galerie si nécessaire :

   Gallery1.Selected.Item
   

   

6. Sur l’écran par défaut de l’application, ajoutez une Étiquette et définissez sa propriété Texte sur cette expression, en ajustant le nombre dans le nom du composant si nécessaire :

   MenuComponent_1.Selected
   

   MenuComponent_1 est le nom par défaut d’une instance, pas le nom de la définition de composant. Vous pouvez renommer n’importe quelle instance.

7. Tout en maintenant la touche Alt enfoncée, sélectionnez chaque élément dans le menu.

   Le contrôle Étiquette reflète l’élément de menu que vous avez sélectionné le plus récemment.

Scope

Les propriétés d’entrée et de sortie définissent clairement l’interface entre un composant et son application hôte. Par défaut, le composant est encapsulé afin qu’il soit plus facile de le réutiliser dans toutes les applications, ce qui nécessite l’utilisation des propriétés pour transmettre les informations dans et hors du composant. Les restrictions d’étendue gardent le contrat de données d’un composant simple et cohérent, et il permet d’activer les mises à jour de définition de composant—en particulier entre les applications avec des bibliothèques de composants.

Mais il y a des moments où un composant peut vouloir partager une source de données ou une variable avec son hôte. Surtout lorsque le composant est uniquement destiné à être utilisé dans une application particulière. Dans ces cas, vous pouvez accéder directement aux informations au niveau de l’application en activant le bouton bascule Accéder à la portée de l’application dans le volet des propriétés du composant :

Lorsque l’option Accéder à la portée de l’application est activée, les éléments suivants sont accessibles depuis un composant :

• Variables globales
• Collections
• Contrôles et composants sur les écrans, tels qu’un contrôle TextInput
• Les sources de données tabulaires, telles que les tables Dataverse

Lorsque ce paramètre est désactivé, aucun des éléments ci-dessus n’est disponible pour le composant. Les fonctions Set et Collect sont toujours disponibles, mais les variables et les collections résultantes sont limitées à l’instance de composant et ne sont pas partagées avec l’application.

Les sources de données non tabulaires, telles que Azure Blob Storage ou un connecteur personnalisé, sont disponibles, que ce paramètre soit activé ou désactivé. Considérez ces sources de données davantage comme faisant référence à une ressource d’environnement plutôt qu’à une ressource d’application. Lorsqu’un composant est importé dans une application à partir d’une bibliothèque de composants, ces sources de données de l’environnement sont également importées.

Les composants d’une bibliothèque de composants ne peuvent jamais avoir accès à l’étendue d’application, car il n’y a pas d’étendue d’application unique à laquelle se référer. Ainsi, ce paramètre n’est pas disponible dans ce contexte et est effectivement désactivé. Une fois importé dans une application, et si la personnalisation a été autorisée par le fabricant du composant, le commutateur peut être activé et le composant peut être modifié pour utiliser la portée de l’application.

Importer et exporter les composants (hors service)

La possibilité d’importer et d’exporter des composants est désactivée par défaut car cette fonctionnalité est supprimée. Bien que la méthode recommandée pour travailler avec des composants soit d’utiliser des bibliothèques de composants, vous pouvez toujours activer cette fonctionnalité par application en tant qu’exception jusqu’à ce qu’elle soit supprimée. Pour y parvenir, modifiez votre application dans Power Apps Studio puis, accédez à Paramètres > Fonctionnalités à venir > Retiré > Définir Exporter et importer des composants sur Activé.

Après avoir activé cette fonctionnalité, vous pouvez utiliser les fonctionnalités suivantes pour importer et exporter des composants.

Importer des composants à partir d’une autre application

Pour importer un ou plusieurs composants d’une application dans une autre, sélectionnez Importer des composants du menu Insérer, puis utilisez le menu déroulant Personnalisé. Ou utilisez Composants dans l’arborescence du volet de gauche.

Une boîte de dialogue répertorie toutes les applications contenant des composants que vous êtes autorisé à modifier. Sélectionnez une application, puis sélectionnez Importation pour importer la version publiée la plus récente de tous les composants de cette application. Après avoir importé au moins un composant, vous pouvez modifier votre copie et supprimer ceux dont vous n’avez pas besoin.

Vous pouvez enregistrer une application avec des composants existants dans un fichier localement, puis réutiliser le fichier en l’important. Vous pouvez utiliser le fichier pour importer des composants dans une autre application.

Si l’application contient une version modifiée du même composant, vous êtes invité à décider de remplacer la version modifiée ou d’annuler l’importation.

Après avoir créé des composants dans une application, d’autres applications peuvent consommer les composants de cette application en les important.

Exporter des composants depuis votre application

Vous pouvez exporter des composants dans un fichier et les télécharger pour les importer dans une autre application.

Sélectionnez l’option Exporter des composants à partir de la section Composants dans l’arborescence du volet de gauche :

Vous pouvez également utiliser le menu Insérer, puis sélectionner le menu déroulant Personnalisé à la place.

Sélectionner Exporter des composants télécharge les composants dans un fichier :

Le fichier de composant téléchargé utilise le fichier avec l’extension de nom .msapp.

Importer des composants à partir d’un fichier de composants exporté

Pour importer des composants à partir d’un fichier de composants exporté, sélectionnez Importer des composants du menu Insérer, puis utilisez le menu déroulant Personnalisé ou utilisez Composant dans l’arborescence du volet de gauche. Dans la boîte de dialogue des composants, sélectionnez Télécharger un fichier au lieu de sélectionner d’autres composants ou applications :

Depuis la boîte de dialogue Ouvrir, accédez à l’emplacement du fichier de composants et sélectionnez Ouvrir pour importer des composants dans l’application.

Importer des composants à partir de l’application exportée

Vous pouvez enregistrer une application localement en utilisant l’option Fichier > Enregistrer sous :

Une fois que vous avez enregistré l’application, vous pouvez réutiliser les composants de cette application en utilisant la même méthode d’importation de composants à partir d’un fichier. Procédez comme suit dans la section précédente sur l’importation des composants depuis le fichier de composants exporté.

Limitations connues

• Une propriété d’entrée personnalisée ne peut pas être configurée sur une valeur de propriété de sortie personnalisée sur des instances identiques ou différentes lorsque vous avez deux instances ou plus du même composant dans une application. Cette action entraînera un message d’avertissement de référence circulaire. Pour contourner cette limitation, vous pouvez créer une copie du composant dans votre application.
• L’ajout et l’exécution des flux Power Automate dans les bibliothèques de composants ne sont pas pris en charge.
• Vous ne pouvez pas enregistrer des sources de données ou des contrôles qui incluent des données provenant de ces sources de données (telles que des formulaires, des grilles fluides ou des tables de données) avec des composants.
• Vous ne pouvez pas insérer un composant dans une galerie ou un formulaire (y compris le formulaire SharePoint).
• Les composants ne prennent pas en charge la fonction UpdateContext, mais vous pouvez créer et mettre à jour des variables dans un composant à l’aide de la fonction Set. La portée de ces variables est limitée au composant, mais vous pouvez y accéder depuis l’extérieur du composant via des propriétés de sortie personnalisées.

Étapes suivantes

Apprenez à utiliser une bibliothèque de composants pour créer un référentiel de composants réutilisables.

Voir aussi

• Bibliothèque de composants
• Gestion du cycle de vie des applications (ALM) de la bibliothèque de composants
• Mapper les champs d’entrée d’un composant
• Ajouter un élément multimédia à un composant
• Formules de comportement pour les composants
• Power Apps component framework
• Ajouter des composants canevas à une page personnalisée dans une application pilotée par modèle