Générateur de règles

Introduction

Rule Builder vous permet d'ajouter une logique conditionnelle à vos formulaires de manière rapide et intuitive sans utiliser une seule ligne de code. Il vous suffit d'ajouter un certain nombre de conditions à remplir pour mettre en œuvre un certain nombre d'actions telles que masquer/afficher des éléments HTML, activer/désactiver des champs, copier les valeurs des champs, sauter des pages et faire des calculs.

Pour accéder au Rule Builder vous devez vous rendre dans Form Manager , cliquer sur le Actions correspondant au formulaire sur lequel vous allez travailler, puis sur Règles conditionnelles .

Exigences

Avant d'utiliser Rule Builder, votre formulaire doit comporter au moins un champ. Sinon, un message d'avertissement s'affiche.

Aucune limitation

Vous n'avez aucune limitation pour créer des règles conditionnelles. Vous pouvez créer autant de règles, conditions, sous-conditions et actions que nécessaire.

Ajoutez votre première règle

Pour cet exemple, vous devez créer un formulaire de contact avec quatre champs :

• Nom (champ de texte)
• E-mail (champ e-mail)
• Message (zone de texte)
• Bouton (avec texte Soumettre)

Ensuite, allez dans Form Manager, localisez votre formulaire, cliquez sur le bouton Actions, puis cliquez sur Règles conditionnelles.

1. Une fois dans ce générateur de règles de formulaire, la première chose que vous remarquerez est un panneau vide avec le bouton Ajouter une règle. Cliquez sur ce bouton pour créer votre première règle.
2. Ensuite, vous verrez deux lignes, la première fait référence aux conditions et la seconde aux actions.
3. Cliquez sur le bouton Ajouter une condition et le premier champ du formulaire apparaîtra, suivi d'une déclaration. Dans notre exemple, le premier champ du formulaire est un champ Texte avec l'étiquette « Nom », donc le Rule Builder affichera la condition'Name' 'is present' .
4. Cliquez maintenant sur le bouton Ajouter une action et remarquez que plusieurs listes de sélection apparaissent. La première liste montre l'action à effectuer (Pour cet exemple, laisser 'Afficher') ; le deuxième montre le type de résultat (pour cet exemple, laissez 'Champ') et le troisième, le premier libellé du champ : 'Nom'. Pour cet exemple, vous le remplacerez par « Soumettre » (le texte « Soumettre » fait référence au bouton).
5. Enfin, en haut à droite de cette règle, vous verrez un petit avertissement orange « Modifications non enregistrées » et ensuite un bouton vert avec l'icône de vérification. Cliquez sur ce bouton pour enregistrer cette règle. L'avertissement disparaîtra.

Vous avez créé votre première règle.

Si vous voyez votre formulaire, vous remarquerez que le bouton a disparu, mais si vous saisissez un texte dans le champ 'Nom', le bouton apparaît.

Vous devez être conscient que certaines règles sont respectées de manière bidirectionnelle ; c'est-à-dire que si la condition est remplie, l'action sera exécutée. Mais, si la condition n'est pas remplie, l'action inverse sera exécutée (Afficher <=> Masquer, Activer <=> Désactiver, Math <=> Réinitialiser à O).

Vous pouvez ajouter des règles supplémentaires en cliquant sur le bouton « Ajouter une règle », mais celles-ci ne seront enregistrées que lorsque vous appuierez sur le bouton vert. N'oubliez pas que chaque règle sera stockée séparément.

Remarque : Pour supprimer une règle , cliquez sur le bouton rouge avec l'icône Corbeille. De plus, si vous souhaitez arrêter l'exécution d'une règle pendant un certain temps, vous pouvez la désactiver puis l'activer lorsque vous en avez besoin.

Anatomie des règles

Une règle conditionnelle est composée de trois parties : Nom/Description, Conditions et Actions.

Nom/Description

La première partie nous permet de décrire la logique conditionnelle. Utilisez simplement quelques mots pour nommer ou décrire ce que vous souhaitez réaliser avec cette règle. (Facultatif. Longueur maximale : 255)

Conditions

C'est la deuxième partie d'une règle, elle se trouve au début et vous permet de spécifier le ou les champs qui doivent être évalués, ainsi que le type d'évaluation.

• Type de condition : Le type de condition indique combien de conditions doivent être remplies pour exécuter l'action. Cela peut être : Tout, Tout ou Aucun. La valeur par défaut est Tout.
• Condition: La déclaration fait-elle référence à un champ de formulaire et doit-elle être remplie. Il se compose de 3 parties.
  • Nom : Le nom du champ du formulaire sur lequel est basée la condition.
  • Opérateur : opérateur de comparaison utilisé pour évaluer la condition.
  • Valeur : Il s'agit d'une valeur arbitraire que l'utilisateur doit saisir dans le formulaire. La manière dont les valeurs seront définies va varier en fonction du type de champ et du type d'opérateur.
• Conditions multiples : Vous pouvez ajouter plusieurs conditions à une règle. Le type de condition indiquera si tout doit être rempli (ET), le cas échéant (OU) ou aucun.
• Groupe de conditions : En plus des conditions, une règle peut contenir un groupe de conditions. Un groupe de conditions diffère d'une condition qui permet de changer le type de condition. Ainsi, une règle peut être de type All (AND), mais le groupe peut être de type Any (OR).
• Processus d'évaluation : Le processus d'évaluation des conditions est descendant. C'est-à-dire que les conditions du début seront évaluées avant celles de la fin, par ordre décroissant.

