Contrôle Zone de liste déroulante dans Power Apps
Contrôle qui permet aux utilisateurs d’effectuer des sélections parmi les options fournies. Prend en charge la recherche et la sélection multiple.
Description
Un contrôle Zone de liste déroulante vous permet de rechercher des éléments que vous sélectionnez. La recherche est effectuée côté serveur sur la propriété SearchField. Ainsi, les performances ne sont pas affectées par les sources de données volumineuses.
Le mode de sélection simple ou multiple est configuré via la propriété SelectMultiple.
Pour rechercher des éléments à sélectionner, pour chaque élément, vous pouvez choisir d’afficher une seule valeur de données, deux valeurs ou une image et deux valeurs (personne) en modifiant les paramètres de disposition dans le volet Données.
Lors de la visualisation sur de petits écrans, le menu déroulant de la liste des éléments deviendra un contrôle plein écran pour une meilleure convivialité.
Notes
Si vous souhaitez rechercher des éléments avec Nombres, convertissez les nombres en texte avec la fonction Text(). Par exemple, Text(12345).
Limitations
Le contrôle Zone de liste déroulante a les limitations suivantes :
- Quand vous utilisez un contrôle Zone de liste déroulante dans une galerie, ses sélections ne sont pas conservées lorsque l’utilisateur fait défiler la galerie. Ceci n’est pas un problème si vous utilisez un contrôle Zone de liste déroulante dans une galerie sans défilement. Il n’y a pas de solution de contournement possible actuellement.
Sélecteur de personnes
Pour utiliser une Zone de liste modifiable comme sélecteur de personnes, vous pouvez choisir le modèle Personne à partir des paramètres de disposition dans le volet Données et configurer les propriétés de données associées à afficher pour la personne ci-dessous.
Propriétés clés
Items : source de données à partir de laquelle des sélections peuvent être effectuées.
DefaultSelectedItems : éléments sélectionnés avant que l’utilisateur interagisse avec le contrôle.
Notes
La propriété Default est obsolète, utilisez plutôt DefaultSelectedItems.
SelectedItems : liste des éléments sélectionnés résultant de l’interaction de l’utilisateur.
SelectMultiple : indique si l’utilisateur peut sélectionner un ou plusieurs éléments.
IsSearchable : indique si l’utilisateur peut rechercher des éléments avant d’effectuer une sélection.
Notes
IsSearchable ne peut être activé que sur une source de données qui contient au moins un champ de texte. L’expression Items doit pouvoir être déléguée pour que les requêtes soient déléguées avec la recherche. C’est-à-dire, les instructions If dans l’expression Items ne sont pas prises en charge.
SearchFields : champs de données de la source de données recherchée quand l’utilisateur entre du texte.
Notes
Pour rechercher dans plusieurs champs, définissez la propriété SearchFields dans ce format : ["MyFirstColumn", "MySecondColumn"]. Seuls les champs de texte sont pris en charge.
Propriétés supplémentaires
AccessibleLabel : Étiquette pour les lecteurs d’écran.
BorderColor : couleur de bordure du contrôle.
BorderStyle : indique si la bordure d’un contrôle est unie, discontinue, en pointillés ou s’il n’y en a aucune.
BorderThickness : épaisseur de bordure d’un contrôle.
DisplayFields : liste des champs affichés pour chaque élément retourné par la recherche. Le plus simple est de configurer via le volet Données dans l’onglet d’options des propriétés.
Notes
Pour mettre à jour plusieurs champs d’affichage dans un modèle donné, définissez la propriété DisplayFields au format suivant :["MyFirstColumn", "MySecondColumn"].
DisplayMode : indique si le contrôle autorise l’entrée utilisateur (Edit), affiche uniquement les données (View) ou est désactivé (Disabled).
FocusedBorderColor : couleur de bordure d’un contrôle lorsque le contrôle est actif.
FocusedBorderThickness : épaisseur de bordure d’un contrôle lorsque le contrôle est actif.
Height : distance entre le haut et le bas d’un contrôle.
InputTextPlaceholder : texte d’instruction affiché aux utilisateurs finaux quand aucun élément n’est sélectionné.
OnChange – Actions à effectuer lorsque l’utilisateur modifie une sélection.
OnNavigate – Actions à effectuer lorsque l’utilisateur sélectionne un élément.
OnSelect – Actions à effectuer lorsque l’utilisateur appuie sur ou sélectionne un contrôle.
TabIndex : ordre de navigation à l’aide du clavier par rapport à d’autres contrôles.
Visible : indique si un contrôle est visible ou est masqué.
Width : distance entre les côtés droit et gauche d’un contrôle.
X : distance entre le bord gauche d’un contrôle et le bord gauche de son conteneur parent (ou de l’écran à défaut de conteneur parent).
Y : distance entre le bord supérieur d’un contrôle et le bord supérieur du conteneur parent (ou de l’écran à défaut de conteneur parent).
Notes
Les propriétés des bordures volantes sont contrôlées par les propriétés Border.
Exemples
Zone de liste déroulante de base
Les étapes de cet exemple s’appliquent à toute source de données qui fournit des tables, mais pour suivre exactement ces étapes, utilisez un environnement avec la base de données Microsoft Dataverse contenant des exemples de données.
Sélectionnez Insérer > Entrée > Zone de liste modifiable et nommez-la « Zonelistedéroulante ».
Sur le volet Propriétés à droite de l’écran, ouvrez la liste Sélectionner un source de données (en regard de Items), puis ajoutez ou sélectionnez une source de données, par exemple la table Comptes.
Sur le même volet, sélectionnez Modifier (en regard de Champs).
Dans le volet Données, ouvrez la liste Texte principal, puis sélectionnez la colonne Nom principal qui apparaîtra dans le contrôle Zone de liste modifiable.
Tout en maintenant la touche Alt enfoncée, sélectionnez la flèche vers le bas pour ouvrir le contrôle Zone de liste modifiable.
Le contrôle affiche les données de la colonne Nom principal que vous avez spécifiée dans la source de données que vous avez spécifiée.
(Facultatif) Afficher le premier enregistrement par défaut
Définissez la propriété DefaultSelectedItems sur cette expression, en remplaçant DataSource par le nom de la source de données :
First(DataSource)
(Facultatif) Afficher la valeur du nom de compte sélectionné dans une Étiquette
Sélectionnez Insérer > Étiquette de texte, puis sélectionnez Étiquette.
Définissez la propriété Texte sur cette expression, en remplaçant Texte par la formule suivante :
If(CountRows(ComboBox1.SelectedItems)>0, Concat(ComboBox1.SelectedItems,'Account Name',", "), "NO SELECTED ITEM")Notes
L’instruction If vérifiera l’existence des éléments sélectionnés et les affichera dans une Étiquette délimitée par des virgules ou dans un message « AUCUN ÉLÉMENT SÉLECTIONNÉ » si la liste est vide.
Simuler un comportement de liste déroulante simple
En définissant IsSearchable sur false et SelectMultiple sur false, vous pouvez obtenir la même fonctionnalité qu’une liste déroulante.
Sélectionnez Insérer > Entrée, puis sélectionnez Zone de liste modifiable.
Sur le volet Propriétés à droite de l’écran, ouvrez la liste Sélectionner un source de données (en regard de Items), puis ajoutez ou sélectionnez une source de données.
Sur le même volet, sélectionnez Modifier (en regard de Champs).
Dans le volet Données, ouvrez la liste Texte principal, puis sélectionnez la colonne que vous souhaitez afficher dans le contrôle Zone de liste modifiable.
Définissez la propriété IsSearchable sur false.
Définissez la propriété SelectMultiple sur false.
Tout en maintenant la touche Alt enfoncée, sélectionnez la flèche vers le bas pour ouvrir le contrôle Zone de liste modifiable.
Le contrôle affiche les données de la colonne que vous avez spécifiée dans la source de données que vous avez spécifiée.
Notes
Le texte « Rechercher des éléments » a disparu et vous ne pourrez sélectionner qu’un seul élément.
Instructions d’accessibilité
Contraste des couleurs
Il doit exister un contraste des couleurs adéquat entre :
- ChevronFill et ChevronBackground
- ChevronHoverFill et ChevronHoverBackground
- SelectionColor et SelectionFill
- SelectionFill et Fill
- SelectionTagColor et SelectionTagFill
Ceci s’ajoute à la configuration requise du contraste des couleurs.
Prise en charge du lecteur d’écran
AccessibleLabel doit être présent.
Notes
Sur les écrans tactiles, les utilisateurs de lecteur d’écran peuvent parcourir le contenu de la zone de liste déroulante de manière séquentielle. La zone de liste déroulante agit comme un bouton qui affiche ou masque son contenu lorsqu’il est sélectionné.
Prise en charge du clavier
TabIndex doit être égal ou supérieur à zéro afin que les utilisateurs du clavier puissent y accéder.
Les indicateurs de focus doivent être clairement visibles. Pour ce faire, utilisez FocusedBorderColor et FocusedBorderThickness.
Notes
La touche Tab permet d’accéder à la zone de liste déroulante ou de s’en éloigner. Les touches de direction permettent de parcourir le contenu de la zone de liste déroulante. La touche Échap permet de fermer la liste déroulante si celle-ci est ouverte.
Notes
Pouvez-vous nous indiquer vos préférences de langue pour la documentation ? Répondez à un court questionnaire. (veuillez noter que ce questionnaire est en anglais)
Le questionnaire vous prendra environ sept minutes. Aucune donnée personnelle n’est collectée (déclaration de confidentialité).