Afficher une liste d’éléments dans Microsoft PowerAppsShow a list of items in PowerApps

Affichez une liste d’éléments à partir de n’importe quelle source de données en ajoutant un contrôle Gallery à votre application.Show a list of items from any data source by adding a Gallery control to your app. Cette rubrique utilise une source de données Microsoft Excel.This topic uses Excel as the data source. Filtrez la liste en configurant le contrôle Gallery de manière à afficher uniquement les éléments qui répondent au critère de filtre dans un contrôle Text input.Filter the list by configuring the Gallery control to show only those items that match the filter criterion in a Text input control.

Conditions préalablesPrerequisites

  1. Ouvrez PowerApps, cliquez ou appuyez sur Nouveau près du bord gauche.Open PowerApps, and then click or tap New near the left edge.

  2. Sur la mosaïque Application vide, cliquez ou appuyez sur Mode téléphone.On the Blank app tile, click or tap Phone layout.

  3. Dans la boîte de dialogue Bienvenue dans PowerApps Studio, cliquez ou appuyez sur Ignorer.In the Welcome to PowerApps Studio dialog box, click or tap Skip.

  4. Ajoutez une connexion à la table FlooringEstimates dans le fichier Excel.Add a connection to the FlooringEstimates table in the Excel file.

  5. (facultatif) Ajoutez un contrôle Gallery à l’écran par défaut en cliquant ou en appuyant sur l’onglet Insérer, en cliquant ou en appuyant sur Gallery, puis en cliquant ou en appuyant sur un contrôle Gallery qui est vide ou qui contient un ensemble de contrôles par défaut.(optional) Add a Gallery control to the default screen by clicking or tapping the Insert tab, clicking or tapping Gallery, and then clicking or tapping a Gallery control that's empty (blank) or that contains a default set of controls.

    Ces options incluent les contrôles Gallery que vous pouvez faire défiler horizontalement ou verticalement.These options include Gallery controls that scroll horizontally or vertically. Vous pouvez également ajouter un contrôle Gallery dont la taille est basée automatiquement sur la quantité de contenu de chaque élément.You can also add a Gallery control that automatically bases its size on the amount of content in each item.

    Ajouter une galerie

  6. Dans l’onglet Home (Accueil), cliquez ou appuyez sur New Screen (Nouvel écran).On the Home tab, click or tap New screen.

    Vous pouvez ajouter un écran vide, avec défilement, contenant un contrôle Gallery ou un formulaire.You can add a screen that's empty, that scrolls, that contains a Gallery control, or that contains a form.

  7. Cliquez ou appuyez sur Écran de liste pour ajouter un écran qui contient un contrôle Gallery et d’autres contrôles, comme une barre de recherche.Click or tap List screen to add a screen that contains a Gallery control and other controls such as a search bar.

    Note

    Que vous ajoutiez un contrôle Gallery à un écran nouveau ou existant, vous pouvez cliquer ou appuyer dans le bas du contrôle Gallery pour le sélectionner, cliquer ou appuyer sur Flooring Estimates dans le volet de droite, puis cliquer ou appuyer sur une autre disposition dans le volet Données.Whether you add a Gallery control to a new screen or an existing one, you can click or tap near the bottom of the Gallery control to select it, click or tap Flooring Estimates in the right-hand pane, and then click or tap a different layout in the Data pane. Pour ce didacticiel, conservez la disposition par défaut.For this tutorial, leave the default layout.

    Choisir la disposition de la galerie

  8. Cliquez ou appuyez sur le contrôle Gallery dans l’écran que vous venez d’ajouter.Click or tap the Gallery control in the screen that you just added.

  9. Sous l’onglet Propriétés du volet de droite, cliquez ou appuyez sur CustomGallerySample.On the Properties tab of the right-hand pane, click or tap CustomGallerySample.

  10. Dans le volet Données, cliquez ou appuyez sur CustomGallerySample, puis sur FlooringEstimates.In the Data pane, click or tap CustomGallerySample, and then click or tap FlooringEstimates.

    Sélection d’une source de données

    Le contrôle Gallery affiche l’exemple de données.The Gallery control shows the sample data.

    Affichage des données

    Vous configurez le tri et la recherche plus loin dans cette rubrique.You'll configure sort and search later in this topic.

