À propos des composants de formulaire

Composants de base

Champ de texte

You can use the Text Field component to input short text.

Zone de texte

You can use the Text Area component to input long text. The Text Area component offers multi-line input.

The Rows setting allows you to set how many rows are visible in the Text Area component.

Numérique

You can use the Number component to input any number value.

• Use Thousands Separator - separates thousands with a comma.
• Require Decimal - always shows decimals, even if 0.
• Decimal Places - sets the maximum number of decimals displaying.

Mot de passe (Password)

Vous pouvez utiliser le composant Mot de passe pour saisir des mots de passe. Le texte est affiché sous forme d'astérisques au lieu de la valeur réelle saisie pour plus de confidentialité. Le composant Mot de passe a les mêmes options que le composant Champ de texte .

Case à cocher

You can use the Checkbox component to input boolean values (true or false).

Cocher les cases

You can use the Select Boxes component to allow users to choose multiple values from a list.

• Valeurs : permet d'ajouter des options à votre composant Cocher la case. La colonne Libellé est la valeur visible par les utilisateurs. La colonne Valeur est le nom enregistré dans la base de données.

  

Liste déroulante

You can use the Drop-down List component to display lists in a dropdown format.

• Widget Type - select the type of widget you want to use.

• Valeurs de la source de données : saisissez les valeurs qui apparaissent dans la liste déroulante. La colonne Libellé est la valeur visible par les utilisateurs. La colonne Valeur est le nom enregistré dans la base de données.

  

• Item Template - HTML template that allows you to control the way values are displayed in the dropdown list. You can access the values in the dropdown list, through the item variable. For example, use item.label to access a certain value in the dropdown list

• Refresh Options On - refreshes data when another field changes.

• Refresh Options On Blur - refreshes data when another field is blurred.

• Clear Value on Refresh Options - clears the components value when the Refresh On Field option is changed.

• Read Only Value - only show the value when in Read-Only mode.

• Choice.js options - input raw JSON object to use as options for the Select component.

• Use exact search - disables search algorithm threshold.

• Custom Default Value - create a custom default value using JavaScript or JSONLogic.

Bouton radio

You can use the Radio component to allow users to choose only one value from a list.

• Values - input the values that appear in the list. The Label column is the value visible to users. The Value column is the name stored in the database.

Button

You can use the Button component to allow users to perform various actions in the form.

• Action - select the action you want the button to perform:
  • Soumettre : soumet le formulaire.
  • Cliquer : effectue l'opération de clic.
  • Reset Form - resets the form fields.
  • É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é pour générer le résultat.

• Réinitialiser les données à partir du bloc DO : lorsque cette option est cochée pour les boutons de type Clic, cette option définit les données reçues du bloc DO. Permet d'augmenter les performances lorsque les données trouvées sur d'autres pages ne sont pas sur la page actuelle.
• Thème : choisissez le thème de la couleur du bouton dans la liste déroulante.
• Taille : choisissez la taille du bouton dans la liste déroulante.
• Bouton de blocage : l'é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

You can use the HTML Element to display a single HTML element in your form and configure it based on your use-case.

Remarque :

Toutes les balises et attributs HTML non sécurisés sont supprimés lors de l'affichage du formulaire, pour empêcher les scripts intersites. Les balises et les attributs qui sont supprimés sont : <script>, <embed>, <style>, onmouseover et onload.

• HTML Tag - The tag of the HTML Element.
• CSS Class - The CSS Class that can be added for this HTML Element. You can input multiple classes, by separating them with single spaces.
• Attributs - Les attributs de l'élément HTML. Seuls les attributs sécurisés sont autorisés, tels que : src, href et title.
• Contenu : le contenu de l'élément HTML.
• Actualiser lors de la modification : renvoie 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)

You can use the Content component to add information in your form, that is display-only. The value of the component is not submitted back to the server.

• Actualiser lors de la modification : renvoie 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. Le composant E-mail est similaire au composant Champ de texte .

Numéro de téléphone

You can use the Phone Number component to add a field for inputting phone numbers.

• Input Mask - Provides a predefined format for the phone number. For the phone number field, the default format is [phone].
  • 9 - numeric
  • a - alphabetical
  • * - alphanumérique
• Input Mask Placeholder Char - You can use a character as a placeholder in the field.
  Remarque :

  Le caractère d’espace réservé est remplacé par un espace s’il est utilisé à l’intérieur du masque.

Date/Heure

You can use the Date/Time component to input dates, times, or input both.

• Format - the format used for displaying the datetime value.

• Enable Date Input - allows users to input dates for this field.

• Use Input to add moment.js for minDate - enables the user to use an input for minDate moment function, instead of a calendar.

• Use calendar to set minDate - enables the user to use a calendar to set the minDate.

• Use Input to add moment.js for maxDate - enables the user to use an input for maxDate moment function, instead of a calendar.

• Utiliser le calendrier pour définir maxDate : permet d'utiliser un calendrier pour définir le maxDate.

• Disable specific dates or dates by range - add dates that you want to ban. For example, 2027-08-11.

• Custom Disabled Dates - allows you to ban certain dates using a customized function.

• Disable weekends - allows you to ban weekends.

