Afficher les éléments de différentes hauteurs dans une galerie PowerApps

Si différents éléments de votre jeu de données contiennent différentes quantités de données dans le même champ, vous pouvez afficher complètement les éléments qui contiennent plus de données sans ajouter d’espace vide après les éléments qui contiennent moins de données. Ajoutez et configurez un contrôle de galerie à hauteur flexible aux fins suivantes :

• Configurez des contrôles Label pour réduire ou développer les contrôles en fonction de leur contenu.
• Positionnez chaque contrôle afin qu’il apparaisse automatiquement sous le contrôle situé au-dessus de lui.

Dans ce tutoriel, vous affichez des données concernant des revêtements de sol dans un contrôle de galerie à hauteur flexible . L’image de chaque produit s’affiche 5 pixels sous la présentation, que celle-ci contienne cinq lignes de texte ou deux lignes.

Lecture recommandée

Si vous n’avez jamais ajouté de contrôles à une galerie, suivez les étapes de la rubrique Afficher une liste d’éléments avant de poursuivre la lecture de cette rubrique.

Ajouter des données à une application vide

1. Téléchargez ce fichier Excel, qui contient les noms, présentations et liens vers des images de produits de revêtement de sol.

   

2. Chargez le fichier Excel dans un compte de stockage cloud, tel que OneDrive, Dropbox ou Google Drive.

3. Dans PowerApps Studio, cliquez ou appuyez sur Nouveau dans le menu Fichier.

4. Sur la mosaïque Application vide, cliquez ou appuyez sur Mode téléphone.

   

5. Ajoutez une connexion à la table FlooringEstimates dans le fichier Excel.

   Pour plus d’informations, consultez Ajouter une connexion.

Ajouter des données à une galerie

1. Sous l’onglet Insérer, cliquez ou appuyez sur Gallery, puis cliquez ou appuyez sur Flexible height.

   

2. Redimensionnez la galerie de façon à ce qu’elle occupe tout l’écran.

3. Définissez la propriété Items de la galerie sur FlooringEstimates.

Afficher le nom des produits

1. Dans le coin supérieur gauche de la galerie, appuyez ou cliquez sur l’icône en forme de crayon pour sélectionner le modèle de galerie.

   

2. Avec le modèle de galerie sélectionné, ajoutez-y un contrôle Label.

3. Définissez la propriété Text du contrôle Label sur l’expression suivante :
   ThisItem.Name

   

Afficher la présentation des produits

1. Avec le modèle de galerie sélectionné, ajoutez un autre contrôle Label et déplacez-le sous le premier contrôle Label.

2. Définissez la propriété Text du deuxième contrôle Label sur cette expression :
   ThisItem.Overview

3. Avec le second contrôle Label sélectionné, cliquez ou appuyez sur l’icône de balise de nom sous l’onglet Contenu et renommez le contrôle OverviewText.

   

4. Définissez la propriété AutoHeight de la zone OverviewText sur true.

   Cette étape garantit que la zone s’adapte à son contenu.

   

Afficher les images de produits

1. Redimensionnez le modèle afin qu’il soit deux fois plus haut.

   Vous pouvez ajouter des contrôles au modèle plus facilement à mesure que vous générez l’application et cette modification n’affecte pas l’aspect de l’application lorsque celle-ci s’exécute.

2. Avec le modèle de galerie sélectionné, ajoutez un contrôle Image et déplacez-le sous la zone OverviewText.

3. Veillez à définir la propriété Image du contrôle Image sur l’expression suivante :
   ThisItem.Image

4. Définissez la propriété Y du contrôle Image en fonction de la position et de la taille de la zone OverviewText, comme dans cette expression :
   OverviewText.Y + OverviewText.Height + 5

   

Appliquez le même concept si vous souhaitez ajouter d’autres contrôles : définissez la propriété Y de chaque contrôle en fonction des propriétés Y et Height du contrôle situé au-dessus.

Étapes suivantes

Apprenez-en davantage sur l’utilisation d’un contrôle galerie et des formules.