Overview
Ce guide explique comment configurer des événements de champs personnalisés dans ChronoForms 8 en utilisant les Déclencheurs et Écouteurs. Il détaille un exemple pratique consistant à masquer une zone de texte au chargement de la page et à l'afficher lorsqu'une option radio spécifique est sélectionnée. Les instructions étape par étape couvrent la création de déclencheurs pour les événements de chargement de page et de changement de valeur, puis la configuration des écouteurs pour masquer ou afficher la zone de texte en conséquence.
Parfois, vous devez afficher/masquer/désactiver/activer des champs ou des sections de votre formulaire en fonction des valeurs d'autres champs du formulaire. Voici comment utiliser les comportements Déclencheurs et Écouteurs pour configurer des événements de champs personnalisés dans Chronoforms8.
Dans notre exemple, nous voulons masquer une zone de texte par défaut lorsque le formulaire est chargé, et l'afficher si l'utilisateur choisit la 2ème option d'un champ radio. Pour cela, nous constatons que nous avons 2 événements :
- Chargement de la page, ce sera le premier événement déclencheur
- Changement de valeur du champ radio, ce sera le 2ème déclencheur
Créons notre premier déclencheur, voici les étapes :
- Ouvrez le menu déroulant des comportements dans les paramètres de votre zone de texte
- Activez les "Déclencheurs d'événements"
- Ajoutez un nouveau déclencheur
- Assurez-vous qu'il est défini sur "Document Prêt", cet événement est déclenché chaque fois que la page est chargée
- Entrez un nom de déclencheur, dans ce cas nous choisissons "hide_textarea"
Maintenant, un déclencheur nommé "hide_textarea" sera déclenché lorsque la page est chargée.
Ensuite, nous devons configurer la zone de texte pour qu'elle se masque lorsque ce déclencheur est activé, voici comment procéder :
- Activez les "Écouteurs d'événements" sous les comportements.
- Cliquez sur Ajouter un écouteur
- Définissez le "Sur déclenchement de" sur le nom du déclencheur auquel nous voulons écouter, dans ce cas "hide_textarea"
- Définissez l'"Action à effectuer" sur masquer
Puisque notre écouteur est dans la zone de texte, cela masquera la zone de texte lorsque le déclencheur s'exécute, mais nous pourrions également écouter ce déclencheur sur n'importe quel autre champ.
Maintenant, nous devons configurer un nouveau déclencheur à déclencher lorsque la valeur de notre champ radio est définie sur la 2ème option, voici comment procéder :
- Ouvrez les paramètres du champ Radio et activez le comportement "Déclencheurs d'événements"
- Ajoutez un nouveau déclencheur
- Définissez le "Sur" sur "Valeur dans"
- Définissez les valeurs sur "ck2" qui est la 2ème option du champ radio, nous voulons que le déclencheur se déclenche lorsque cette option est sélectionnée
- Donnons à notre déclencheur le nom "show_textarea"
Maintenant, nous avons un nouveau déclencheur nommé "show_textarea" qui sera déclenché lorsque notre 2ème option radio est sélectionnée.
Nous avons juste besoin d'écouter ce nouveau déclencheur dans notre zone de texte pour afficher la zone de texte lorsqu'il est déclenché.
Revenons donc aux paramètres de notre zone de texte, nous devons ajouter un nouvel écouteur :
- Nous ajoutons un nouvel écouteur
- Nous définissons le nom du déclencheur sur "show_textarea"
- Nous définissons l'"Action" sur "afficher"
Maintenant, notre zone de texte sera affichée une fois que la 2ème option du champ radio est sélectionnée.
Comments:
How can I hide and show a container instead of a text area? The container doesn't have triggers, and I need to hide it when the form loads
Hi
You use another element's trigger and hide the container using a Listener in the container itself