À propos des composants de formulaire

Un composant Form vous permet de collecter des données utilisateur. Les composants de l'interface utilisateur sont regroupés en catégories, en fonction de leur fonctionnalité, comme suit :

• Basique
• Avancé
• Mise en page
• Données.

Composants de base

Champ de texte

Vous pouvez utiliser le composant Champ de texte (Text Field ) pour saisir un texte court.

Zone de texte

Vous pouvez utiliser le composant Zone de texte (Text Area ) pour saisir du texte long. Le composant Zone de texte ( Text Area ) offre une entrée multiligne.

Le paramètre Lignes vous permet de définir le nombre de lignes visibles dans le composant Zone de texte .

Numérique

Vous pouvez utiliser le composant Nombre pour saisir n'importe quelle valeur numérique.

• Utiliser le séparateur de milliers - sépare les milliers par une virgule.
• Exiger une décimale (Require Decimal ) - affiche toujours les décimales, même si 0.
• Décimales (Decimal Places ) - définit le nombre maximal de décimales à afficher.

Mot de passe (Password)

Vous pouvez utiliser le composant Mot de passe pour saisir des mots de passe. Le texte s'affiche sous forme d'astérisques au lieu de la valeur réelle saisie pour la confidentialité.

Case à cocher

Vous pouvez utiliser le composant Checkbox pour saisir des valeurs booléennes (true ou false).

Cocher les cases

Vous pouvez utiliser le composant Zones de sélection ( Select Boxes ) pour permettre aux utilisateurs de choisir plusieurs valeurs dans une liste.

Valeurs : permet d'ajouter des options à votre composant Zone de sélection. La colonne Libellé est la valeur visible par les utilisateurs. La colonne Valeur (Value) est le nom stocké dans les données.

Libellé/en-tête

Chemin de fichier/dossier

Vous pouvez utiliser le composant Libellé/En-tête pour ajouter des libellés à d'autres composants de formulaire. Vous pouvez également l'utiliser pour séparer les sections de votre formulaire.

• Taille de l'étiquette - choisissez une taille ou un type pour le composant Étiquette/En-tête dans la liste déroulante.

Vous pouvez utiliser le composant Chemin d'accès au fichier/dossier (File/Folder Path ) pour obtenir le chemin d'accès au fichier ou au dossier du document d'un utilisateur.

Pour fournir un chemin de fichier dans le moteur de rendu de formulaire:

1. Cliquez sur le bouton Sélectionner (Select) du composant Chemin d'accès au fichier/dossier (File/Folder path ). La fenêtre Contrôle des fichiers (File Control) s'ouvre.
2. Sélectionnez un fichier.
3. Cliquez sur Ouvrir ( Open ) dans la fenêtre Contrôle des fichiers (File Control) .

Pour fournir un chemin de dossier dans le moteur de rendu de formulaire:

1. Cliquez sur le bouton Sélectionner (Select) du composant Chemin d'accès au fichier/dossier (File/Folder path ). La fenêtre Rechercher un dossier ( Browse For Folder ) s'ouvre.
2. Sélectionnez un dossier.

3. Cliquez sur OK dans la fenêtre Rechercher un dossier ( Browse For Folder ).

   
   

   

   
   

• Type de sélection : choisissez le type de chemin que les utilisateurs peuvent sélectionner : Fichier ou Dossier.

• Afficher tous les fichiers (Show All Files ) : lorsque cette option est cochée, les utilisateurs peuvent sélectionner n'importe quel type de fichier à partir du Contrôle des fichiers (File Control). Lorsqu'elle n'est pas cochée, la section Ajouter des extensions ( Add Extensions ) s'affiche, dans laquelle vous devez choisir manuellement le type de fichiers que les utilisateurs peuvent sélectionner dans le Contrôle des fichiers (File Control).

  
  

  

  
  

Remarque : vous pouvez limiter ou développer les types de fichiers que l'utilisateur peut sélectionner dans la section Ajouter des extensions de l'onglet Affichage .

Liste déroulante

Vous pouvez utiliser le composant Liste déroulante pour afficher des listes dans un format déroulant.

• Type de widget : sélectionnez le type de widget que vous souhaitez utiliser.

• Valeurs de la source de données (Data Source Values ) : saisissez les valeurs qui apparaissent dans la liste déroulante. La colonne Libellé est la valeur visible par les utilisateurs. La colonne Valeur (Value) est le nom stocké dans les données.

  
  

  

  
  
