Passer au contenu
Français
  • Il n'y a aucune suggestion car le champ de recherche est vide.

Corfix Form Builder : utilisation du composant « Select Boxes »

Cet article vous explique comment utiliser le composant « Select Boxes » dans le générateur de modèles.

Cet article explique les différents paramètres disponibles pour un « composant de listes de sélection » dans Corfix. Un composant de listes de sélection permet aux utilisateurs de choisir plusieurs options parmi une liste prédéfinie.

Où le trouver

Dans votre générateur de formulaires Corfix, cliquez sur un composant « Select Boxes » pour accéder au panneau de configuration. Vous verrez quatre onglets :

  • Affichage

  • Données

  • Validation

  • Conditionnel

Chaque onglet permet de contrôler différents aspects du comportement du champ.


1. Onglet « Affichage »

L'onglet « Affichage » permet de définir la manière dont le composant « Select Boxes » s'affiche pour l'utilisateur.

  • Libellé :

    • Il s'agit du titre principal de votre groupe de cases à cocher, tel qu'il s'affichera pour les utilisateurs. Ce champ est obligatoire.

    • Exemple : « Sélectionnez vos préférences », « Certifications détenues », « Éléments inclus ».

  • Position du libellé :

    • Détermine l'emplacement de l'étiquette principale par rapport au groupe d'options (par exemple : en haut, à gauche, à droite, en bas).

    • Par défaut : En haut.

  • Position des libellés des options :

    • Permet de contrôler l'emplacement des libellés des options individuelles par rapport à leurs cases à cocher respectives (par exemple, à droite, à gauche).

    • Par défaut : À droite.

  • Description :

    • Fournit un texte explicatif supplémentaire pour le composant, généralement affiché sous le libellé principal.

    • Exemple : « Cochez toutes les cases qui s'appliquent. »

  • Info-bulle :

    • Texte qui s'affiche lorsque l'utilisateur passe la souris sur le composant. Utile pour fournir une aide rapide ou du contexte.

  • Classe CSS personnalisée :

    • Permet aux utilisateurs avancés d’appliquer une mise en forme personnalisée au composant à l’aide de classes CSS.

  • Mise en page en ligne :

    • Si cette option est cochée, les éléments s'afficheront horizontalement (côte à côte) plutôt que verticalement (les uns en dessous des autres).

  • Masquer le libellé :

    • Si cette option est cochée, le libellé principal du composant ne s'affichera pas.

  • Édition modale :

    • (Les détails ne sont pas entièrement visibles sur la capture d'écran, mais cela concerne généralement la modification dans une fenêtre modale contextuelle).

  • Inclure dans les rapports :

    • Si cette case est cochée, les données de ce champ (les options sélectionnées) seront incluses dans les rapports.


2. Onglet « Données »

L'onglet « Données » vous permet de définir les choix effectivement proposés à l'utilisateur pour ce composant.

  • Valeur par défaut :

    • Vous permet de présélectionner une ou plusieurs options au chargement du formulaire. Les utilisateurs peuvent modifier ces sélections.

  • Valeurs :

    • Il s’agit d’un tableau dans lequel vous définissez chaque option de case à cocher individuellement.

      • Indicateur : (Fonctionnalité dont l’utilité n’apparaît pas clairement sur la capture d’écran ; probablement destinée à un usage interne ou à des fonctionnalités avancées telles que les icônes).

      • Libellé : Texte visible qui apparaît à côté de la case à cocher pour chaque option (par exemple, « Option A », « Rouge », « Option B »).

      • Valeur : la valeur de données réelle qui sera enregistrée lorsque cette option spécifique sera cochée. Il s’agit d’un champ obligatoire. Il est souvent recommandé de définir la valeur comme une version simplifiée et lisible par machine du libellé (par exemple, libellé « Option A » -> valeur « optionA »).

      • Ajouter une autre option : cliquez sur ce bouton pour ajouter d’autres options à votre liste.


3. Onglet « Validation »

L’onglet « Validation » définit les règles permettant de s’assurer que les sélections de l’utilisateur répondent à des exigences spécifiques.

  • Obligatoire :

    • Si cette case est cochée, l’utilisateur doit sélectionner au moins une option dans la liste avant de valider le formulaire.

  • Nombre minimum d'options cochées :

    • Nombre minimum d'options que l'utilisateur doit sélectionner.

  • Nombre maximal d'options sélectionnées :

    • Nombre maximal d'options que l'utilisateur peut sélectionner.

  • Message d'erreur en cas de non-respect du nombre minimum :

    • Message d'erreur personnalisé affiché en cas de non-respect de la règle « Nombre minimum d'options sélectionnées ».

  • Message d'erreur « Nombre maximal sélectionné » :

    • Message d'erreur personnalisé s'affichant en cas de non-respect de la règle « Nombre maximal de cases cochées ».


4. Onglet « Conditionnel »

L'onglet « Conditionnel » vous permet de définir des règles déterminant quand l'ensemble de ce composant « Select Boxes » doit être affiché ou masqué en fonction des valeurs d'autres composants du formulaire.

  • Simple :

    • Il s’agit généralement d’un bouton bascule ou d’un menu déroulant permettant de choisir entre une logique conditionnelle simple et une logique conditionnelle avancée.

  • Ce composant doit s’afficher :

    • Choisissez si le composant doit être « Affiché » ou « Masqué » (options implicites) en fonction de la condition.

  • Lorsque le composant du formulaire :

    • Sélectionnez un autre composant de votre formulaire dont la valeur déclenchera la condition.

  • A la valeur :

    • Précisez la valeur exacte que doit avoir le composant de formulaire sélectionné pour que la condition soit remplie.

    Exemple : vous pouvez configurer une règle pour que « Sélectionnez vos garnitures préférées » ne s’affiche que lorsque la case « Commander une pizza ? » est cochée.


Panneau d’aperçu

La zone d’aperçu située à droite de la boîte de dialogue vous montre comment les « zones de sélection » s’afficheront visuellement sur votre formulaire. À mesure que vous définissez des options dans l’onglet Données ou que vous modifiez d’autres paramètres d’affichage, ces changements s’affichent immédiatement.


Actions situées au bas de la boîte de dialogue :

  • Enregistrer : enregistre toutes les modifications apportées aux paramètres du composant « Zones de sélection ».

  • Annuler : annule toutes les modifications non enregistrées et ferme la boîte de dialogue.

  • Supprimer : supprime le composant « Zones de sélection » du formulaire.


Bonnes pratiques pour le composant « Zones de sélection » :

  • Libellé principal clair : attribuez à l’ensemble du groupe d’options un libellé clair et simple (par exemple, « Méthodes de contact préférées »).

  • Libellés et valeurs d'options pertinents : veillez à ce que chaque option dispose d'un « libellé » clair pour l'utilisateur et d'une « valeur » concise pour le stockage des données (par exemple, libellé « Notifications par e-mail », valeur « email_notify »).

  • Utilisation pour les sélections multiples : ce composant permet aux utilisateurs de sélectionner plusieurs choix dans une liste. Si un seul choix est autorisé, utilisez plutôt un composant « Bouton radio » ou « Sélection (liste déroulante) ».

  • Définition du nombre minimum et maximum de sélections (validation) : s’il existe une exigence concernant le nombre d’options que les utilisateurs doivent ou peuvent sélectionner, utilisez les paramètres « Nombre minimum de cases cochées » et « Nombre maximum de cases cochées » pour garantir la qualité des données.

  • Affichage conditionnel en fonction de la pertinence : masquez l’ensemble du groupe de cases à cocher jusqu’à ce qu’il soit nécessaire, ce qui rendra votre formulaire plus épuré et plus facile à parcourir.