Widget Liste (thématisable)
Le widget Liste vous permet d'afficher des lignes de données.
 |
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
Vous pouvez configurer les éléments du widget Liste à l'aide des données d'une table d'informations formatée selon la structure suivante :
|
Définition du champ
|
Champ d'affichage
|
Champ de valeur
|
Champ d'état
|
|---|---|---|---|
|
Description
|
Représente l'étiquette de l'élément de liste au moment de l'exécution.
|
Représente la valeur réelle de l'élément de liste. Cette valeur est également stockée dans la propriété SelectedText.
|
Champ de table d'informations facultatif qui représente l'état des éléments de ligne de la liste. Cette propriété peut être utilisée pour activer ou désactiver les éléments dans la liste. Valeurs prises en charge : Enabled ou Disabled
|
|
Type de base
|
STRING ou NUMBER
|
STRING ou NUMBER
|
STRING
|
Définition des éléments de liste
Pour définir des éléments de liste, liez une table d'informations au format de données requis.
1. Dans le panneau Données, ajoutez un service de données qui définit les éléments de liste pour le widget. Vous pouvez définir des éléments à l'aide du format de table d'informations décrit dans la rubrique précédente.
2. Liez la propriété All Data du service de données à la propriété Data du widget Liste. Une liaison est créée.
3. Dans le panneau Propriétés, sélectionnez le champ de la table d'informations pour chacune des propriétés suivantes :
◦ DisplayField : les données des étiquettes d'élément.
◦ ValueField : les valeurs réelles des étiquettes d'élément.
◦ StateField : champ facultatif qui définit l'état activé ou désactivé de chaque élément de données.
4. Cliquez sur Enregistrer, puis sur Afficher l'application composite.
Les éléments de la liste s'affichent dans le widget au moment de l'exécution.
Activation de la sélection multiple
Vous pouvez activer la sélection multiple dans la liste en définissant la propriété MutliSelect du widget sur "vrai". La sélection multiple ajoute des cases à cocher qui permettent aux utilisateurs de sélectionner un ou plusieurs éléments dans une liste. En outre, une commande est ajoutée au-dessus des éléments pour permettre aux utilisateurs de désélectionner ou de sélectionner tous les éléments.
Configuration de la sélection unique
Par défaut, le widget prend en charge la sélection d'un élément unique. Un élément sélectionné est mis en surbrillance à l'aide d'une couleur d'arrière-plan.
Pour activer la sélection via un bouton d'option lors de l'utilisation du mode de sélection unique, définissez la propriété RadioButtonSelection sur "vrai". Le bouton s'affiche à gauche de la liste. Les éléments de la liste sont affichés sous la forme d'un groupe de boutons d'option qui indique aux utilisateurs qu'un seul élément peut être sélectionné à la fois.
Ajout d'un filtre
Vous pouvez ajouter un filtre à la liste en définissant la propriété Filter du widget sur "vrai". Le filtre s'affiche en haut de la liste, ce qui permet aux utilisateurs de filtrer rapidement les éléments de la liste.
Effacement de la sélection d'élément
Vous pouvez ajouter un élément vide qui permet aux utilisateurs d'effacer la sélection dans une liste à sélection unique en définissant la propriété ClearSelection du widget sur "vrai". Vous pouvez également modifier l'étiquette de l'élément vide à l'aide de la propriété ClearSelectionLable.
| | Cette propriété n'est pas disponible lorsque le mode de sélection multiple est activé. |
Application du formatage de l'état
Vous pouvez utiliser State Formatting pour mettre en surbrillance le statut actuel des éléments de liste en fonction d'une chaîne ou d'une valeur numérique. Pour plus d'informations, consultez la rubrique Exemple : application d'un formatage d'état à un widget Liste (ptc.com).
Propriétés du widget
Nom de propriété | Description | Type de base | Valeur par défaut | Liaison possible ? (O/N) | Localisable ? (O/N) | ||
|---|---|---|---|---|---|---|---|
Label | Texte affiché en tant qu'étiquette du widget. | STRING | Liste | O | O | ||
LabelAligment | Aligne l'étiquette à gauche, à droite ou au centre. | STRING | A gauche | O | N | ||
Aligment | Aligne les éléments de la liste à gauche, à droite ou au centre. | STRING | A gauche | O | N | ||
ClearselectionItem | Ajoute un élément de sélection vide à la liste. Permet à l'utilisateur d'effacer une sélection. | BOOLEAN | Vrai | O | N | ||
ClearselectionLabel | Spécifie un texte personnalisé pour l'élément d'effacement de sélection de la liste. Définie sur Aucun par défaut. | STRING | Aucun | O | O | ||
MultiSelect | Permet à l'utilisateur de sélectionner plusieurs éléments dans la liste. | BOOLEAN | Faux | N | N | ||
StateField | Spécifie la table d'informations à utiliser pour désactiver ou activer des éléments de la liste. | INFOTABLE | n/a | N | N | ||
Disabled | Désactive 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 | Ajoute un filtre à l'intérieur de la liste pour filtrer les éléments de la liste au moment de l'exécution. | BOOLEAN | Faux | N | N | ||
FilterHintText | Affiche un texte d'information pour le filtre de liste. | STRING | n/a | N | O | ||
AutoSelectFirstRow | Définit la première ligne comme l'option sélectionnée dans la liste.
| BOOLEAN | n/a | N | N | ||
RadioButtonSelection | Affiche des boutons d'option en regard des éléments de liste en mode de sélection unique. | BOOLEAN | Faux | N | N | ||
RowHeight | Définit la hauteur de la ligne seule. | NUMBER | 34 | O | N | ||
CustomClass | Définit 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 | Ordre dans lequel les widgets sont mis en surbrillance lorsque l'utilisateur utilise la touche Tabulation. | NUMBER | n/a | N | N | ||
Data | Table d'informations ou source de données utilisée pour les données du widget. | 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 | Permet de sélectionner un élément dans la liste. | STRING | n/a | O | O | ||
SelectedItems | Définit la source de table d'informations des éléments sélectionnés dans la liste. | INFOTABLE | n/a | O | N | ||
DoubleClicked | Un événement est déclenché lorsque vous double-cliquez sur le widget. | n/a | n/a | O | N | ||
ListFormat | Cette propriété est utilisée pour appliquer un rendu spécifique aux données. Cette propriété prend en charge les formats de rendu suivants : NUMBER, INTEGER, LONG, DATETIME, LOCATION, VEC2, VEC3, VEC4, THINGCODE, HYPERLINK, IMAGELINK, IMAGE, STRING, BOOLEAN, TAGS, HTML, THINGNAME, THINGSHAPENAME, THINGTEMPLATENAME, USERNAME, MASHUPS, INFOTABLE, PASSWORD, XML, JSON, VALUES. | n/a | n/a | n/a | n/a |
Validation des données du widget Liste
Vous pouvez utiliser les propriétés de validation pour valider la sélection d'éléments de liste au moment de l'exécution. Par exemple, vous pouvez rendre un élément obligatoire dans la liste 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 ci-après répertorie les propriétés de validation disponibles dans le panneau Validation.
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 modification de la liste | 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 |
ShowValidationState | Service pouvant être lié qui vous permet d'afficher l'état de validation avant qu'un utilisateur interagisse avec le widget lors de l'exécution. Par défaut, l'état de validation s'affiche uniquement après l'interaction de l'utilisateur. | Service | n/a | Entrée | 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 | Permet de sélectionner une 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 ou Invalid. | STRING | Undefined | O | N |
ValidationSuccessIcon | Permet de sélectionner une icône SVG à afficher dans le message de statut 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 |