Afficher, trier et filtrer les données dans une galerie PowerAppsShow, sort, and filter data in a PowerApps gallery

Créez une galerie pour afficher des images et du texte sur plusieurs produits et trier et filtrer ces informations.Create a gallery to show images and text about several products, and sort and filter that information.

Dans PowerApps, vous pouvez utiliser une galerie pour présenter plusieurs éléments connexes, comme dans un catalogue.In PowerApps, you can use a gallery to show several related items, just as you see in a catalog. Les galeries sont très utiles pour afficher des informations sur les produits, comme le nom et le prix.Galleries are great for showing information about products, such as names and prices. Dans cette rubrique, nous créons une galerie, puis nous trions et filtrons les informations à l’aide de fonctions semblables à celles d’Excel.In this topic, we create a gallery and sort and filter the information using Excel-like functions. En outre, lorsqu’un élément est sélectionné, une bordure est affichée autour de l’élément.Also, when an item is selected, a border is placed around the item.

Note

Cette rubrique utilise une application pour tablette.This topic uses a tablet app. Vous pouvez utiliser une application pour téléphone, mais vous devrez redimensionner certains contrôles.You can use a phone app but you will need to resize some of the controls.

Conditions préalablesPrerequisites

  • Inscrivez-vous à PowerApps, puis installez PowerApps.Sign up for PowerApps and install PowerApps. Lorsque vous ouvrez PowerApps, connectez-vous avec les informations d’identification que vous avez utilisées pour vous inscrire.When you open PowerApps, sign-in using the same credentials that you used to sign up.
  • Créez une application tablette à partir d’un modèle, à partir de données ou créez-la entièrement.Create a tablet app from a template, from data, or from scratch.
  • Découvrez comment configurer un contrôle.Learn how to configure a control.
  • Ces étapes utilisent l’exemple de données d’entrée CreateFirstApp, qui comprend des images .jpg.These steps use the CreateFirstApp as sample input data, which includes .jpg images. Le fichier zip comprend un fichier XML qui peut être converti au format Excel.The zip file includes an XML file that can be converted to Excel. Sinon, PowerApps lit automatiquement les fichiers dans les fichiers .zip et les importe.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Vous pouvez télécharger et utiliser ces exemples de données ou importer vos propres données.You can download and use this sample data, or import your own.
  1. Créez une collection appelée Inventory à l’aide de l’exemple de données.Create a collection named Inventory using the sample data. Procédure :Steps include:

    1. Dans l’onglet Insertion, sélectionnez Contrôles, puis Importer :On the Insert tab, select Controls, and then select Import:

    2. Définissez la propriété OnSelect du contrôle d’importation sur la formule suivante :Set the OnSelect property of the import control to the following formula:
      Collect(Inventory, Import1!Data)Collect(Inventory, Import1!Data)

    3. Sélectionnez le bouton Importer les données pour ouvrir l’Explorateur Windows.Select the Import Data button to open Windows Explorer. Sélectionnez CreateFirstApp.zip, puis sélectionnez Ouvrir.Select CreateFirstApp.zip, and select Open.
    4. Dans le menu Fichier, sélectionnez Collections.In the File menu, select Collections. La collection Inventory est répertoriée avec les données que vous avez importées :The Inventory collection is listed with the data you imported:

      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.You've just created the Inventory collection, which contains information about five products, including a design image, the name of the product, and the number of units in stock.

      Note

      Le contrôle d’importation est utilisé pour importer les données Excel et créer la collection.The import control is used to import Excel-like data and create the 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.The import control imports data when you are creating your app, and previewing your app. Actuellement, le contrôle d’importation n’importe pas les données lorsque vous publiez votre application.Currently, the import control does not import data when you publish your app.

  2. Sélectionnez la flèche Précédent pour revenir dans l’éditeur.Select the back arrow to return to the designer.
  3. Sous l’onglet Insérer, cliquez ou appuyez sur Gallery, puis cliquez ou appuyez sur la galerie Horizontal.On the Insert tab, click or tap Gallery, and then click or tap the Horizontal gallery.

  4. Dans le volet droit, cliquez ou appuyez sur l’option dans laquelle le titre et le sous-titre recouvrent le graphique :In the right-hand pane, click or tap the option in which the title and the subtitle overlay the graphic:

  5. Définissez la propriété Items de la galerie sur Inventory :Set the Items property of the gallery to Inventory:

  6. Renommez la galerie en ProductGallery et déplacez la galerie de sorte qu’elle ne bloque pas les autres contrôles.Rename the gallery to ProductGallery, and move the gallery so it doesn't block the other controls. Redimensionnez la galerie pour qu’elle contienne trois produits :Resize the gallery so it shows three products:

  7. Dans le premier élément de la galerie, sélectionnez l’étiquette du bas :In the first item of the gallery, select the bottom label:

    Note

    Lorsque vous modifiez le premier élément d’une galerie, vous modifiez automatiquement tous les autres éléments de la galerie.When you change the first item in any gallery, you automatically change all other items in the gallery.

  8. Définissez la propriété Text de l’étiquette sur l’expression suivante :Set the Text property of the label to the following expression:
    ThisItem!UnitsInStockThisItem!UnitsInStock

    Lorsque vous effectuez cette opération, l’étiquette affiche les unités en stock de chaque produit :When you do this, the label shows the units in stock for each product:

Note

Par défaut, la propriété Text de l’étiquette du haut est définie sur ThisItem!ProductName.By default, the Text property of the top label is set to ThisItem!ProductName. Vous pouvez la modifier pour utiliser n’importe quel autre élément de votre collection.You can change it to any other item in your collection. Par exemple, si votre collection contient des champs ProductDescription ou Price, vous pouvez définir l’étiquette sur ThisItem!ProductDescription ou ThisItem!Price.For example, if your collection has ProductDescription or Price fields, you can set the label to ThisItem!ProductDescription or ThisItem!Price.

Dans ces étapes, vous avez importé des données avec des images .jpg dans une collection.Using these steps, you imported data that includes .jpg images into a 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.You then added a gallery that displays the data and configured a label to show the units in stock for each product.

  1. Sélectionnez n’importe lequel des éléments de la galerie, à l’exception du premier.Select any item in the gallery except the first one. L’icône de modification s’affiche (en haut à gauche).The edit icon displays (upper left corner). Sélectionnez l’icône de modification :Select the edit icon:
  2. Dans l’onglet Insertion, sélectionnez Formes, puis sélectionnez le rectangle.On the Insert tab, select Shapes, and then select the rectangle. Un rectangle bleu s’affiche dans chaque élément de la galerie.A blue solid rectangle appears in each gallery item.
  3. Dans l’onglet Accueil, sélectionnez Remplir, puis sélectionnez Aucun remplissage.On the Home tab, select Fill, and then select No Fill.
  4. Sélectionnez Bordure, sélectionnez Style de bordure, puis sélectionnez la ligne continue.Select Border, select Border Style, and then select the solid line.
  5. Sélectionnez de nouveau Bordure et réglez l’épaisseur sur la valeur 3.Select Border again, and set the thickness to 3. Redimensionnez le rectangle afin qu’il entoure l’élément de la galerie.Resize the rectangle so that it surrounds the gallery item. Maintenant, les éléments de la galerie ont une bordure bleue et doivent ressembler à ce qui suit :The items in your gallery now have a blue border and should look similar to the following:
  6. Sous l’onglet Forme, sélectionnez Visible, puis entrez la formule suivante dans la barre de formule :On the Shape tab, select Visible, and then enter the following formula in the Formula Bar:

    If(ThisItem!IsSelected, true)If(ThisItem!IsSelected, true)

    un rectangle bleu entoure la sélection actuelle dans la galerie.A blue rectangle surrounds the current selection in a gallery. Sélectionnez quelques éléments de la galerie pour confirmer que le rectangle s’affiche autour de chaque élément que vous sélectionnez.Select a few gallery items to confirm that the rectangle appears around each item that you select. N’oubliez pas, vous pouvez également ouvrir l’aperçu pour voir et tester ce que vous créez.Remember, you can also open Preview to see and test what you're creating.

Conseil

Sélectionnez le rectangle, sélectionnez Réorganiser sur l’onglet Accueil, puis sélectionnez Mettre à l’arrière-plan.Select the rectangle, select Reorder on the Home tab, and then select Send to Back. À l’aide de cette fonctionnalité, vous pouvez sélectionner un élément de la galerie sans que la bordure ne bloque quoi que ce soit.Using this feature, you can select a gallery item without the border blocking anything.

À l’aide de ces étapes, vous avez ajouté une bordure autour de la sélection actuelle dans la galerie.Using these steps, you added a border around the current selection in the gallery.

Dans ces étapes, nous allons trier les éléments de la galerie en ordre croissant ou décroissant.In these steps, we are going to sort the gallery items in ascending and descending order. 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.Also, we'll add a slider control to 'filter' gallery items by the units in stock that you choose.

