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

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

Ce composant permet de disposer d'autres composants de formulaire côte à côte dans une mise en page en colonnes, ce qui facilite l'organisation visuelle de votre formulaire.

Où le trouver

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

  • Affichage

  • Conditionnel

1. Onglet « Affichage »

L’onglet « Affichage » permet de contrôler la mise en page et l’apparence générale du composant « Colonnes ».

  • Libellé :

    • Il s'agit du titre de votre section de colonnes. Bien qu'il s'agisse d'un champ obligatoire, il sert souvent davantage d'identifiant au sein du générateur de formulaires que de libellé visible par l'utilisateur.

    • Exemple : « Colonnes », « Mise en page à deux colonnes », « Champs d’adresse ».

  • Propriétés des colonnes :

    • Cette section vous permet de définir la largeur de chaque colonne que vous souhaitez créer. Corfix utilise probablement un système de grille de 12 unités (courant en conception web), dans lequel la somme des largeurs des colonnes doit généralement totaliser 12 pour une ligne complète.

      • Largeur : largeur numérique attribuée à chaque colonne.

      • Ajouter une colonne : cliquez sur ce bouton pour ajouter une autre colonne à votre mise en page.

  • 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, le libellé du composant ne s'affichera pas sur le formulaire. Elle est souvent cochée pour les composants de mise en page, car leur fonction est l'agencement visuel.

  • É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 « Colonnes » (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 que la section « Coordonnées sur deux colonnes » ne s’affiche que lorsque la case « Exiger des coordonnées supplémentaires » est cochée.

Panneau d’aperçu

Le panneau d’aperçu situé à droite de la boîte de dialogue représente visuellement la disposition en colonnes que vous êtes en train de créer. Il affiche la division horizontale de l’espace en colonnes, en fonction des paramètres de « Largeur » que vous appliquez. Les autres composants que vous glisserez-déposerez ultérieurement dans ces colonnes apparaîtront alors au sein de cette structure.

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

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

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

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

Bonnes pratiques pour le composant « Colonnes » :

  • Utilisez-le pour une organisation visuelle : utilisez les colonnes pour regrouper côte à côte des champs liés et rendre vos formulaires plus courts et plus faciles à lire.

  • Visez une largeur totale de 12 unités : pour une seule ligne complète, assurez-vous que la somme des « largeurs » de vos colonnes soit égale à 12 (par exemple, deux colonnes de 6, trois colonnes de 4).

  • Masquez l’étiquette : pour les colonnes, masquez généralement l’« étiquette » du composant, car son objectif principal est la mise en page, et non la saisie de données.

  • Regroupez les champs liés : placez les champs logiquement liés (tels que le prénom et le nom, ou la ville et le code postal) dans des colonnes adjacentes.

  • Regroupement conditionnel : utilisez les paramètres « Conditionnels » pour afficher ou masquer des sections entières du formulaire organisées en colonnes, ce qui permet d’obtenir des formulaires dynamiques plus clairs.