Afficher ou masquer des éléments grâce aux règles de visibilité

Nombreux sont ceux désirant afficher ou masquer des champs ou sections à la demande ou selon la situation.
Niveau : Moyen
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4/5 : ✅

Dans ce tutoriel, vous apprendrez à ajouter des conditions aux champs ou sections de votre formulaire afin de les afficher ou masquer selon ces conditions.

Les nominations des options dépendront de votre fichier de langue installé (français) et peuvent être différentes de celles renseignées dans ce tutoriel !

Sommaire :

1. Création d'un formulaire simple
2. S'approfondir dans les règles de visibilité
3. Éléments utilisables
4. Règles spéciales

1 - Création du formulaire simple

Attention : À chaque modification d'un élément dans un formulaire, n'oubliez pas de cliquer "Enregistrer les propriétés" sous peine de perdre les modifications lors de la sélection d'un autre élément.

Rendez-vous dans la gestion des formulaires et commencez par la création d'un formulaire simple. Titrez-le "Conditions" et nommez-le "conditions" pour votre test. (le nom et le titre du formulaire importent peu, accordons-nous seulement pour le tutoriel).

Ajoutez-y une page et dans cette page, deux éléments dont un groupe de boutons radio nommé et étiqueté "switcher" et un champ de texte nommé et étiqueté "mytextfield".

Vous allez maintenant masquer le champ de texte, dans la partie gauche (arborescence des éléments) cliquer sur le champ de texte et passez dans ses options avancées. Cochez l'option "Section non visible en frontend".
Cliquez sur "Enregistrer les propriétés". Vous venez de masquer cet élément de formulaire.

Cliquez maintenant sur le groupe de boutons radio "switcher". Dans l'intitulé "Groupe" remplacer la valeur par défaut par :

0;Afficher;on
1;Masquer;off

"Afficher" et "Masquer" seront les intitulés des boutons, "on" et "off", leurs valeurs.
Le préfixe "1" signifie que lors du chargement du formulaire, c'est l'option qui sera cochée par défaut. Si les deux options sont à 0, aucun bouton n'est coché par défaut.

Sélectionnez maintenant le formulaire dans la partie gauche et passez par l'onglet "Avancé". Dans le bas de la page se trouve une zone de texte intitulée "Règles de visibilité". C'est lui qui recevra vos règles…

Dans cette zone de texte, insérez la règle suivante : turn on element mytextfield if switcher is on

Enregistrez la propriété puis enregistrez le formulaire. Cliquer sur le bouton de prévisualisation. Le champ de texte doit être masqué et le bouton radio "Masquer" est sélectionné. Cliquer le bouton "Afficher" pour voir apparaître le champ de texte.

Ça fonctionne ? Félicitations, vous venez de créer votre première condition d'affichage d'un élément suite à une action sur un autre élément.

Vous allez maintenant compléter en ajoutant la possibilité de remasquer le champ en cliquant le bouton "Masquer", puisqu'à cette étape, le bouton masquer est inopérant.

Revenez dans le menu "Avancé" du formulaire et ajoutez une règle de visibilité au clic sur "Masquer" comme suit :
turn off element mytextfield if switcher is off

Si vous refaites le test, vous verrez que l'action sur les deux boutons est désormais effective et fonctionnelle.

2 - S'approfondir dans les règles de visibilité

Les règles de visibilité, bien qu'écrites en anglais, ont une syntaxe assez facile à retenir, écrites dans un langage "naturel", cette syntaxe n'est pas un langage de programmation.
Même si l'ordre des règles n'a pas d'incidence sur le fonctionnement, il est recommandé de placer la règle de masquage avant celle d'affichage.

La syntaxe de toute règle se construit comme suit :

turn [on|off] [element|section] *target element or section name* if *source element name* is/isnot *value or command*

Chaque partie de la règle ne peut être séparée de plus d'une espace. La règle, écrite comme ci-après, serait invalide et inopérante :

turn off      element destination      if source      is     valeur

Note : Si une règle ne fonctionne pas, une mauvaise syntaxe de la règle sera souvent en cause. Une mauvaise saisie d'un nom d'élément peut aussi en être la cause !

Affichage / masquage de plusieurs champs en une opération

Il est également possible d'afficher ou masquer plusieurs champs en une seule opération sur un élément tiers. il faut alors soit

1. Placer les éléments concernés dans une section et écrire la règle pour afficher cette section ou
2. Séparer les éléments par une virgule :

   turn on element elem1,elem2,elem3 if checkbox is !checked

La règle ci-dessus affichera les éléments nommés elem1, elem2 et elem3 lorsque la case à cocher "checkbox" sera cochée.

3 - Les éléments pouvant être utilisés comme source

Vous pouvez utiliser les éléments suivants pour déclencher vos règles.

Groupe de boutons radio