Trier dans l’ordre croissant ou décroissantSort in ascending or descending order

  1. Sélectionnez n’importe lequel des éléments de la galerie, à l’exception du premier.Select any item in the gallery except the first one.
  2. La propriété Items est actuellement définie sur Inventory (le nom de votre collection).The Items property is currently set to Inventory (the name of your collection). Modifiez-la comme suit :Change it to the following:

    Sort(Inventory, ProductName)Sort(Inventory, ProductName)

    Lorsque vous effectuez cette opération, les éléments dans la galerie sont triés par nom de produit par ordre croissant : When you do this, the items in the gallery are sorted by the product name in ascending order:

    Essayez par ordre décroissant.Try descending order. Définissez la propriété Items de la galerie sur la formule suivante :Set the Items property of the gallery to the following formula:

    Sort(Inventory, ProductName, Descending)Sort(Inventory, ProductName, Descending)

  1. Ajoutez un contrôle de curseur (onglet Insertion > Contrôles), renommez-le en StockFilter et déplacez-le dans la galerie.Add a Slider control (Insert tab > Controls), rename it to StockFilter, and move it under the gallery.
  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 :Configure the slider so that users can't set it to a value outside the range of units in stock:

    1. Dans l’onglet Contenu, sélectionnez Min, puis entrez l’expression suivante :On the Content tab, select Min, and then enter the following expression:
      Min(Inventory, UnitsInStock)
    2. Dans l’onglet Contenu, sélectionnez Max, puis entrez l’expression suivante :On the Content tab, select Max, and then enter the following expression:
      Max(Inventory, UnitsInStock)
  3. Sélectionnez n’importe lequel des éléments de la galerie, à l’exception du premier.Select any item in the gallery except the first one. Définissez la propriété Items de la galerie sur l’expression suivante :Set the Items property of the gallery to the following expression:
    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.In Preview, adjust the slider to a value that's between the highest and the lowest quantity in the gallery. Lorsque vous ajustez le curseur, la galerie affiche uniquement les produits dont le nombre est inférieur à la valeur que vous choisissez :As you adjust the slider, the gallery shows only those products that are less than the value you choose:

À présent, nous allons ajouter des éléments à notre filtre :Now, let's add to our filter:

  1. Revenez dans l’éditeur.Go back to the designer.
  2. Dans l’onglet Insertion, sélectionnez Texte, sélectionnez Texte d’entrée et renommez le nouveau contrôle en NameFilter.On the Insert tab, select Text, select Input Text, and rename the new control to NameFilter. Déplacez le contrôle de texte sous le curseur.Move the text control below the slider.
  3. Définissez la propriété Items de la galerie sur l’expression suivante :Set the Items property of the gallery to the following expression:
    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.In Preview, set the slider to 30, and type the letter g in the text-input control. La galerie affiche le seul produit avec moins de 30 unités en stock et dont le nom contient la lettre « g » :The gallery shows the only product with less than 30 units in stock and has a name with the letter "g":

astuces et conseilsTips and Tricks

  • À tout moment, vous pouvez sélectionner le bouton Aperçu () pour voir ce que vous avez créé et le tester.At anytime, you can select the preview button () to see what you created and test it.
  • Lorsque vous concevez votre application, vous pouvez redimensionner les contrôles et les déplacer par cliquer-déplacer.When designing your app, you can re-size the controls and move them around using click-and-drag.
  • Appuyez sur Échap ou sélectionnez la croix (X) pour fermer la fenêtre d’aperçu.Press ESC or select the X to close the preview window.
  • Lorsque vous utilisez une galerie, sélectionnez le premier élément dans la galerie pour modifier tous les éléments de la galerie.When using a gallery, select the first item in the gallery to change all items in the gallery. Par exemple, sélectionnez le premier élément pour ajouter une bordure à tous les éléments de la galerie.For example, select the first item to add a border to all items in the gallery.
  • 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.To update the properties of the gallery, select any item in the gallery except the first one. 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).For example, select the second item to update the Items, ShowScrollbar, and other properties that apply to the gallery (not the items in the gallery).

Ce que vous avez apprisWhat you learned

Dans cette rubrique, vous avez effectué les opérations suivantes :In this topic, you:

  • 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.Created a collection, imported data that includes .jpg images into that collection, and showed the data in a gallery.
  • Sous chaque image de la galerie, configuration d’une étiquette qui répertorie les unités en stock pour cet article.Under each image in the gallery, configured a label that lists the units in stock for that item.
  • Ajout d’une bordure autour de l’élément sélectionné.Added a border around the item that you select.
  • Tri des éléments par nom de produit en ordre croissant ou décroissant.Sorted the items by product name in ascending and descending order.
  • 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.Added a slider and an input text control to filter the products by units in stock and product name.