Masquer ou afficher des Champs grâce aux Conditions de Visibilité
  • 27 Oct 2023
  • 5 Minutes à lire
  • Sombre
    Clair

Masquer ou afficher des Champs grâce aux Conditions de Visibilité

  • Sombre
    Clair

Article Summary

Les Conditions de Visibilité facilitent votre travail en évitant toute saisie inutile. Elles vous permettent d’adapter votre formulaire en fonction de la situation rencontrée, et donc, de l’alléger. Vous gagnez du temps et l’expérience utilisateur est fluidifiée.


Cas concret

  • Vous êtes chauffagiste et faites des interventions à domicile pour installer, réparer ou remplacer différents systèmes de chauffage.
  • Vous saisissez toutes les informations nécessaires dans votre formulaire : coordonnées du client, type de prestation, type de chaudière, etc…
  • Vous avez choisi de remplir votre formulaire Kizeo Forms en fonction du type de prestation à effectuer chez votre client : une nouvelle installation, une réparation ou un remplacement de la chaudière.
  • En utilisant l’option de Visibilité, vous afficherez des champs spécifiques à remplir en fonction de la prestation effectuée ou du profil de votre utilisateur.

Vous pourrez donc :

Ajouter une condition de visibilité simple, par exemple :
SI vous sélectionnez "Nouvelle installation" dans la liste type de prestation, ALORS vous verrez les champs dédiés à la première installation d’une chaudière (les autres propositions concernant la réparation ou le remplacement seront "cachées").
SI votre utilisateur est manager, ALORS le champ signature apparaitra.

Ajouter plusieurs conditions de visibilité, par exemple :
SI vous sélectionnez "Nouvelle installation" OU "Remplacement de la chaudière", ALORS vous verrez les champs dédiés à la facturation.
SI vous sélectionnez "Nouvelle installation" ET cochez la case "Devis validé par le client", ALORS vous verrez les champs Signatures apparaître.

1. Création d’un formulaire

  • Rendez-vous sur l'Interface Web Kizeo Forms.
  • Allez dans [Configuration] puis [Créer un formulaire] ou [Modifier un formulaire].
  • Insérez les premiers champs nécessaires (exemples : nom, prénom, adresse du client…).
  • Insérez votre liste.

Dans notre exemple, notre liste est intitulée "Type de prestation" et comporte les choix suivants : Nouvelle installation (nouveau client), Nouvelle installation, Réparation (nouveau client), Réparation, Remplacement (nouveau client) et Remplacement.

Créez votre liste d'intervention

Insérez dans ce même formulaire TOUS les champs de saisie que vous aurez à renseigner pour les 3 types de prestations.


Informations pratiques
Afin de faciliter la lecture, vous pouvez insérer des séparateurs.


Création du formulaire exemples des séparateurs

2. L’option de Visibilité

Parmi les éléments qui constituent votre formulaire, certains sont spécifiques à chaque type de prestation.

  • Cliquez sur le crayon du champ à conditionner.
  • Allez dans l’onglet [Visibilité].

Informations importantes : 

  • Ces options de visibilité sont disponibles pour tous les types de champs (Champ de texte, Date, Adresse, etc…).
  • En cas d’utilisation d’options de visibilité sur des Séparateurs, l’ensemble des champs présents dans ce dernier auront la même option de Visibilité.

Rendre visible un ou plusieurs champs en fonction d’une condition de visibilité

Supposons que nous voulions conditionner la visibilité des champs contenus dans le séparateur "Première installation d’une chaudière" en fonction de l’élément "Nouvelle installation" de la liste "Type de prestation".

Allez dans les options du séparateur, onglet [Visibilité].

Choisissez :

  • = : Si Type de prestation est strictement égal à Nouvelle installation, alors le champ de saisie sera visible.
  • : Si Type d’installation est strictement différent de Nouvelle installation (par exemple Réparation ou Remplacement) alors le champ de saisie sera visible.
  • Parmi les valeurs suivantes : Si Nouvelle installation ET/OU Nouvelle installation (nouveau client) sont sélectionnées dans type de prestation, alors le champ de saisie sera visible.
  • Parmi aucune des valeurs suivantes : Si Nouvelle installation ET/OU Nouvelle installation (nouveau client) ne sont pas sélectionnées dans type de prestation, alors le champ de saisie sera visible.
  • Contient : Si Type de prestation contient le mot installation (par exemple nouvelle installation ET/OU nouvelle installation (nouveau client) sont sélectionnés) alors le champ de saisie sera visible.
  • Ne contient pas : Si Type de prestation ne contient pas le mot installation, alors le champ de saisie sera visible.

