Liste de cases à cocher

Acteur d’interaction qui permet d’afficher une liste de cases à cocher. Cette liste peut être une arborescence. L’acteur possède deux modes de sélection : simple et multiple.

Sommaire

🔧 propriété · ℹ️ information · ⚙️ méthode · ⚡ évènement · 🔒 lecture seule

Propriétés

Actif?

this.properties.enabled · boolean · défaut true · modifie : Style CSS

Avec l’option ‘Tout’?

this.properties.withCheckAll · boolean · défaut true · modifie : Taille

L’option qui sélectionne tout est-elle présente ?

Dépassement de texte

this.properties.textOverflow · 'nowrap' | 'break' | 'wrap' | 'truncate' · défaut 'nowrap' · modifie : Rendu

Comportement au dépassement de texte.

En ligne?

this.properties.isInline · boolean · défaut false · modifie : Taille

Les cases à cocher s’empilent horizontalement ?

Si cette propriété a la valeur false, les cases s’empileront verticalement.

État de validation

this.properties.validationState · 'default' | 'valid' | 'invalid' · défaut 'default' · modifie : Rendu

État de validation de l’acteur.

L’acteur possède une propriété état de validation qui permet de présenter l’acteur dans des état de validation différents :

  • Valide : l’acteur est vert.
  • Invalide : l’acteur est rouge.
  • Normal : l’acteur est normale.

Cette couleur prend le pas sur la propriété couleur qui est normalement utilisée pour définir la couleur du texte.

Multi-sélection?

this.properties.isMultiSelect · boolean · défaut true

La sélection multiple est-elle activée ?

La propriété Multi sélection? permet de définir si l’acteur est en mode sélection multiple ou non.

Dans le cas de la multi sélection, la propriété Avec l’option ‘Tout’? permet de définir si l’option “Tout” est présente dans la liste. La propriété Texte pour ‘Tout’ permet de définir le texte qui s’affiche dans l’option “Tout”.

Options

this.properties.options · string · défaut '[]'

Chaîne JSON contenant un tableau d’options.

La propriété Options est une chaîne JSON qui contient un tableau d’ options.

Une option est un object JSON qui possède les propriétés suivantes :

CHAMPS DESCRIPTION PAR DÉFAUT
value La valeur de l’option. C’est son identifiant unique dans la liste. De préférence, la valeur est une chaîne de caractères. -
text Le texte qui s’affiche à coté de la case à cocher. -
disabled Indique si l’option doit apparaître désactivée. false
options Un tableau d’options qui sera affiché sous la case à cocher pour fabriquer une arborescence. null
collapsed Indique si la case à cocher doit enrouler ses options éventuelles. false

Exemple :

SynApps

[
  {
    "value": "item1",
    "text": "Élément 1"
  },
  {
    "value": "item2",
    "text": "Élément 2",
    "options": [
      {
        "value": "sub2Item1",
        "text": "Sous élément 1"
      },
      {
        "value": "sub2Item2",
        "text": "Sous élément 2"
      }
    ]
  },
  {
    "value": "item3",
    "text": "Élément 3",
    "collapsed": true,
    "options": [
      {
        "value": "sub3Item1",
        "text": "Sous élément 1",
        "disabled": true,
        "options": [
          {
            "value": "sub3sub1Item1",
            "text": "Sous sous élément 1"
          },
          {
            "value": "sub3sub1Item2",
            "text": "Sous sous élément 2"
          }
        ]
      },
      {
        "value": "sub3Item2",
        "text": "Sous élément 2"
      }
    ]
  }
]

Sélection

this.properties.values · string · défaut '[]'

Chaîne JSON contenant un tableau des valeurs sélectionnées Array.<String>.

La propriété Sélection est une chaîne JSON qui contient la liste des valeurs sélectionnées. Dans le cas de la sélection simple, la liste ne contient qu’une seule valeur à la fois.

Exemples en multi sélection:

les options 1 et 2 sont sélectionnées

["value1", "value2"]

Aucune valeur n’est sélectionnée :

[]

Si la propriété Tout est la valeur vide? est activée, toutes les options sont sélectionnées :

null

En mode de sélection simple, le format de la sélection reste le meme.

Par exemple : ["value1"] ou bien [].

Taille

this.properties.size · 'default' | 'large' | 'small' · défaut 'default' · modifie : Rendu

Taille des cases à cocher de l’acteur.

La propriété spécifique Taille permet de changer celle de l’acteur.

Cette propriété possède trois options :

  • Par défaut.
  • Grand.
  • Petit.

Seul le choix par défaut vous laisse la possibilité de modifier la taille du texte. Les autres options prennent le pas sur tout autre réglage.

Texte pour ‘Tout’

this.properties.checkAllText · string · défaut '' · modifie : Taille

Texte pour l’option qui sélectionne tout.

Tout est la valeur vide?

this.properties.allIsNull · boolean · défaut true

Tout sélectionné se traduit-il par la valeur null dans properties.values ?

Informations

Accessibles par script, via this dans un script de l’acteur ou context.getActor('clé') depuis un autre acteur.

Les champs d’information suivants sont très utiles pour réaliser des liaisons ou dans les scripts dans la mesure ou les propriétés de l’acteur ici sont souvent des chaines JSON.

flatOptions

this.flatOptions · Array.<JSON.Option>

Obtient ou définit les options sous forme de tableau à plat.

hasOptions

this.hasOptions · 🔒 lecture seule · boolean

Obtient la valeur indiquant si l’acteur a des options.

isAllChecked

this.isAllChecked · 🔒 lecture seule · boolean

Les options sont-elles toutes sélectionnées?

Liste des options

this.options · Array.<JSON.Option>

Obtient ou définit les options sous forme de tableau hiérarchique. C’est l’image Javascript de properties.options.

Le tableau des options est accessible dans le champ d’information Liste des options.

Texte et Textes

this.texts · 🔒 lecture seule · Array.<String> ou null

Obtient la liste des textes correspondants à la sélection.

De la même manière que pour les valeurs, le champ d’information Texte et Textes contient respectivement le texte sélectionné et le tableau des textes sélectionnés.

Valeur

this.value · String ou null

Obtient ou définit la valeur sélectionnée lorsque l’acteur est en mode sélection simple.

En mode sélection simple, le champ d’information Valeur contient simplement la valeur sélectionnée.

Valeurs

this.values · Array.<String> ou null

Obtient ou définit la liste des valeurs sélectionnées. C’est l’image Javascript de properties.values.

Dans le mode multi sélection, le champ d’information Valeurs contient la liste des valeurs sélectionnées sous forme de tableau Javascript.

Événements

Les évènements communs à tous les acteurs sont décrits avec l’acteur de base.

onSelected

Se produit lorsqu’une option a été sélectionnée/désélectionnée.

context : contexte d’évènement, avec en plus :

Membre de context Type Description
newValues Array.<String> Valeurs sélectionnées.

L’évènement onSelected est déclenché lorsque la sélection change.

Hérite de

Outre ce qui est décrit ici, l’acteur a tout ce que décrit l’acteur de base : propriétés communes (taille, disposition, aspect, texte, bordures, effets…), évènements communs (cycle de vie, souris, clavier…) et membres accessibles par script.

Il hérite aussi de :

  • InputBase : Base pour les acteurs de saisie.