À propos des composants de formulaire

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é. Le composant Mot de passe a les mêmes options que le composant Champ de texte .

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 la base de données.

  
  

  

  
  

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 la base de 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.
  • Cliquer (Click) - effectue l'opération de clic.
  • Réinitialiser le formulaire (Reset Form ) : réinitialise les champs du formulaire.
  • Événement (Event) : lorsqu'un utilisateur clique sur le bouton, un certain événement commence à être exécuté. Lorsque vous sélectionnez Événement (Event), vous devez saisir l'événement dans le champ Événement de bouton (Button Event). Vous pouvez maintenant utiliser le nom de l'événement pour créer une logique personnalisée qui déclenchera un autre composant.
    Par exemple, si vous souhaitez qu'un bouton calcule la valeur de deux composants et la sorte dans un troisième, vous pouvez créer un bouton avec l'événement nommé calculate, puis créer une logique appelée calculate pour le composant souhaité afin de générer le résultat.
• Réinitialiser les données du bloc DO (Reset Data from DO block ) : lorsque cette option est cochée pour les boutons de type clic, 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 de délimitation.
• Icône Gauche/Droite - ajoutez la chaîne de classe d'icône complète pour afficher l'icône. Par exemple, 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 : toutes les balises et tous les attributs HTML dangereux sont supprimés lors du rendu du formulaire, afin d'éviter les scripts intersites. Les balises et attributs supprimés sont les suivants : <script>, <embed>, <style>, onmouseoveret onload.

• 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 les actions de formulaire, 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 ) : rétablit le rendu du composant Contenu chaque fois qu’une valeur du formulaire est modifiée.

E-mail (Email)

Vous pouvez utiliser le composant E- mail pour ajouter un champ de saisie des adresses e-mail. Le composant E- mail est similaire au composant Champ de texte .

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 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 à incrémenter ou à décrémenter dans le sélecteur de temps.
• Minute Step Size : le nombre de minutes à incrémenter ou à décrémenter 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, 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.

PDF

Vous pouvez utiliser le composant PDF pour restituer des fichiers PDF dans vos actions de formulaire.

Fichier

Vous pouvez utiliser le composant Fichier pour permettre aux utilisateurs de télécharger des fichiers vers un formulaire ou de télécharger des fichiers à partir d'un formulaire.

• Modification modale (Modal Edit ) - ouvre une fenêtre modale pour modifier la valeur de ce composant.
• Répertoire - place tous les fichiers téléchargés dans ce composant dans le répertoire spécifié. La chaîne doit se terminer par /.
• Télécharger uniquement (Upload Only ) : permet aux utilisateurs de télécharger uniquement des fichiers. L'option de téléchargement (donload) ne sera pas disponible lorsqu'elle sera cochée.
• Types de fichiers (File Types ) : permet de spécifier les types de fichiers afin de classer les types de fichiers téléchargés par l'utilisateur. Recommandé lorsqu'un utilisateur télécharge plusieurs types de fichiers et que vous souhaitez que l'utilisateur spécifie le type de chaque fichier téléchargé.
• Modèle de fichier (File Pattern ) - vous permet de spécifier les extensions de fichier qui seront autorisées à être téléchargées. Les autres extensions de fichiers non spécifiées ne seront pas téléchargées.
• Taille minimale du fichier (File Minimum Size ) : définit la taille minimale du fichier téléchargé.
• Taille maximale du fichier (File Maximum Size ) : définit la taille maximale du fichier téléchargé.

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 champ 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 lors du chargement du formulaire.

  Table

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

• Nombre de lignes/colonnes : saisissez le nombre de lignes et 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 dans les 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

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 ajouter plusieurs composants en ligne dans une seule grille. Vous pouvez faire glisser et déposer plusieurs composants dans la grille de données en fonction de votre cas d'utilisation. Le composant Grille de données ( Data Grid ) vous permet d'ajouter plusieurs champs en double en ligne et dans une seule grille.

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, étiquetez-les, sélectionnez les lignes pour 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 afficher les données dans un format de table. 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.
• Modèle d’en-tête/ligne/pied de page : personnalisez la grille à l’aide de JavaScript.
• 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) .

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 : Grille de données ( Data Grid) et Modifier la grille ( Edit Grid).

Légende: = Non disponible.

Capacité	Grille de données	Modifier la grille
Scénarios recommandés	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é	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é	Maximum 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