Exemple :

turn on element monTexte if monGroupeRadio is valeurGroupe

Si une ou plusieurs règles de visibilité utilisent le même groupe de boutons radio que leurs éléments dépendants, chaque fois que la valeur du groupe de boutons radio change, les règles de visibilité sont relancées et vérifiées. Si une ou plusieurs règles correspondent ou utilisent la même valeur, toutes les règles seront appliquées et exécutées.

Case à cocher

Exemple :

turn on element monTexte if maCheckbox is !checked
 
turn off element monTexte if maCheckbox is !unchecked

L'élément de type case à cocher est spécial, sa valeur ne peut être reconnue que si un point d'exclamation (!) se trouve devant cette valeur. Cela signifie que l'élément monTexte sera affiché si la case à cocher est activée sa valeur devient alors "!checked". De la même manière, la règle inverse devra être appliquée si la case à cocher est désactivée, elle devient alors "!unchecked".

Groupe de cases à cocher

Exemple :

turn on element monTexte if monGroupeCheckbox is ValeurSouhaitee
 
turn off element monTexte if monGroupeCheckbox is !unchecked

Les groupes de cases à cocher se comportent de la même manière que la case individuelle. Pour être précis, c'est un mélange du groupe radio et de la simple case à cocher. Veuillez noter que les liens logiques AND et OU ne sont pas applicables aux groupes de cases à cocher. Si vous essayez d'appliquer une logique qui interroge la valeur de plusieurs cases à cocher, vous devez utiliser une règle par case cochée. Voici des exemples où les règles appliquent des instructions en fonction des valeurs des cases à cocher.

turn on element monTexte if monGroupeRadio is valeurSouhaitee
 
turn on element monTexte if monGroupeRadio is autreValeur
 
turn on element monTexte if monGroupeRadio is autreValeur2
 
turn off element monTexte if monGroupeRadio is !unchecked

Liste déroulante de sélection (simple et avec plusieurs possibilités)

Exemple :

turn on element monTexte if maListe is valeurSouhaitee
 
turn on element monTexte if maListe is #valeurSouhaitée|autreValeur
 
turn on element monTexte if maListe is #valeurSouhaitée;autreValeur

La liste de sélection est capable de différencier les valeurs et d'appliquer les règles en conséquence.
Elle supporte le test logique "OU" - #nouvelleValeur|autreValeur -  le caractère séparateur étant le pipe ( | ). L'une des valeurs renseignées doit être activée pour valider la règle
En outre la liste supporte également le test logique "ET" - #nouvelleValeur;autreValeur - le caractère séparateur étant le point virgule ( ; ). Toutes les valeurs saisies dans la règle doivent être sélectionnées pour la valider.

Champs de texte / Zone de texte

Exemple :

turn on element monElement if monChampTexte is ValeurSouhaitee
turn on element monElement if monChampTexte is !ValeurSouhaitee
turn on element monElement if monChampTexte is ![0-9]$

La règle peut être déclenchée uniquement si le champ de texte contient exactement le texte souhaité (ex. 1 ci-dessus)
mais aussi et si le texte souhaité, précédé d'un point d'exclamation ( ! ) est partie du texte inséré (ex. 2 ci-dessus).
Une expression régulière peut également être utilisée. Dans l'exemple 3 ci-dessus, le champ (zone) de texte devrait se terminer par un ou plusieurs chiffres pour être validé.
La règle ne sera appliquée qu'à la sortie du champ de texte devant remplir la condition.

4 - Règles de visibilité spéciales

Remarque : Il est également possible d'affecter des valeurs à des éléments selon qu'un autre élément est visible ou non.

La syntaxe est :

if element NOMDELEMENT is off set ELEMENTCIBLE VALEUR
 
if section NOMDESECTION is on set ELEMENTCIBLE VALEUR

Pour vider un élément de sa valeur, la syntaxe est la suivante :

if element NomDElementN is off set NomDElementN !empty

Ces dernières règles, basées sur l'état d'un élément ou d'une section visible ou invisible, doivent toujours être placées après les règles de visibilité régulières.
Elles peuvent s'appliquer aux éléments précédemment définis. Ils fonctionnent donc également avec les listes, les boutons radio, les (groupes de) cases à cocher. Il suffit de saisir la valeur souhaitée pour (dé)sélectionner ces éléments.

Dans le cas où vous souhaitez utiliser les fonctions "is" et "isnot" dans des règles d'affichage masquage d'un élément, il est INDISPENSABLE de débuter par la règle qui contiendra la fonction négative.

Ce qui suit fonctionnera :

turn off section nomDeSection if element isnot Valeur
turn on section nomDeSection if element is Valeur

Ce qui suit ne fonctionnera pas :

turn on section nomDeSection if element is Valeur
turn off section nomDeSection if element isnot Valeur