Mashup Builder > Widgets > Widgets standard > Widget Liste déroulante (thématisable)
Widget Liste déroulante (thématisable)
* 
Ce widget remplace la vue Zone de liste déroulante du widget Liste hérité.
Le widget Liste déroulante vous permet d'ajouter un menu déroulant qui ouvre une liste d'éléments au moment de l'exécution. Vous pouvez configurer le widget pour accepter une sélection unique ou multiple. Les éléments sélectionnés sont stockés dans la propriété SelectedText du widget, que vous pouvez lier en tant qu'entrée pour d'autres widgets, fonctions ou services de données. Vous pouvez définir des éléments et leur état en créant un service de données qui renvoie une table d'informations. Voici quelques exemples de configurations que vous pouvez effectuer à l'aide des propriétés du widget :
Aligner les étiquettes d'élément à gauche, à droite ou au centre de la liste déroulante
Activer la sélection unique ou multiple
Ajouter une zone de filtre pour permettre aux utilisateurs de trouver plus rapidement des éléments dans de longues listes
Appliquer le formatage de style aux éléments de la liste
* 
Il est disponible en tant que widget standard sur la plateforme et en tant que composant Web à importer à partir d'un SDK.
Format des données
Pour configurer les éléments de liste pour le widget Liste déroulante, vous devez créer un service de données qui renvoie une table d'informations avec les définitions de champ suivantes :
Champ d'affichage
Champ de valeur
Champ d'état
Type de base
STRING
STRING
Boolean
Description
Etiquette à afficher pour les éléments de la liste déroulante.
Valeur réelle à utiliser pour chaque élément. Cette valeur est utilisée dans la propriété SelectedItems du widget lors de la liaison à d'autres widgets ou services de données.
Indique si un élément est activé ou désactivé. Vous ne pouvez pas sélectionner d'éléments désactivés.
Exemple de ligne
English
en
True
Chaque ligne de la table d'informations définit un élément dans la liste déroulante. Vous pouvez configurer votre service de données pour générer des éléments de manière statique, ou de manière dynamique en utilisant la saisie provenant d'autres widgets ou services de données.
Liaison de données d'éléments de liste
Pour lier les données de configuration au widget Liste déroulante, procédez comme suit :
1. Ajoutez un objet qui contient un service de données pour les éléments de liste à l'aide du panneau Données.
2. Liez la propriété All Data d'un service à la propriété Data du widget.
3. Liez le service à l'événement d'application composite Loaded.
4. Dans le panneau Propriétés, spécifiez les colonnes de la table d'informations à utiliser pour configurer les éléments de la liste déroulante :
DisplayField : sélectionnez la colonne à utiliser pour les étiquettes des éléments.
ValueField : sélectionnez la colonne à utiliser pour les valeurs réelles des éléments.
StateField : sélectionnez la colonne à utiliser pour l'état des éléments.
5. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
Au moment de l'exécution, les éléments de la liste s'affichent lorsque vous ouvrez la liste déroulante.
Définition de l'espace entre la liste et la liste déroulante
Utilisez la propriété ListMarginTop du widget pour spécifier l'espace entre la liste déroulante et la liste d'éléments. Par défaut, l'espace est défini sur 8 pixels. Pour supprimer l'espace, définissez la valeur de la propriété sur 0.
Ajout d'un élément pour effacer la sélection
Par défaut, le widget Liste déroulante ne permet pas aux utilisateurs d'effacer les sélections de la liste au moment de l'exécution. Pour les y autoriser, activez la propriété ClearSelectionItem. Un élément supplémentaire portant l'étiquette par défaut (Aucun) est ajouté à la liste. Les utilisateurs peuvent sélectionner cet élément s'ils ne souhaitent pas faire de choix dans la liste déroulante.
Propriétés des widgets
Nom de la propriété
Description
Type de base
Valeur par défaut
Liaison possible ? (O/N)
Localisable ? (O/N)
HintText
Texte de marque de réservation expliquant ce qu'il convient de renseigner dans le champ.
STRING
Sélectionner
O
O
Label
Texte affiché en tant qu'étiquette du widget.
STRING
n/a
O
O
LabelAlignment
Permet d'aligner l'étiquette à gauche, à droite ou au centre.
STRING
A gauche
O
N
Alignment
Permet d'aligner les éléments textuels à gauche, à droite ou au centre de la liste déroulante.
STRING
A gauche
O
ClearSelectionItem
Ajoute un élément de sélection vide à la liste déroulante. Permet à l'utilisateur d'effacer une sélection.
BOOLEAN
Vrai
O
ClearSelectionLabel
Spécifie un texte personnalisé pour l'élément d'effacement de sélection de la liste déroulante. Définie sur Aucun par défaut.
STRING
Aucun
O
O
Disabled
Utilisez cette propriété pour désactiver le widget dans l'application composite. Le widget s'affiche dans l'application composite, mais il n'est pas cliquable.
BOOLEAN
Faux
O
N
ShowListFilter
Permet d'ajouter un filtre dans la liste déroulante pour en filtrer les éléments à l'exécution.
BOOLEAN
Faux
N
N
FilterHintText
Affiche un texte d'information pour le filtre de liste déroulante.
STRING
n/a
O
O
ListMaxHeight
Permet de définir une hauteur maximale pour la liste déroulante qui s'affiche.
Une barre de défilement est ajoutée dans l'affichage si le nombre d'éléments de la liste déroulante est supérieur à la hauteur de liste définie.
NUMBER
n/a
O
N
StateField
Table d'informations qui représente l'état des éléments de ligne de la liste déroulante.
Cette propriété peut être utilisée pour activer ou désactiver les éléments de ligne d'une liste déroulante.
INFOTABLE
n/a
N
N
MultiSelect
Permet à l'utilisateur de sélectionner plusieurs éléments dans la liste déroulante.
BOOLEAN
Faux
N
N
AutoSelectFirstRow
Permet de définir la première ligne comme l'option sélectionnée dans la liste déroulante.
* 
Cette propriété est disponible lorsque la propriété MultiSelect n'est pas sélectionnée.
BOOLEAN
Faux
N
N
RowHeight
Permet de définir la hauteur de ligne.
NUMBER
34
O
N
CustomClass
Permet de définir la classe CSS à appliquer à la div supérieure du widget. Plusieurs classes peuvent être spécifiées, séparées par une espace.
STRING
n/a
O
N
TabSequence
Priorité de mise en surbrillance du widget dans la séquence des widgets lorsque l'utilisateur utilise la touche de tabulation.
NUMBER
n/a
N
N
Data
Source de table d'informations.
INFOTABLE
n/a
O
N
DisplayField
Champ de table d'informations qui représente la valeur de données.
n/a
n/a
N
N
ValueField
Champ utilisé pour SelectedText.
n/a
n/a
N
N
SelectedText
Cette propriété fonctionne de deux manières différentes, selon sa direction de liaison lors de l'utilisation du mode de sélection unique :
Entrée : la propriété sélectionne l'élément avec une étiquette qui correspond à la valeur de propriété.
Sortie : la propriété récupère le texte de l'élément sélectionné dans la liste.
* 
Cette propriété n'est pas prise en charge lorsque la sélection multiple est activée. Utilisez plutôt la propriété SelectedItems.
STRING
n/a
O
O
SelectedItems
Source de table d'informations pour les éléments sélectionnés dans la liste.
INFOTABLE
n/a
O
N
ListFormat
Ouvre une boîte de dialogue qui vous permet de spécifier les règles de formatage et le rendu des données du widget. Dans ThingWorx 9.1 et versions ultérieures, vous pouvez également appliquer un formatage d'état au widget.
Rendu et formatage d'état
n/a
N
N
ListMarginTop
Définit l'espace entre la liste déroulante et la liste d'éléments.
NUMBER
8
N
N
TooltipField
Affiche un texte d'info-bulle lorsque vous pointez sur l'étiquette associée à la liste déroulante et la valeur sélectionnée dans la liste déroulante.
* 
Cette propriété est disponible dans ThingWorx 9.3.0 et versions ultérieures.
STRING
n/a
O
O
TooltipIcon
Définit une image d'icône pour l'info-bulle du widget Liste déroulante.
* 
Cette propriété est disponible dans ThingWorx 9.3.0 et versions ultérieures.
MEDIA ENTITY
n/a
N
N
Validation des données du widget Liste déroulante
Vous pouvez utiliser les propriétés de validation pour valider la sélection d'éléments au moment de l'exécution. Par exemple, vous pouvez imposer la sélection d'un élément dans la liste déroulante et afficher un message d'erreur lorsqu'aucun élément n'est sélectionné.
Pour plus d'informations sur les propriétés de validation, consultez la rubrique Application de la validation aux widgets.
La table suivante répertorie les propriétés de validation disponibles dans le panneau Validation de ThingWorx 9.3.4 ou version ultérieure.
Propriété
Description
Type de base
Valeur par défaut
Liaison possible ? (O/N)
Localisable ? (O/N)
CriteriaMessage
Message affiché pour les critères de validation et lorsque la validation échoue.
STRING
n/a
O
O
CriteriaMessageDetails
Détails affichés pour les critères de validation et le message d'échec.
STRING
n/a
O
O
RequiredMessage
Message affiché lorsque la propriété ValueRequired est définie sur "vrai" et que l'élément n'est pas sélectionné.
STRING
Une sélection est requise
O
O
ShowValidationCriteria
Affiche une astuce concernant l'entrée obligatoire lors de la sélection d'éléments dans la liste déroulante.
BOOLEAN
Faux
O
N
ShowValidationFailure
Affiche un message d'échec lorsque la valeur entrée entraîne l'échec de la validation.
BOOLEAN
Faux
O
N
ShowValidationSuccess
Affiche un message de succès lorsque la valeur entrée est validée avec succès.
BOOLEAN
Faux
O
N
SuccessMessage
Message affiché lorsque la validation réussit.
STRING
n/a
O
O
SuccessMessageDetails
Message secondaire qui affiche des informations supplémentaires sur le message de succès de la validation.
STRING
n/a
O
O
Validate
Evénement pouvant être lié qui est déclenché lorsque la valeur du widget est modifiée. Liez cet événement à un service ou une fonction pour appliquer un motif ou une expression de validation.
event
n/a
O
N
ValidationCriteriaIcon
Définit l'icône SVG à afficher dans l'astuce pour les critères de validation.
IMAGELINK
info
N
N
ValidationFailureIcon
Définit l'icône SVG à afficher dans le message de statut en cas d'échec de la validation.
IMAGELINK
error
N
N
ValidationOutput
Récupère la sortie de la validation du widget. Les valeurs renvoyées sont Undefined, Unvalidated, Valid ou Invalid.
STRING
n/a
O
N
ValidationState
Propriété pouvant être liée qui définit l'état de la validation. Vous pouvez définir cette propriété sur Undefined, Unvalidated, Valid et Invalid.
STRING
Undefined
O
N
ValidationSuccessIcon
Permet de sélectionner une icône SVG à afficher dans le message lorsque la validation réussit.
IMAGELINK
success
N
N
ValueRequired
Requiert la sélection d'un élément de la liste.
BOOLEAN
Faux
O
N
Est-ce que cela a été utile ?