Afficher, trier et filtrer les données dans une galerie PowerApps

Créez une galerie pour afficher des images et du texte sur plusieurs produits et trier et filtrer ces informations.

Dans PowerApps, vous pouvez utiliser une galerie pour présenter plusieurs éléments connexes, comme dans un catalogue. Les galeries sont très utiles pour afficher des informations sur les produits, comme le nom et le prix. Dans cette rubrique, nous créons une galerie, puis nous trions et filtrons les informations à l’aide de fonctions semblables à celles d’Excel. En outre, lorsqu’un élément est sélectionné, une bordure est affichée autour de l’élément.

Conditions préalables

• Inscrivez-vous à PowerApps, puis installez PowerApps. Lorsque vous ouvrez PowerApps, connectez-vous avec les informations d’identification que vous avez utilisées pour vous inscrire.
• Créez une application tablette à partir d’un modèle, à partir de données ou créez-la entièrement.
• Découvrez comment configurer un contrôle.
• Ces étapes utilisent l’exemple de données d’entrée CreateFirstApp, qui comprend des images .jpg. Le fichier zip comprend un fichier XML qui peut être converti au format Excel. Sinon, PowerApps lit automatiquement les fichiers dans les fichiers .zip et les importe. Vous pouvez télécharger et utiliser ces exemples de données ou importer vos propres données.

Afficher les données dans une galerie

1. Créez une collection appelée Inventory à l’aide de l’exemple de données. Procédure :

   1. Dans l’onglet Insertion, sélectionnez Contrôles, puis Importer :

   
   1. Définissez la propriété OnSelect du contrôle d’importation sur la formule suivante :
   Collect(Inventory, Import1!Data)

   
   1. Sélectionnez le bouton Importer les données pour ouvrir l’Explorateur Windows. Sélectionnez CreateFirstApp.zip, puis sélectionnez Ouvrir. 1. Dans le menu Fichier, sélectionnez Collections. La collection Inventory est répertoriée avec les données que vous avez importées :

   

   Vous venez de créer la collection Inventory, qui contient les informations sur cinq produits, y compris une image, le nom du produit et le nombre d’unités en stock.

   Remarque :

   Le contrôle d’importation est utilisé pour importer les données Excel et créer la collection. Le contrôle d’importation importe les données lorsque vous créez votre application et que vous affichez un aperçu de votre application. Actuellement, le contrôle d’importation n’importe pas les données lorsque vous publiez votre application.

2. Sélectionnez la flèche Précédent pour revenir dans l’éditeur.

3. Sous l’onglet Insérer, cliquez ou appuyez sur Gallery, puis cliquez ou appuyez sur la galerie Horizontal.

   

4. Dans le volet droit, cliquez ou appuyez sur l’option dans laquelle le titre et le sous-titre recouvrent le graphique :

   

5. Définissez la propriété Items de la galerie sur Inventory :

   

6. Renommez la galerie en ProductGallery et déplacez la galerie de sorte qu’elle ne bloque pas les autres contrôles. Redimensionnez la galerie pour qu’elle contienne trois produits :

   

7. Dans le premier élément de la galerie, sélectionnez l’étiquette du bas :

   

   Remarque :

   Lorsque vous modifiez le premier élément d’une galerie, vous modifiez automatiquement tous les autres éléments de la galerie.

8. Définissez la propriété Text de l’étiquette sur l’expression suivante :
   ThisItem!UnitsInStock
   

   Lorsque vous effectuez cette opération, l’étiquette affiche les unités en stock de chaque produit :

Dans ces étapes, vous avez importé des données avec des images .jpg dans une collection. Vous avez ensuite ajouté une galerie qui affiche ces données et configuré un contrôle d’étiquette pour afficher les unités en stock de chaque produit.

Mettre en surbrillance l’élément de la galerie sélectionné

1. Sélectionnez n’importe lequel des éléments de la galerie, à l’exception du premier. L’icône de modification s’affiche (en haut à gauche). Sélectionnez l’icône de modification :
   
   
2. Dans l’onglet Insertion, sélectionnez Formes, puis sélectionnez le rectangle. Un rectangle bleu s’affiche dans chaque élément de la galerie.
3. Dans l’onglet Accueil, sélectionnez Remplir, puis sélectionnez Aucun remplissage.
4. Sélectionnez Bordure, sélectionnez Style de bordure, puis sélectionnez la ligne continue.
5. Sélectionnez de nouveau Bordure et réglez l’épaisseur sur la valeur 3. Redimensionnez le rectangle afin qu’il entoure l’élément de la galerie. Maintenant, les éléments de la galerie ont une bordure bleue et doivent ressembler à ce qui suit :
   
   

