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 la galerie 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 une galerie

  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. Ajoutez une connexion à la table FlooringEstimates dans le fichier Excel.

  4. (facultatif) Ajoutez une galerie à 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 une galerie qui est vide ou qui contient un ensemble de contrôles par défaut.

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

    Ajouter une galerie

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

    Vous pouvez ajouter un écran vide, avec défilement, contenant une galerie ou un formulaire.

  6. Cliquez ou appuyez sur Écran de liste pour ajouter un écran qui contient une galerie et d’autres contrôles, comme une barre de recherche.

    Remarque : Que vous ajoutiez une galerie à un écran nouveau ou existant, vous pouvez cliquer ou appuyer dans le bas de la galerie pour la sélectionner, puis choisir une autre disposition dans le volet de droite. Pour ce didacticiel, conservez la disposition par défaut.

    Choisir la disposition de la galerie

  7. Cliquez ou appuyez sur le contrôle de galerie que vous venez d’ajouter. Dans le volet de droite, cliquez ou appuyez sur Données, puis sur FlooringEstimates.

    Sélection d’une source de données

    La galerie 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 à la galerie

Avant toute personnalisation, choisissez une disposition pour la galerie. Le premier ensemble de contrôles d’une galerie est le modèle, qui détermine comment toutes les données de la galerie s’affichent.

  1. Sélectionnez le modèle en cliquant ou appuyant dans le bas de la galerie, puis en cliquant ou en appuyant sur l’icône de crayon dans le coin supérieur gauche de la galerie.

    Modification d’un modèle de galerie

  2. Ajoutez un contrôle Label au modèle de galerie, puis déplacez et redimensionnez le nouveau contrôle, afin qu’il ne chevauche pas d’autres contrôles dans le modèle. Veillez à conserver uniquement la première cellule de la galerie en surbrillance. Sinon, le contrôle d’étiquette n’est pas ajouté au contrôle de galerie, ni lié à la source de données FlooringEstimates.

    Ajouter une étiquette

  3. Le contrôle Label étant toujours sélectionné, ouvrez la liste mise en surbrillance dans le volet de droite. Si le volet Données est fermé, rouvrez-le en cliquant ou en appuyant sur le contrôle de galerie dans le volet gauche, puis cliquez ou appuyez sur les données FlooringEstimates dans le volet de droite pour rouvrir le volet Données.

    Ouvrir la liste déroulante

  4. Dans la liste des champs que vous avez ouverte, appuyez ou cliquez sur Price (Prix).

    Changer la liaison d’une étiquette

    La galerie affiche de nouvelles valeurs

    Galerie finale

Filtrer la galerie

La propriété Items d’une galerie détermine les éléments qu’elle doit afficher. Dans cette procédure, vous allez configurer cette propriété de manière à ce que la galerie affiche uniquement les éléments dont le nom de produit contient le texte de TextSearchBox1.

Zone de recherche de texte

  1. Sélectionnez le modèle en cliquant ou appuyant vers le bas du contrôle de galerie.

  2. Définissez la propriété Items de l’onglet Avancé de la galerie 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.

    La galerie affiche uniquement les éléments qui répondent au critère de filtre.

Filtrer la galerie

La propriété Items d’une galerie détermine l’ordre dans lequel elle affiche les éléments. Dans cette procédure, vous configurez cette propriété afin que la galerie affiche l’ordre des éléments comme défini par le paramètre ImageSortUpDown1.

Image de tri

  1. Définissez la propriété Items de la galerie 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 de la galerie en fonction des noms des produits.

Pour trier et filtrer la galerie : - 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 de la galerie 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 de la galerie 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