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 « Puits ».

Cet article vous explique comment utiliser le composant « Puits » dans le Générateur de modèles.

Un « composant de puits » est avant tout un élément de mise en page utilisé pour décaler visuellement ou regrouper d'autres composants de formulaire au sein d'une zone distincte, souvent en retrait ou encadrée.

Où le trouver

Dans votre Corfix Form Builder, cliquez sur un composant « Well » pour accéder au panneau de configuration. Vous verrez quatre onglets :

  • Affichage 

  • Conditionnel

1. Onglet « Affichage »

L’onglet « Affichage » permet de contrôler l’apparence et l’identification du composant de puits.

  • Libellé :

    • Il s’agit du titre du composant dans le générateur de formulaires. Bien qu’il s’agisse d’un champ obligatoire, il sert souvent davantage d’identifiant pour vous, en tant que concepteur du formulaire, que de libellé visible par l’utilisateur final, en particulier si vous choisissez l’option « Masquer le libellé ».

    • Exemple : « Composant Well », « Boîte d’informations client ».

  • Classe CSS personnalisée :

    • Permet aux utilisateurs avancés d’appliquer une mise en forme personnalisée au composant à l’aide de classes CSS, offrant ainsi un contrôle accru sur son aspect visuel (par exemple, ajout d’une bordure, d’une couleur d’arrière-plan ou d’un espacement).

  • Masquer le libellé :

    • Si cette case est cochée, le libellé principal du composant ne s’affichera pas sur le formulaire. Cette option est généralement cochée pour les composants de mise en page tels que « Puits », car leur fonction est le regroupement visuel et non la saisie directe de données.

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

2. Onglet « Conditionnel »

L'onglet « Conditionnel » vous permet de définir des règles déterminant quand l'ensemble de ce composant « Well » (et tous les composants qu'il contient) 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 qu’un champ « Instructions spéciales » (contenant une zone de texte) ne s’affiche que lorsque la case à cocher « Des instructions spéciales sont-elles nécessaires ? » est cochée.

Fenêtre d’aperçu

La zone d’aperçu située à droite de la boîte de dialogue vous montre comment le « champ » s’affichera visuellement sur votre formulaire. Elle affiche généralement une case ou une zone légèrement ombrée, indiquant une zone délimitée dans laquelle vous pouvez placer d’autres champs de formulaire. Cela vous aide à visualiser comment le contenu sera séparé visuellement.

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

  • Enregistrer : enregistre toutes les modifications apportées aux paramètres du composant « Zone ».

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

  • Supprimer : supprime le composant « Well » et tous les composants qui y sont placés du formulaire.

Bonnes pratiques pour le composant « Well » :

  • Séparation visuelle : utilisez un « Well » pour séparer clairement les différentes sections de votre formulaire, ce qui facilite le traitement des informations par les utilisateurs.

  • Regroupez les champs associés : placez un groupe logique de champs à l’intérieur d’un « Well » pour améliorer l’organisation, à l’instar d’un composant « Panel » ou « Grouping », mais souvent avec un style visuel plus simple et moins imposant.

  • Utilisez du CSS personnalisé pour la mise en forme : le composant « Well » étant un conteneur de base, utilisez la « classe CSS personnalisée » pour définir son apparence (par exemple, une légère nuance d’arrière-plan, une bordure claire) afin qu’elle s’harmonise avec le design de votre formulaire.

  • Masquez l’étiquette : en règle générale, l’« étiquette » principale du « Well » sert à des fins d’organisation interne ; masquez-la dans l’interface utilisateur à l’aide de la case à cocher « Masquer l’étiquette ».

  • Regroupement conditionnel : utilisez une logique conditionnelle pour afficher ou masquer des sections entières contenues dans un « Well » en fonction des saisies de l’utilisateur, ce qui optimise l’expérience utilisateur du formulaire.