• Modèle d'élément (Item Template ) - Modèle HTML qui vous permet de contrôler la façon dont les valeurs sont affichées dans la liste déroulante. Vous pouvez accéder aux valeurs de la liste déroulante, via la variable item . Par exemple, utilisez item.label pour accéder à une certaine valeur dans la liste déroulante
• Options d'actualisation activées (Refresh Options On ) : actualise les données lorsqu'un autre champ est modifié.
• Actualiser les options en cas de flou (Refresh Options On Blur ) : actualise les données lorsqu’un autre champ est flou.
• Effacer la valeur lors de l'actualisation des options (Clear Value on Refresh Options ) : efface la valeur des composants lorsque l'option Actualiser sur le champ ( Refresh On Field) est modifiée.
• Valeur en lecture seule (Read Only Value ) : affiche la valeur uniquement en mode Lecture seule (Read-Only).
• Options Choice.js - entrez l'objet JSON brut à utiliser comme options pour le composant Select .
• Utiliser la recherche exacte (Use exact search ) - désactive le seuil de l'algorithme de recherche.
• Valeur par défaut personnalisée : créez une valeur par défaut personnalisée à l'aide de JavaScript ou de JSONLogic.

Bouton radio

Vous pouvez utiliser le composant Radio pour permettre aux utilisateurs de choisir une seule valeur dans une liste.

• Valeurs : saisissez les valeurs qui apparaissent dans la liste. La colonne Libellé est la valeur visible par les utilisateurs. La colonne Valeur (Value) est le nom stocké dans la base de données.

Button

Vous pouvez utiliser le composant Button pour permettre aux utilisateurs d'effectuer diverses actions dans le formulaire.

• Action (Action) - sélectionnez l'action que vous souhaitez que le bouton effectue :

  • Soumettre (Submit) : soumet le formulaire et exécute le bloc Faire (Do).
  • Cliquer (Click) - effectue l'opération de clic et exécute le bloc Faire .
  • Réinitialiser le formulaire (Reset Form ) : réinitialise les champs du formulaire.
  • Événement : lorsqu'un utilisateur clique sur le bouton, un certain événement commence à s'exécuter. Lorsque vous sélectionnez Événement , vous devez saisir l'événement dans le champ Événement du bouton ( Bouton Event ).
• Réinitialiser les données du bloc DO (Reset Data from DO block ) : lorsque cette option est cochée pour les boutons de type Click , elle définit les données reçues du bloc Do. Aide à améliorer les performances lorsque les données trouvées sur d'autres pages ne se trouvent pas sur la page actuelle.
• Thème (Theme) : choisissez le thème de couleur du bouton dans la liste déroulante.
• Taille (Size) : choisissez la taille du bouton dans la liste déroulante.
• Bouton Bloquer (Block Button ) : s'étend sur toute la largeur du conteneur englobant.
• Icône Gauche/Droite : ajoutez la chaîne de classe d'icône complète pour afficher une icône spécifique. Par exemple, vous pouvez ajouter fa fa-plus.

Composants avancés

Élément HTML

Vous pouvez utiliser l' élément HTML pour afficher un seul élément HTML dans votre formulaire et le configurer en fonction de votre cas d'utilisation.

Remarque : activez la propriété Désactiver l'intégrité ( Disable Sanitize ) dans l'activité Créer un formulaire ( Create Form) pour afficher tout le contenu dangereux à l'intérieur d'un élément HTML (HTML Element) .

• Balise HTML : la balise de l' élément HTML.
• Classe CSS : la classe CSS qui peut être ajoutée pour cet élément HTML. Vous pouvez saisir plusieurs classes en les séparant par des espaces.
• Attributs : les attributs de l' élément HTML. Seuls les attributs sécurisés sont autorisés, tels que : src, hrefet title.
• Contenu (Content) : le contenu de l' élément HTML.
• Actualiser en cas de modification (Refresh On Change ) : restitue l’ élément HTML chaque fois qu’une valeur change dans le formulaire.

Pour afficher des images et des fichiers PDF dans des formulaires, vous devez utiliser le composant Élément HTML . Consultez les tutoriels suivants :

• Affichage des images.
• Affichage des fichiers PDF.

Contenu (Content)

Vous pouvez utiliser le composant Contenu (Content ) pour ajouter des informations dans votre formulaire, c'est-à-dire en lecture seule. La valeur du composant n'est pas renvoyée au serveur.

• Actualiser en cas de modification (Refresh On Change ) : restitue le composant Contenu chaque fois qu’une valeur du formulaire change.

E-mail (Email)

Vous pouvez utiliser le composant E- mail pour ajouter un champ de saisie des adresses e-mail.

Numéro de téléphone

Vous pouvez utiliser le composant Numéro de téléphone ( Phone Number ) pour ajouter un champ de saisie des numéros de téléphone.

