Corfix Form Builder : utilisation du composant « Grille de données ».

Ce composant puissant vous permet de créer une structure dynamique de type tableau, réutilisable, dans laquelle les utilisateurs peuvent ajouter plusieurs lignes de sous-composants (champs). Il est idéal pour recenser des listes d’éléments, des entrées multiples d’un même type ou des données complexes se répétant.

Où le trouver

Dans votre Corfix Form Builder, cliquez sur un composant « Grille de données » 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 mise en page et l'apparence générale du composant Data Grid.

• Libellé :

  • Il s'agit du titre visible de votre section de grille de données que les utilisateurs verront. Ce champ est obligatoire.

  • Exemple : « Lignes de commande », « Participants », « Défauts détectés ».

• Position du libellé :

  • Détermine l'emplacement de l'étiquette par rapport à la grille de données (par exemple, en haut, à gauche, à droite, en bas).

  • Par défaut : En haut.

• Description :

  • Fournit un texte explicatif supplémentaire concernant le composant, généralement affiché sous l'étiquette.

  • Exemple : « Répertoriez tous les matériaux utilisés, leur quantité et leur prix unitaire. »

• Info-bulle :

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

• Désactiver l’ajout/la suppression de lignes :

  • Si cette option est cochée, les utilisateurs ne pourront ni ajouter de nouvelles lignes ni supprimer des lignes existantes dans la grille de données. Cela permet ainsi de disposer d’un ensemble de lignes fixe.

• Ajouter un autre texte :

  • Permet de personnaliser le texte du bouton sur lequel les utilisateurs cliquent pour ajouter une nouvelle ligne.

  • Par défaut : « Ajouter une autre ».

• Position du bouton « Ajouter un autre » :

  • Détermine l'emplacement du bouton « Ajouter un autre » par rapport aux lignes (par exemple : en bas, en haut, aux deux endroits).

  • Par défaut : En bas.

• Initialiser à vide :

  • Si cette option est cochée, la grille de données s'affiche initialement sans aucune ligne visible, et l'utilisateur doit cliquer sur « Ajouter un autre » pour commencer à ajouter des entrées. Si cette option n'est pas cochée, la grille s'affiche généralement avec une ligne vide.

• Classe CSS personnalisée :

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

• Masquer le libellé :

  • Si cette option est cochée, l'étiquette principale du composant ne s'affichera pas sur le formulaire.

• Afficher le libellé dans la grille de données :

  • Ce paramètre détermine probablement si les libellés des champs individuels au sein de chaque ligne de la grille de données sont affichés (par exemple, si un champ « Quantité » est ajouté à la grille, ce paramètre détermine si « Quantité » apparaît au-dessus ou à côté du champ de saisie dans chaque ligne).

• Modification en fenêtre modale :

  • Si cette option est cochée, la modification de lignes ou de composants individuels au sein de la grille de données peut s'ouvrir dans une fenêtre modale contextuelle distincte, ce qui peut s'avérer utile pour les lignes complexes.

2. Onglet « Données »

L'onglet « Données » permet de gérer les données initiales et la structure de la grille de données.

• Valeur par défaut :

  • Vous permet de préremplir la grille de données avec une ou plusieurs lignes par défaut lors du chargement du formulaire. Cliquez ici sur « Ajouter une autre ligne » pour définir ces lignes par défaut.

3. Onglet « Validation »

L'onglet « Validation » définit les règles applicables au composant « Grille de données ».

• Obligatoire :

  • Si cette case est cochée, l’utilisateur doit ajouter au moins une ligne à la grille de données avant de valider le formulaire.

• Longueur minimale :

  • Nombre minimum de lignes qui doivent figurer dans la grille de données.

• Longueur maximale :

  • Nombre maximal de lignes pouvant être ajoutées à la grille de données.

4. Onglet « Conditionnel »

L'onglet « Conditionnel » vous permet de définir des règles déterminant quand l'ensemble de ce composant de grille de données (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 grille de données « Dépenses supplémentaires » ne s’affiche que lorsque la case à cocher « Y a-t-il des dépenses supplémentaires ? » est cochée.

Fenêtre d’aperçu

La zone d’aperçu située à droite de la boîte de dialogue représente visuellement le composant Grille de données. Elle affiche généralement un espace réservé pour une ligne et un bouton « Ajouter un autre », indiquant que les utilisateurs peuvent ajouter plusieurs entrées. Elle vous aide à visualiser l’apparence de la section répétable sur votre formulaire.

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

• Enregistrer : enregistre toutes les modifications apportées aux paramètres du composant Grille de données.

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

• Supprimer : supprime du formulaire le composant Grille de données ainsi que tous les composants qui y sont placés.

Bonnes pratiques pour le composant « Grille de données » :

• Utilisation pour les données répétitives : Idéal pour les cas où les utilisateurs doivent ajouter plusieurs entrées du même type, comme une liste d’articles en stock, de personnes à charge ou de relevés quotidiens.

• Personnalisez le texte « Ajouter un autre » : modifiez le texte « Ajouter un autre » pour le rendre plus descriptif (par exemple, « Ajouter un autre article », « Ajouter une nouvelle personne ») afin de mieux guider l’utilisateur.

• Définir la longueur minimale/maximale : utilisez la « Longueur minimale » pour garantir la collecte des données essentielles (par exemple, au moins un défaut signalé) et la « Longueur maximale » pour éviter les entrées excessives si nécessaire.

• Envisagez l’option « Initialiser à vide » : pour les grilles qui ne sont pas toujours nécessaires, cochez « Initialiser à vide » afin de conserver un formulaire plus épuré jusqu’à ce que l’utilisateur ait explicitement besoin d’ajouter des lignes.

• Affichage conditionnel : masquez l’intégralité de la grille de données jusqu’à ce qu’elle soit pertinente par rapport à la saisie de l’utilisateur, ce qui facilite la navigation dans les formulaires complexes.