Avant toute personnalisation, choisissez une disposition pour le contrôle Gallery.Before you do any customization, decide on a Gallery control layout. Le premier ensemble de contrôles d’un contrôle Gallery est le modèle, qui détermine comment toutes les données du contrôle Gallery s’affichent.The first set of controls in a Gallery control is the template, which determines how all data in the Gallery control appears.

  1. Sélectionnez le modèle en cliquant ou en appuyant dans le bas du contrôle Gallery, puis en cliquant ou en appuyant sur l’icône de crayon dans le coin supérieur gauche.Select the template by clicking or tapping near the bottom of the Gallery control and then clicking or tapping the pencil icon in the upper-left corner.

    Modification d’un modèle de galerie

  2. Le modèle étant toujours sélectionné, ajoutez un contrôle Label, puis déplacez et redimensionnez le contrôle afin qu’il ne chevauche pas d’autres contrôles dans le modèle.With the template still selected, add a Label control, and then move and resize it so that it doesn't overlap with other controls in the template.

    Ajouter une étiquette

  3. Ouvrez le volet Données en sélectionnant le modèle, puis en cliquant ou en appuyant sur Flooring Estimates dans le volet droit.Open the Data pane by selecting the template and then clicking or tapping Flooring Estimates in the right-hand pane.

  4. Sélectionnez l’étiquette que vous avez ajoutée précédemment dans cette procédure, puis ouvrez la liste en surbrillance dans le volet Données.Select the label that you added earlier in this procedure, and then open the highlighted list in the Data pane.

    Ouvrir la liste déroulante

  5. Dans cette liste, cliquez ou appuyez sur Price.In that list, click or tap Price.

    Changer la liaison d’une étiquette

    Le contrôle Gallery affiche les nouvelles valeurs.The Gallery control shows the new values.

    Galerie finale

La propriété Items d’un contrôle Gallery détermine les éléments qu’il doit afficher.The Items property of a Gallery control determines which items it shows. Dans cette procédure, vous allez configurer cette propriété de manière à ce que le contrôle Gallery affiche uniquement les éléments dont le nom de produit contient le texte de TextSearchBox1.In this procedure, you configure that property so that the Gallery control shows only those items for which the product name contains the text in TextSearchBox1.

Zone de recherche de texte

  1. Sélectionnez le contrôle Gallery en cliquant ou appuyant vers le bas du contrôle.Select the Gallery control by clicking or tapping near the bottom of that control.

  2. Sous l’onglet Avancé, définissez la propriété Items du contrôle Gallery sur la formule suivante :On the Advanced tab, set the Items property of the Gallery control to this formula:

    If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name)))

    Pour plus d’informations sur les fonctions de cette formule, consultez les informations de référence sur les formules.For more information about the functions in this formula, see the formula reference.

  3. Saisissez tout ou partie d’un nom de produit dans la zone de recherche.Type part or all of a product name in the search box.

    Le contrôle Gallery affiche uniquement les éléments qui répondent au critère de filtre.The Gallery control shows only those items that meet the filter criterion.

La propriété Items d’un contrôle Gallery détermine l’ordre dans lequel il affiche les éléments.The Items property of a Gallery control determines the order in which it shows items. Dans cette procédure, configurez cette propriété afin que le contrôle Gallery affiche l’ordre des éléments comme défini par le paramètre ImageSortUpDown1.In this procedure, you configure that property so that the Gallery control shows the order of items as set by ImageSortUpDown1.

Image de tri

  1. Définissez la propriété Items du contrôle Gallery sur la formule suivante :Set the Items property of the Gallery control to this formula:

    Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), FlooringEstimates, Filter(FlooringEstimates, TextSearchBox1.Text in Text(Name))), Name, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

  2. Sélectionnez l’icône de tri pour modifier l’ordre de tri du contrôle Gallery en fonction des noms des produits.Select the sort icon to change the sorting order of the Gallery control by the names of the products.

Pour trier et filtrer le contrôle Gallery :To sort and filter your Gallery control:

  • Remplacez les deux instances de DataSource dans cette formule par le nom de votre source de données.Replace both instances of DataSource in this formula with the name of your data source.

  • Remplacez les deux instances de ColumnName par le nom de la colonne de tri/filtrage.Replace both instances of ColumnName with the name of the column by which you want to sort and filter.

Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))Sort(If(IsBlank(TextSearchBox1.Text), DataSource, Filter( DataSource, TextSearchBox1.Text in Text( ColumnName ))), ColumnName, If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

Mettre en surbrillance l’élément sélectionnéHighlight the selected item

Définissez la propriété TemplateFill du contrôle Gallery sur une formule similaire à l’exemple suivant :Set the Gallery control's TemplateFill property to a formula that's similar to this example:

If(ThisItem.IsSelected, LightCyan, White)If(ThisItem.IsSelected, LightCyan, White)

Modifier la sélection par défautChange the default selection

Définissez la propriété Default du contrôle Gallery sur l’enregistrement que vous souhaitez sélectionner par défaut.Set the Gallery control's Default property to the record that you want to select by default. Par exemple, spécifiez le cinquième élément de la source de données FlooringEstimates :For example, specify the fifth item in the FlooringEstimates data source:

Last(FirstN(FlooringEstimates, 5))Last(FirstN(FlooringEstimates, 5))

Dans cet exemple, spécifiez le premier élément de la catégorie Hardwood de la source de données FlooringEstimates :In this example, you specify the first item in the Hardwood category of the FlooringEstimates data source:

First(Filter(FlooringEstimates, Category = "Hardwood"))First(Filter(FlooringEstimates, Category = "Hardwood"))

Étapes suivantesNext steps

Découvrez comment utiliser les formulaires et les formules.Learn how to work with forms and formulas.