6. Sous l’onglet Forme, sélectionnez Visible, puis entrez la formule suivante dans la barre de formule :

   If(ThisItem!IsSelected, true)

   un rectangle bleu entoure la sélection actuelle dans la galerie. Sélectionnez quelques éléments de la galerie pour confirmer que le rectangle s’affiche autour de chaque élément que vous sélectionnez. N’oubliez pas, vous pouvez également ouvrir l’aperçu pour voir et tester ce que vous créez.

À l’aide de ces étapes, vous avez ajouté une bordure autour de la sélection actuelle dans la galerie.

Trier et filtrer des éléments de la galerie

Dans ces étapes, nous allons trier les éléments de la galerie en ordre croissant ou décroissant. En outre, nous allons ajouter un contrôle de curseur pour filtrer les éléments de la galerie par le nombre d’unités en stock que vous choisissez.

Trier dans l’ordre croissant ou décroissant

1. Sélectionnez n’importe lequel des éléments de la galerie, à l’exception du premier.

2. La propriété Items est actuellement définie sur Inventory (le nom de votre collection). Modifiez-la comme suit :

   Sort(Inventory, ProductName)

   Lorsque vous effectuez cette opération, les éléments dans la galerie sont triés par nom de produit en ordre croissant :

   Essayez par ordre décroissant. Définissez la propriété Items de la galerie sur la formule suivante :

   Sort(Inventory, ProductName, Descending)

Ajouter un contrôle de curseur et filtrer des éléments dans la galerie

1. Ajoutez un contrôle de curseur (onglet Insertion > Contrôles), renommez-le en StockFilter et déplacez-le dans la galerie.

2. Configurez le curseur afin que les utilisateurs ne puissent pas définir une valeur en dehors de la plage d’unités en stock :

   1. Dans l’onglet Contenu, sélectionnez Min, puis entrez l’expression suivante :
      Min(Inventory, UnitsInStock)
      
   2. Dans l’onglet Contenu, sélectionnez Max, puis entrez l’expression suivante :
      Max(Inventory, UnitsInStock)

3. Sélectionnez n’importe lequel des éléments de la galerie, à l’exception du premier. Définissez la propriété Items de la galerie sur l’expression suivante :
   Filter(Inventory, UnitsInStock<=StockFilter!Value)

4. Dans Aperçu, ajustez le curseur sur une valeur comprise entre la quantité plus élevée et la quantité la plus basse dans la galerie. Lorsque vous ajustez le curseur, la galerie affiche uniquement les produits dont le nombre est inférieur à la valeur que vous choisissez :
   

À présent, nous allons ajouter des éléments à notre filtre :

1. Revenez dans l’éditeur.
2. Dans l’onglet Insertion, sélectionnez Texte, sélectionnez Texte d’entrée et renommez le nouveau contrôle en NameFilter. Déplacez le contrôle de texte sous le curseur.
3. Définissez la propriété Items de la galerie sur l’expression suivante :
   Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
4. Dans Aperçu, positionnez le curseur sur 30, puis tapez la lettre g dans le contrôle d’entrée de texte. La galerie affiche le seul produit avec moins de 30 unités en stock et dont le nom contient la lettre « g » :
   
   

astuces et conseils

• À tout moment, vous pouvez sélectionner le bouton Aperçu ( ) pour voir ce que vous avez créé et le tester.
• Lorsque vous concevez votre application, vous pouvez redimensionner les contrôles et les déplacer par cliquer-déplacer.
• Appuyez sur Échap ou sélectionnez la croix (X) pour fermer la fenêtre d’aperçu.
• Lorsque vous utilisez une galerie, sélectionnez le premier élément dans la galerie pour modifier tous les éléments de la galerie. Par exemple, sélectionnez le premier élément pour ajouter une bordure à tous les éléments de la galerie.
• Pour mettre à jour les propriétés de la galerie, sélectionnez n’importe lequel des éléments de la galerie, à l’exception du premier. Par exemple, sélectionnez le deuxième élément pour mettre à jour Items, ShowScrollbar et d’autres propriétés qui s’appliquent à la galerie (et pas aux éléments de la galerie).
  

Ce que vous avez appris

Dans cette rubrique, vous avez effectué les opérations suivantes :

• Création d’une collection, importation de données avec des images .jpg dans cette collection et présentation de ces données dans une galerie.
• Sous chaque image de la galerie, configuration d’une étiquette qui répertorie les unités en stock pour cet article.
• Ajout d’une bordure autour de l’élément sélectionné.
• Tri des éléments par nom de produit en ordre croissant ou décroissant.
• Ajout d’un curseur et d’un contrôle d’entrée de texte pour filtrer les produits par nombre d’unités en stock et par nom de produit.