• Masque de saisie : fournit un format prédéfini pour le numéro de téléphone. Pour le champ du numéro de téléphone, le format par défaut est [phone].
• 9 - numérique
• a - alphabétique
• \* - alphanumérique
• Caractère d’espace réservé pour lemasque de saisie : vous pouvez utiliser un caractère comme espace réservé dans le champ.

Remarque : le caractère substituable est remplacé par un espace s'il est utilisé à l'intérieur du masque.

Date/Heure

Vous pouvez utiliser le composant Date/Heure pour saisir des dates, des heures ou les deux.

• Format : le format utilisé pour afficher la valeur date/heure.
• Activer la saisie de date (Enable Date Input ) : permet aux utilisateurs de saisir des dates pour ce champ.
• Use Input to add moment.js for minDate - permet à l'utilisateur d'utiliser une fonction d'entrée pour minDate moment, au lieu d'un calendrier.
• Utiliser le calendrier pour définir la datemin : permet à l'utilisateur d'utiliser un calendrier pour définir le minDate.
• Use Input to add moment.js for maxDate - permet à l'utilisateur d'utiliser une fonction d'entrée pour maxDate moment, au lieu d'un calendrier.
• Utiliser le calendrier pour définir la Datemax : permet à l'utilisateur d'utiliser un calendrier pour définir le maxDate.
• Désactiver des dates spécifiques ou des dates par plage - ajoutez les dates que vous souhaitez interdire. Par exemple, 2027-08-11.
• Dates désactivées personnalisées (Custom Disabled Dates ) : permet d'interdire certaines dates à l'aide d'une fonction personnalisée.
• Désactiver les week-ends : permet d'interdire les week-ends.
• Désactiver les jours de la semaine (Disable weekdays) : permet d'interdire les jours de la semaine.
• Activer la saisie de l'heure (Enable Time Input ) : permet aux utilisateurs d'entrer l'heure dans ce champ.
• Taille de l'étape horaire (Hour Step Size ) - le nombre d'heures qui doivent être incrémentées ou décrémentées dans le sélecteur de temps.
• Taille du pas de minute (minute Step Size ) - le nombre de minutes qui doivent être incrémentées ou décrémentées dans le sélecteur de temps.
• Heure 12 heures (AM/PM) - affiche l'heure par périodes de 12 heures, en utilisant AM ou PM.
• Date par défaut : définit la valeur par défaut sur une date spécifique à l'aide des fonctions Moment.js . Par exemple, vous pouvez utiliser la fonction suivante : moment().substract(10, 'days').
  
  

  

  
  

Jour

Vous pouvez utiliser le composant Day pour demander une entrée pour Day, Monthet Year, via un champ de type numérique ou un champ de type sélection.

• Type/Type d'entrée - choisissez de saisir le jour, le mois ou l'année en saisissant un nombre ou en sélectionnant des options dans une liste déroulante.

Année minimum/maximum - choisissez l'année minimum/maximum qui peut être saisie.

• Exiger un jour (Require Day) - le champ Jour (Day) doit être rempli avant le rendu du formulaire.
• Exiger un mois (Require Month ) - le champ Mois (Mois) doit être rempli avant le rendu du formulaire.
• Exiger l'année (Require Year ) - le champ Année doit être rempli avant le rendu du formulaire.
• Maximum/Minimum Day (Jour maximum/minimum) - choisissez un jour minimum/maximum pouvant être saisi. Vous pouvez également utiliser les fonctions Moment.js . Par exemple, vous pouvez utiliser moment().add(10, 'days').
  
  

  

  
  

Délai (Time)

Vous pouvez utiliser le composant Heure pour saisir l'heure dans différents formats.

• Type d'entrée (Input Type ) : sélectionnez le type de widget que vous souhaitez utiliser pour saisir l'heure : Saisie de l'heure HTML5 (les utilisateurs peuvent choisir l'heure à partir d'un panneau donné) ou Saisie de texte avec masque (les utilisateurs peuvent saisir l'heure manuellement).

Devise

Vous pouvez utiliser le composant Devise pour afficher des montants financiers dans une certaine devise. Le composant dispose d'un masque de saisie qui affiche l'icône de devise et ajoute automatiquement des virgules en fonction du nombre saisi par l'utilisateur. Le composant autorise deux valeurs décimales.

• Devise (Currency) - choisissez une certaine devise dans la liste déroulante.

Enquête

Vous pouvez utiliser le composant Enquête pour permettre aux utilisateurs de répondre à plusieurs questions, en choisissant une seule valeur dans une liste.