• Disable weekdays - allows you to ban weekdays.

• Enable Time Input - allows users to input time for this field.

• Taille d'incrément des heures : le nombre d'heures à incrémenter ou décrémenter dans le sélecteur d'heure.

• Taille d'incrément des minutes : le nombre de minutes à incrémenter ou décrémenter dans le sélecteur d'heure.

• 12 Hour Time (AM/PM) - displays time in 12 hour periods, using AM or 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

You can use the Day component to ask for input for Day, Month, and Year, either through a number-type field or a select-type field.

• Type / Type of input - choose to give input for Day, Month, or Year either by typing in a number or by selecting options from a dropdown list.

Minimum / Maximum Year - choose the minimum / maximum year that can be entered.

• Require Day - the Day field must be filled in before the form renders.

• Require Month - the Month field must be filled in before the form renders.

• Require Year - the Year field must be filled in before the form renders.

• Maximum / Minimum Day - choose a minimum / maximum day that can be entered. You can also use Moment.js functions. For example, you can use moment().add(10, 'days').

  

Délai (Time)

You can use the Time component to input time in different formats.

• Input Type - select the type of widget you would like to use for inputting time: HTML5 Time Input (users can choose the time from a given panel) or Text Input with Mask (users can manually input the time).

Devise

You can use the Currency component to display financial amounts using a certain currency. The component has an input mask that displays the currency icon and automatically adds commas based on the number that the user inputs. The component allows two decimal values.

• Devise : choisissez une devise donnée 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 charger des fichiers vers un formulaire ou de télécharger des fichiers à partir d'un formulaire.

• Modifier le modal : ouvre un modal 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 se termine par /.
• Télécharger uniquement : permet uniquement aux utilisateurs de télécharger des fichiers. L'option de chargement ne sera pas disponible lorsque cette case sera cochée.
• Types de fichiers - vous permet de spécifier les types de fichiers, afin de classer les types de fichiers que l'utilisateur charge. Recommandé lorsqu'un utilisateur charge plusieurs types de fichiers et que vous souhaitez que l'utilisateur spécifie le type de chaque fichier chargé.
• Modèle de fichier : vous permet de spécifier les extensions de fichiers qui seront autorisées à être chargées. Les autres extensions de fichier non spécifiées ne seront pas téléchargées.
• Taille minimale du fichier : définit la taille minimale du fichier chargé.
• Taille maximale du fichier : définit la taille maximale du fichier chargé.

Enquête

You can use the Survey component to allow users to answer multiple questions, by choosing only one value from a list.

• Questions - add the questions that the users should answer.
• Values - add the options that the user can select per question.

Composants de mise en page

Colonnes

You can use the Columns component to display other components in line, grouping them as columns.

• Column Properties - add columns to the component and configure them, by adjusting their Width, Offset, Push and Pull properties. After configuring the columns' layout, you can drag and drop other components into the Columns component.
• Ajuster automatiquement les colonnes : ajuste automatiquement les colonnes s'il y a des composants imbriqués masqués.

Panneau

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

• Theme - choose the theme of the panel from the dropdown list. The Bootstrap class is added to the wrapper div.

• Collapsible - allows you to collapse the panel.

• Initialement réduit : la propriété est disponible uniquement lorsque l'option Réductible est cochée. Réduit le panneau lorsque le formulaire est en cours de chargement.

  Table

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

• Nombre de lignes/colonnes : entrez le nombre de lignes et de colonnes que vous souhaitez afficher dans le tableau
• Cloner les composants de la 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 contenant le même contenu.
• Cell Alignment- choose the horizontal alignment of the cells in the table.
• Striped - adds striped shading to rows.
• Bordered - adds visible borders to the table.
• Hover - highlights row when hovering the mouse over it.
• Condensed - condenses the size of the table.

Onglets

You can use the Tabs component to group components into tabs. When the form renders, you can view one tab at a time.

The Tabs setting allows you to add, configure, reorder, and remove tabs.

Données

Conteneur

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

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

Grille de données

Vous pouvez utiliser le composant Grille de données 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 pour correspondre à votre cas d’utilisation. Le composant Grille de données vous permet d'ajouter plusieurs champs en double en ligne et en une seule grille.

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• Activer les groupes de lignes : permet de séparer les lignes en groupes. Ajoutez des groupes, labellisez-les et sélectionnez les lignes pour chaque groupe.
• Initialiser vide - 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 pour afficher les données sous forme de table. Vous pouvez faire glisser et déposer plusieurs composants de formulaire dans la grille d’édition, pour capturer des charges de données.

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• Ouvrir la première ligne lorsqu'elle est vide
  • ouvre la première ligne lorsque l'activité Modifier la Grille est vide.
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Modèle d'en-tête/ligne/ pied de page : personnalisez la grille à l'aide de JavaScript.
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

Comparaison entre les composants de commandes de grille

Le tableau ci-dessous compare les différentes fonctionnalités des commandes de grille disponibles dans le concepteur de formulaires. Le tableau présente également les scénarios recommandés pour l'utilisation de chaque composant de contrôle de grille : Grille de données et Modifier la grille.

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	❌	❌