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

Corfix Form Builder : utilisation du composant « menu déroulant »

Cet article vous explique comment utiliser le menu déroulant dans le générateur de modèles.

Cet article résume les différents paramètres disponibles pour un « composant déroulant » dans Corfix. Un composant déroulant (également appelé « liste de sélection » ou « liste déroulante ») permet aux utilisateurs de sélectionner une seule option parmi une liste prédéfinie.

Où le trouver

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

  • Affichage

  • Données

  • Validation

  • Conditionnel

1. Onglet « Affichage »

L'onglet « Affichage » permet de contrôler la manière dont le composant « Menu déroulant » s'affiche pour l'utilisateur.

  • Libellé :

    • Il s'agit du titre principal de votre liste déroulante que les utilisateurs verront. Ce champ est obligatoire.

    • Exemple : « Sélectionnez votre rôle », « Choisissez un service », « Couleur préférée ».

  • Position du libellé :

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

    • Par défaut : En haut.

  • Type de widget :

    • Spécifie l’élément HTML sous-jacent ou la méthode de rendu du menu déroulant. « HTML 5 » est un élément Web standard.

  • Texte d'aide :

    • Texte qui s'affiche dans le champ du menu déroulant avant que l'utilisateur n'effectue une sélection. Il sert souvent d'instruction.

    • Exemple : « Sélectionnez une option... » ou « Choisissez dans la liste ».

  • Description :

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

    • Exemple : « Veuillez sélectionner la catégorie la plus pertinente pour votre demande. »

  • 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.

  • Masquer le libellé :

    • Si cette option est cochée, l'étiquette principale 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 (la valeur de l'option sélectionnée) seront incluses dans les rapports.

2. Onglet « Données »

L'onglet « Données » vous permet de définir la liste des choix proposés à l'utilisateur pour ce menu déroulant.

  • Type de source de données :

    • Détermine d’où provient la liste des options. « Valeurs » signifie que vous les saisirez manuellement. D’autres options peuvent inclure la récupération à partir d’une API ou d’un autre composant.

  • Valeur par défaut :

    • Option présélectionnée lors du chargement du formulaire. Les utilisateurs peuvent modifier cette sélection.

  • Valeurs de la source de données :

    • Il s'agit d'un tableau dans lequel vous définissez chacune des options de la liste déroulante.

      • Indicateur : (fonctionnalité dont le rôle 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 s'affiche dans la liste déroulante 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 sélectionné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.

  • Activer la recherche statique :

    • Si cette case est cochée, les utilisateurs peuvent saisir du texte dans le champ déroulant pour rechercher et filtrer rapidement les options disponibles, ce qui est particulièrement utile pour les longues listes.

3. Onglet « Validation »

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

  • Obligatoire :

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

4. Onglet « Conditionnel »

L'onglet « Conditionnel » vous permet de définir des règles déterminant quand l'ensemble de ce composant déroulant 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 le menu déroulant « Logiciel préféré » ne s’affiche que lorsque la case « Êtes-vous développeur ? » est cochée.

Panneau d’aperçu

Le panneau d’aperçu situé à droite de la boîte de dialogue vous montre à quoi ressemblera visuellement le « menu déroulant » sur votre formulaire. À mesure que vous définissez des options dans l’onglet « Données » ou que vous modifiez les paramètres d’affichage tels que le libellé, vous verrez ces modifications s’appliquer 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 « Menu déroulant ».

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

  • Supprimer : supprime le composant « Menu déroulant » du formulaire.

Bonnes pratiques pour le composant « Menu déroulant » :

  • Libellé principal clair : utilisez un libellé concis qui indique aux utilisateurs ce qu’ils sélectionnent (par exemple, « Sélectionner un rôle », « Niveau de priorité »).

  • Options pertinentes : veillez à ce que chaque option du menu déroulant comporte un « libellé » clair pour l’utilisateur et une « valeur » utile pour le stockage des données.

  • Utilisation pour un choix unique : ce composant est particulièrement adapté lorsque les utilisateurs ne peuvent choisir qu’une seule option dans une liste. Pour les choix multiples, utilisez des « cases à cocher ».

  • Rendez les sélections essentielles obligatoires : si un choix dans la liste déroulante est obligatoire, cochez la case « Obligatoire » dans l’onglet « Validation ».

  • Activez la recherche pour les longues listes : si votre liste déroulante comporte de nombreuses options (par exemple, plus de 10 à 15), activez la « Recherche statique » pour aider les utilisateurs à trouver plus rapidement leur choix.