• Questions : ajoutez les questions auxquelles les utilisateurs doivent répondre.
• Valeurs : ajoutez les options que l'utilisateur peut sélectionner par question.

Composants de mise en page

Colonnes

Vous pouvez utiliser le composant Colonnes pour afficher d'autres composants en ligne, en les regroupant sous forme de colonnes.

• Propriétés de la colonne (Column Properties ) : ajoutez des colonnes au composant et configurez-les en ajustant leurs propriétés Width, Offset, Push et Pull. Après avoir configuré la disposition des colonnes, vous pouvez faire glisser et déposer d'autres composants dans le composant Colonnes .
• Ajuster automatiquement les colonnes : ajuste automatiquement les colonnes, si des composants imbriqués sont masqués.

Panneau

Vous pouvez utiliser le composant Panneau pour regrouper des composants et les ajouter dans un panneau nommé.

• Thème (Theme) : choisissez le thème du panneau dans la liste déroulante. La classe Bootstrap est ajoutée à la div wrapper.
• Rétractable : permet de réduire le panneau.
• Initialement réduit (Initially Collapsed ) - la propriété n'est disponible que lorsque l'option Réductible ( Repliable ) est cochée. Réduit le panneau lorsque le formulaire est chargé.

Table

Vous pouvez utiliser le composant Table pour créer une table qui contient d'autres composants de formulaire à l'intérieur des colonnes et des lignes de la table.

• Nombre de lignes/colonnes : saisissez le nombre de lignes ou de colonnes que vous souhaitez afficher dans le tableau.
• Clone Row Components (Cloner les composants de ligne) - clone les composants à l'intérieur des lignes et les ajoute également aux lignes restantes. Vous pouvez l'utiliser lors de la création de tables avec plusieurs lignes, qui contiennent le même contenu.
• Alignement des cellules (Cell Alignment) : choisissez l'alignement horizontal des cellules du tableau.
• Rayé : ajoute un ombrage rayé aux lignes.
• Avec bordures : ajoute des bordures visibles au tableau.
• Survol (Hover ) - met la ligne en surbrillance lorsque vous pointez dessus avec la souris.
• Condensé (Condensed) : condense la taille de la table.

Onglets

Vous pouvez utiliser le composant Onglets pour regrouper des composants dans des onglets. Lors du rendu du formulaire, vous pouvez afficher un onglet à la fois.

Le paramètre Onglets vous permet d'ajouter, de configurer, de réorganiser et de supprimer des onglets.

Données

Masqué

Vous pouvez utiliser le composant Hidden pour créer une propriété de ressource qui peut être définie de manière personnalisée dans un formulaire. Il ne s'affiche pas dans les formulaires rendus.

Conteneur

Vous pouvez utiliser le composant Container pour encapsuler un ensemble de champs dans un objet avec une clé de conteneur. Un conteneur avec la clé financialPerformance est soumis en tant que :