Paramétrer les options de visibilité

Nous supposons maintenant que le nombre d’installations correspond à un Slider allant de 1 à 10. Nous souhaitons obtenir la visibilité d’un champ de saisie par exemple, lorsque l’on conditionne la visibilité avec le chiffre 5.

Choisissez :

  • : lorsque Nombre d’installations est strictement égal à 5 alors le champ de saisie est visible.
  • ≠ : lorsque Nombre d’installations est strictement différent de 5 alors le champ de saisie est visible.
  • < : lorsque nombre d’installations est inférieur à 5 alors le champ de saisie est visible.
  • ≤ : lorsque nombre d’installations est inférieur ou égal à 5 alors le champ de saisie est visible.
  • > : lorsque nombre d’installations est supérieur à 5 alors le champ de saisie est visible.
  • ≥ : lorsque nombre d’installations est supérieur ou égal à 5 alors le champ de saisie est visible.
  • Compris entre : lorsque nombre d’installations se situe entre 1 et 5 alors le champ de saisie est visible.
  • Non compris entre : lorsque nombre d’installations nese situe pas entre 1 et 5 alors le champ de saisie est visible.
Informations pratiques
  • Il est aussi possible de conditionner la visibilité avec un champ vide. Si une information est saisie dans ce champ, alors l’élément n’apparaîtra pas.
  • Vous pouvez conditionner la visibilité d’un champ en fonction d’un champ signature signé ou non.

Ici, SI le champ signature Client est signé, alors le champ signature Technicien sera visible.

Condition visibilite champ signature

Rendre visible un ou plusieurs champs en fonction de plusieurs conditions de visibilité

  • Toutes les conditions doivent être vérifiées :

Pour se faire, vous devez configurer vos conditions de visibilité et cocher la case "Toutes les conditions doivent être vérifiées".

Dans notre exemple, le champ de saisie sera visible SI Type de prestation est strictement égal à Nouvelle installation (nouveau client) ET SI la case à cocher Devis validé par le client est cochée.

Paramétrer plusieurs options de visibilité qui doivent être vérifiées.

  • Au moins une condition doit être vérifiée :

Configurez vos conditions de visibilité et cochez la case "Au moins une condition doit être vérifiée".

Par exemple, le champ de saisie sera visible SI Type de prestation est égal à Nouvelle installation (nouveau client) ET/OU SI Type de prestation est égal à Nouvelle installation.

Paramétrer plusieurs options de visibilité qui ne doivent pas être vérifiées.

  • N’oubliez pas d’enregistrer.

Rendre visible un élément en fonction du profil d'un utilisateur

Comme expliqué dans notre introduction, seul le manager peut valider la commande à l’aide d’une signature. Les autres utilisateurs ne devraient donc pas voir cet élément. Pour cela, il faut rendre visible un élément en fonction du profil d’un utilisateur.

Les Champs Utilisateurs Personnalisés

Vous devez dans un premier temps paramétrer vos Champ Utilisateur Personnalisé et modifier le profil de votre manager.

📖 En savoir plus sur les Champs Utilisateurs Personnalisés.

Paramétrage des champs utilisateurs personnalisés

Configuration de la visibilité des éléments

  • Rendez-vous ensuite sur votre formulaire et configurez vos conditions de visibilité en fonction de cette nouvelle information.
  • Ici, nous ajoutons à notre Champ Signature : Visible si "Statut = Manager".

configurez vos conditions de visibilité en fonction de cette nouvelle information

  • Dorénavant, seul la personne ayant le statut de manager pourra voir le Champ Signature.
  • N’oubliez pas d’enregistrer. 

Rendre un champ toujours caché 

  • Cochez la case [Champ toujours caché].

champ toujours caché

  • Dorénavant, le Champ ne sera plus visible sur l’appareil mobile.
  • N’oubliez pas d’enregistrer votre travail.

Cet article vous a-t-il été utile ?