Remarque : Les conditions " Appartient à " et " N'appartient pas à " peuvent analyser plusieurs valeurs séparées par " | ", cela vous permet de comparer la valeur du champ avec plusieurs valeurs, si l'une d'entre elles correspond, l'action sera exécutée.

Actes

La dernière partie d'une règle indique l'action à effectuer si les conditions sont remplies. En tant que conditions, les actions ont un moyen déclaratif simple à comprendre.

Une action se compose essentiellement de trois parties :

• Type d'action:
  • Afficher/Masquer
  • Activer / Désactiver
  • Copier : vous permet de copier la valeur d'un champ ou d'un autre élément ou d'une valeur statique et de la coller automatiquement dans un autre champ. Un bon exemple de cas où cela est utile est celui d'un formulaire dans lequel vous pourriez collecter une adresse d'expédition et de facturation. L'utilisateur final peut saisir son adresse de livraison et cocher l'option Copier pour remplir automatiquement les champs d'adresse de facturation avec les mêmes données. Un autre cas d'utilisation courant consiste à utiliser une valeur statique vide pour effacer un champ en utilisant une logique conditionnelle.
  • Math : Permet l'addition/soustraction/multiplication/division/reste de champs et d'afficher le résultat dans un autre champ ou élément HTML.
  • Évaluer : Permet d'évaluer des expressions mathématiques (formules) et de définir le résultat dans un autre champ. Il est également compatible avec les calculs de dates. Par exemple, si vous souhaitez calculer la multiplication de deux champs et diviser cette valeur par 10, vous utilisez la formule suivante :{{number_1}} * {{number_2}} / 100 . Veuillez prendre en compte que l'évaluation des expressions mathématiques ne fonctionne pas avec des actions opposées. Vous pouvez lire la liste complète des calculs avancés pris en charge par Rule Builder grâce aux excellentes bibliothèques Math.js et date-fns
  • Format de nombre : Permet de formater un nombre de différentes manières et sans aucun codage. Par exemple, pour donner le format monétaire à un nombre : 10 130,25, utilisez le format suivant « 0,0,00 $ » et le nombre sera désormais affiché sous la forme 10 130,25 $. De plus, par défaut, le format prendra les paramètres régionaux de la langue que vous avez sélectionnée dans la configuration de votre formulaire, donc par exemple, si la langue de notre formulaire est l'allemand, vous obtiendrez : 10 130,25 €. Vous pouvez lire la liste complète des formats pris en charge par Rule Builder grâce à l'excellente bibliothèque Numeral.js .
  • Format de texte : vous permet de sélectionner plusieurs champs pour créer une nouvelle chaîne de texte formatée et définir le résultat dans un autre champ ou élément HTML. Par exemple. Pour générer automatiquement une adresse e-mail, sélectionnez un champ Nom et saisissez le format suivant {{0}} @example.com, puis sélectionnez le champ E-mail où l'adresse e-mail sera affichée. Vous pouvez utiliser des jetons numériques pour identifier la position du champ dans la liste des champs, ou vous pouvez utiliser l'ID de champ ou l'alias de champ, dans notre exemple : {0}@example.com ou {{text_1234}} @example.com ou {{name}} @example.com devrait fonctionner.
  • Sauter : Permet de définir à quelle page aller lorsque l'on passe à la page suivante. Cette action ne doit être utilisée que dans un formulaire en plusieurs étapes.
  • Formulaire: Permet de définir des actions liées au formulaire :
    • « Soumettre » : pour soumettre le formulaire.
    • 'Réinitialiser' : Pour réinitialiser le formulaire.
    • « Page suivante » : pour passer à la page suivante.
    • 'Page précédente' : Pour aller à la page précédente.
• Cible: Variera en fonction du type d'action. Il peut être de deux types :
  • Champ
  • Élément
• Nom:
  • Si la cible est Field, ce sera le nom du champ.
  • Si la cible est Element, elle fera partie de plusieurs éléments HTML sélectionnés par jQuery. Par exemple:
    • '#abc' : La cible est l'élément HTML avec 'abc' comme ID.
    • '.abc' : la cible est constituée de tous les éléments HTML avec 'abc' comme classe CSS.
• Actions opposées : Par défaut, les actions opposées ont été activées car elles facilitent la création de règles conditionnelles communes et les rendent plus logiques. Par exemple, si après avoir rempli une condition, je souhaite afficher un champ, alors clairement, en ne remplissant pas la condition, je souhaite garder ce champ masqué. Cependant, il arrive parfois que la désactivation d’actions opposées puisse s’avérer utile. Lorsque cela se produit, seule l'action décrite dans la règle sera exécutée.

Notez que l’utilisation d’éléments nécessite une connaissance de base de jQuery, mais offre de gros avantages. Par exemple, vous pouvez créer une action pour masquer tous les champs du formulaire ;'Hide' 'Element' '.form-group' .

Remarque : Vous pouvez identifier l'ID et la classe CSS des champs du formulaire à l'aide de l'onglet Code du Form Builder .

Validation conditionnelle

Vous pouvez omettre une validation de champ obligatoire en utilisant des règles conditionnelles de deux manières :

1. Lorsque le champ est masqué.
2. Lorsque le champ appartient à une page qui a été ignorée.

Par exemple, si un champ est créé avec le Form Builder et que dans les règles conditionnelles il est défini que ce champ ne doit être affiché que si un autre champ remplit une condition et que la condition n'est pas remplie, alors le premier champ ne sera plus requis (sera ne pas être validé par le serveur).

Remarque : Pour utiliser la validation conditionnelle, la validation côté client doit être désactivée. (Voir Paramètres du formulaire -> Pas de validation) )