{
    data: {
      financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}

Grille de données

Vous pouvez utiliser le composant Grille de données (Data Grid ) pour restituer plusieurs lignes de données, de la même manière qu'une table de données. Vous pouvez faire glisser et déposer plusieurs composants dans la grille de données en fonction de votre cas d'utilisation.

Dans la fenêtre Moteur de rendu de formulaire ( Form Renderer) , les lignes à l'intérieur du composant Data Grid peuvent être ajoutées ou supprimées.

• Désactiver l'ajout/la suppression de lignes (Disable Adding/Removing Rows ) : masque les boutons qui permettent d'ajouter ou de supprimer des lignes lors du rendu du formulaire.
• Autoriser la réorganisation : réorganisez les lignes en les faisant glisser et en les déposant.
• Largeur de colonne égale (Egal Column Width ) : rend les largeurs de colonnes égales.
• Activer les groupes de lignes (Enable Row Groups ) : permet de séparer les lignes en groupes. Ajoutez des groupes, attribuez-leur un libellé et sélectionnez les lignes de chaque groupe.
• Initialiser vide (Initialize Empty ) : la grille de données n'aura aucune ligne visible lors de son initialisation.

Modifier la grille

Vous pouvez utiliser le composant Modifier la grille ( Edit Grid ) pour restituer plusieurs lignes de données, de la même manière qu'une table de données. Vous pouvez faire glisser et déposer plusieurs composants de formulaire dans la grille de modification ( Edit Grid) pour capturer de nombreuses données.

Lors du rendu du formulaire, vous pouvez ajouter un doublon de la grille de modification ( Edit Grid) en cliquant sur Ajouter un autre ( Add Another).

• Ouvrir la première ligne lorsque vide (Open First Row when Empty ) - ouvre la première ligne lorsque la grille d'édition est vide.
• Désactiver l'ajout/la suppression de lignes (Disable Adding/Removing Rows ) : masque les boutons qui permettent d'ajouter ou de supprimer des lignes lors du rendu du formulaire.
• Ajouter un autre texte (Add Another Text ) : modifie le nom du bouton Ajouter un autre (Add Another).
• Enregistrer le texte de la ligne (Save Row Text ) : modifie le texte du bouton Enregistrer la ligne (Save Row) .
• Supprimer le texte de la ligne (Remove Row Text ) : modifie le texte du bouton Supprimer la ligne (Remove Row) .

L'onglet Modèles est spécifique au composant Modifier la grille uniquement. Les modèles d'en- tête, de ligneet de pied de page vous permettent de personnaliser la grille à l'aide de JavaScript. Vous pouvez modifier le type de composants affichés dans les lignes d'une grille ou l'apparence de l'en-tête/du pied de page.

Modèle d'en-tête

Il s'agit du modèle Lodash utilisé pour restituer l'en-tête du composant Modifier la grille .

Attention : le modèle d'en-tête ne fonctionne pas avec les Actionsde formulaire.

Deux variables sont disponibles :

• value - le tableau des données de ligne.
• composants : le tableau des composants de la grille.

Modèle de ligne

Il s'agit du modèle Lodash utilisé pour le rendu de chaque ligne du composant Modifier la grille .

Attention : le modèle de ligne ne fonctionne pas avec les Actionsde formulaire.

Trois variables sont disponibles :

• ligne - objet des données d'une ligne.
• composants : le tableau des composants de la grille.
• state : état de la ligne actuelle (brouillon/enregistré).

Pour ajouter des événements de type Click , ajoutez les classes suivantes aux éléments : editRow et removeRow.

Modèle de pied de page

Il s'agit du modèle Lodash utilisé pour rendre le pied de page du composant Modifier la grille .

Deux variables sont disponibles :

• value - le tableau des données de ligne.
• composants : le tableau des composants de la grille.

Grille

Vous pouvez utiliser le composant Grille pour restituer plusieurs lignes de données, de la même manière qu'une table de données. La grille est un composant en lecture seule que vous pouvez utiliser pour afficher de grandes quantités de données. Vous pouvez faire glisser et déposer plusieurs composants de formulaire dans le composant Grille .

• Triable (Sortable) - trie les données à l'intérieur des colonnes par ordre croissant ou décroissant. Vous triez les données au moment de l'exécution, dans Form Renderer.
• Filtrable : filtre les données à l'intérieur de chaque colonne. Filtrez les données au moment de l'exécution, dans Form Renderer.
• Colonne(s) redimensionnable(s) : modifiez la largeur des colonnes au moment de l'exécution, dans le moteur de rendu de formulaire. La fonctionnalité Colonne(s) redimensionnable(s) permet de mieux voir les données à l’intérieur des colonnes.

• Pagination : affiche les données du composant Grille (Aperçu) sur des pages numérotées. La capacité de pagination inclut également la définition du nombre d'éléments par page.

  
  

  

  
  

Pour en savoir plus sur l'utilisation du composant Grille , consultez Utilisation de la grille.

Comparaison entre les composants de commandes de grille

Le tableau ci-dessous compare les capacités des contrôles de grille disponibles dans le Concepteur de formulaires. Le tableau décrit également les scénarios recommandés pour l'utilisation de chaque composant de contrôle de grille : Grid, Data Gridet Edit Grid.

Légende: = Non disponible.

Capacité	Grille	Grille de données	Modifier la grille
Scénarios recommandés	Affichage d'un grand nombre de données à des fins de lecture seule (capacité de lecture seule).	Affichage d'un petit ensemble de données qui doivent être modifiées par l'utilisateur (capacité de modification en ligne).	Affichage d'un petit ensemble de données qui doivent être modifiées par l'utilisateur (capacité de modification en ligne du sous-formulaire).
Nombre de rangées recommandé	Illimité (prise en charge de la pagination 100 lignes).	Pas plus de 100 lignes. Risque de réduction des performances au-delà des valeurs recommandées.	Pas plus de 100 lignes. Risque de réduction des performances au-delà des valeurs recommandées.
Nombre de colonnes recommandé	Illimité.	Maximum de 7 colonnes pour 100 lignes. Risque de réduction des performances	Maximum 7 colonnes pour 100 lignes. Risque de réduction des performances.
Modifiable
Pagination
Triable
Filtrable
Colonne redimensionnable lors de l'exécution
Regroupement de lignes
Logique et conditions
Personnalisation étendue basée sur des modèles
Recherche globale