Partager via

Picker contrôle

  • Article

Un contrôle utilisé pour offrir une expérience de recherche.

Note

La documentation complète et le code source sont accessibles dans le Référentiel de composants de code GitHub.

Contrôle Picker

Description

Les sélecteurs sont utilisés pour sélectionner un ou plusieurs éléments, tels que des balises ou des fichiers, dans une longue liste.

Les composants de code Picker permettent d’utiliser le composant de menu Picker de l’interface utilisateur Fluent depuis les applications canevas et les pages personnalisées.

Le composant de code Tag Picker fournit les fonctionnalités suivantes :

  1. Se lie à une collection d’entrée pour les balises choisies.
  2. Se lie à une collection d’entrée pour les balises suggérées.
  3. Permet aux utilisateurs de sélectionner parmi les suggestions ou de saisir une balise de texte libre.
  4. Déclenche un événement OnChange lorsqu’un utilisateur ajoute ou supprime une balise.
  5. Permet de Définir le focus par programme.

Jeux de données

Le Tag Picker contient les jeux de données d’entrée suivants, qui sont décrits en détail dans Propriétés clés plus loin dans cet article.

  • Tags
    • TagsDisplayName
  • Suggestions
    • SuggestionsDisplayName
    • SuggestionSubDisplayName

Le jeu de données Suggestions doit être filtré à l’aide de la propriété de sortie SearchTerm, par exemple :

Search(colSuggestions,TagPicker.SearchTerm,"name")

Propriétés

Propriétés principales

Property Description
Items Une collection (table) de balises. L’application est responsable de l’ajout ou de la suppression de balises en réponse aux événements Ajouter ou Supprimer déclenchés par le composant (décrits dans la section d’événement OnChange suivante).
Suggestions_Items Une collection (table) de suggestions.
TagMaxWidth La largeur maximale des balises lors du rendu. Le texte qui dépasse sera tronqué avec des points de suspension et une info-bulle à survoler affichera le texte complet.
AllowFreeText Lors de la saisie d’une valeur, ne sélectionnez pas automatiquement la première suggestion afin qu’il soit possible de saisir une entrée en texte libre plutôt que de sélectionner dans une liste prédéfinie.
SearchTermToShortMessage Le message à afficher lorsque le critère de recherche est plus court que la MinimumSearchTermLength.
HintText Le message à afficher à l’intérieur du Sélecteur lorsqu’aucun critère de recherche n’est indiqué.
NoSuggestionsFoundMessage Le message à afficher lorsque la collection Suggestions ne contient aucun résultat.
MinimumSearchTermLength Le nombre minimum de caractères pour déclencher le menu déroulant des suggestions.
MaxTags Le nombre maximal de balises pouvant être ajoutées. Après ce nombre, le Sélecteur de balises sera désactivé jusqu’à ce qu’une balise soit supprimée.
Error True lorsque la bordure rouge d’erreur doit être affichée.

Items propriétés

Property Description
TagsDisplayName Défini comme le nom de la colonne qui contient la nom d’affichage de la balise.

Suggestions propriétés

Property Description
SuggestionsDisplayName Défini comme le nom de la colonne qui contient la nom d’affichage de la suggestion.
SuggestionsSubDisplayName (Facultatif) : défini comme le nom de la colonne contenant la ligne de texte secondaire.

Propriétés du style

Property Description
Theme Accepte une chaîne JSON générée à l’aide du Concepteur de thème Fluent UI (windows.net). Si vous laissez ce champ vide, le thème par défaut défini par Power Apps sera utilisé. Consultez Création de thèmes pour obtenir des instructions de configuration.
FontSize la taille de la police des balises affichées dans le sélecteur.
BorderRadius le rayon de la bordure des balises affichées dans le sélecteur.
ItemHeight hauteur des indicateurs (pixels) affichées dans le sélecteur.
AccessibilityLabel Étiquette aria pour les lecteurs d’écran

Propriétés d’événement

Property Description
Input Event Défini comme l’événement à envoyer au TagPicker

Output properties

Property Description
SearchTerm Le texte saisi dans le Sélecteur de balises qui peut être utilisé pour filtrer le jeu de données des suggestions.
TagsDisplayName Le texte utilisé pour créer une nouvelle Balise quand l’événement OnChange est déclenché
AutoHeight Lorsque le sélecteur de balises s’étend sur plusieurs lignes, la propriété Auto Height peut être utilisée pour contrôler la hauteur d’un conteneur réactif.

Behavior

Prend en charge SetFocus en tant que InputEvent.

Événement OnChange

Le composant TagPicker déclenche un événement OnChange lorsque des balises sont ajoutées ou supprimées. Les propriétés utilisées sont :

Property Description
TagEvent Nom de l’événement déclenché
TagKey La clé de l’élément qui a déclenché l’événement (si l’événement est lié à une balise)

L’événement doit contenir une expression semblable à :

If( TagPicker.TagEvent = "Add" && CountRows(Filter(colTags,name=TagPicker.TagsDisplayName)) = 0,
    Collect( colTags, { name:TagPicker.TagsDisplayName })
);

If( TagPicker.TagEvent="Remove",
 RemoveIf( colTags,name=Text(TagPicker.TagsDisplayName) )
);

Limitations

Ce composant de code ne peut être utilisé que dans les applications canevas et les pages personnalisées.