Affichez une liste d’éléments à partir de n’importe quelle source de données en ajoutant un contrôle Gallery à votre application. Cette rubrique utilise une source de données Microsoft Excel. 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.

Conditions préalables

Ajouter un contrôle Gallery

  1. Ouvrez PowerApps, cliquez ou appuyez sur Nouveau près du bord gauche.

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

  3. Dans la boîte de dialogue Bienvenue dans PowerApps Studio, cliquez ou appuyez sur Ignorer.

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

  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.

    Ces options incluent les contrôles Gallery que vous pouvez faire défiler horizontalement ou verticalement. Vous pouvez également ajouter un contrôle Gallery dont la taille est basée automatiquement sur la quantité de contenu de chaque élément.

    Ajouter une galerie

  6. Dans l’onglet Home (Accueil), cliquez ou appuyez sur New Screen (Nouvel écran).

    Vous pouvez ajouter un écran vide, avec défilement, contenant un contrôle Gallery ou un formulaire.

  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.

    Remarque : 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. Pour ce didacticiel, conservez la disposition par défaut.

    Choisir la disposition de la galerie

  8. Cliquez ou appuyez sur le contrôle Gallery dans l’écran que vous venez d’ajouter.

  9. Sous l’onglet Propriétés du volet de droite, cliquez ou appuyez sur CustomGallerySample.

  10. Dans le volet Données, cliquez ou appuyez sur CustomGallerySample, puis sur FlooringEstimates.

    Sélection d’une source de données

    Le contrôle Gallery affiche l’exemple de données.

    Affichage des données

    Vous configurez le tri et la recherche plus loin dans cette rubrique.

Ajouter un contrôle au contrôle Gallery

Avant toute personnalisation, choisissez une disposition pour le contrôle Gallery. 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.

  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.

    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.

    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.

  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.

    Ouvrir la liste déroulante

  5. Dans cette liste, cliquez ou appuyez sur Price.

    Changer la liaison d’une étiquette

    Le contrôle Gallery affiche les nouvelles valeurs.

Galerie finale

Filtrer le contrôle Gallery

La propriété Items d’un contrôle Gallery détermine les éléments qu’il doit afficher. 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.

Zone de recherche de texte

  1. Sélectionnez le contrôle Gallery en cliquant ou appuyant vers le bas du contrôle.

  2. Sous l’onglet Avancé, définissez la propriété Items du contrôle Gallery sur la formule suivante :

    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.

  3. Saisissez tout ou partie d’un nom de produit dans la zone de recherche.

    Le contrôle Gallery affiche uniquement les éléments qui répondent au critère de filtre.

Trier le contrôle Gallery

La propriété Items d’un contrôle Gallery détermine l’ordre dans lequel il affiche les éléments. 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.

Image de tri

  1. Définissez la propriété Items du contrôle Gallery sur la formule suivante :

    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.

Pour trier et filtrer le contrôle Gallery :

  • Remplacez les deux instances de DataSource dans cette formule par le nom de votre source de données.
  • Remplacez les deux instances de ColumnName par le nom de la colonne de tri/filtrage.

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é

Définissez la propriété TemplateFill du contrôle Gallery sur une formule similaire à l’exemple suivant :

If(ThisItem.IsSelected, LightCyan, White)

Modifier la sélection par défaut

Définissez la propriété Default du contrôle Gallery sur l’enregistrement que vous souhaitez sélectionner par défaut. Par exemple, spécifiez le cinquième élément de la source de données FlooringEstimates :

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 :

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

Étapes suivantes