Overview
Esta guía explica cómo configurar eventos personalizados de campos en ChronoForms 8 usando Disparadores y Oyentes. Recorre un ejemplo práctico de ocultar un área de texto al cargar la página y mostrarla cuando se selecciona una opción de radio específica. Las instrucciones paso a paso cubren la creación de disparadores para eventos de carga de página y cambio de valor, y luego configurar oyentes para ocultar o mostrar el área de texto en consecuencia.
A veces necesitas mostrar/ocultar/deshabilitar/habilitar campos o secciones de tu formulario basándote en los valores de otros campos del formulario, aquí te mostramos cómo usar los comportamientos de Disparadores y Oyentes para configurar eventos personalizados de campos en Chronoforms8
En nuestro ejemplo, queremos ocultar un área de texto por defecto cuando se carga el formulario, y mostrarla si el usuario elige la 2da opción en un campo de radio, para esto encontramos que tenemos 2 eventos:
- Carga de Página, este será el primer evento disparador
- Cambio de Valor del campo de radio, este será el 2do disparador
Vamos a crear nuestro primer disparador, aquí están los pasos:
- Abre el menú desplegable de comportamientos en la configuración de tu área de texto
- Habilita los "Disparadores de Eventos"
- Añade un nuevo disparador
- Asegúrate de que esté configurado como "Documento Listo", este evento se activa cada vez que se carga la página
- Introduce un nombre para el disparador, en este caso elegimos "ocultar_area_texto"
Ahora un disparador llamado "ocultar_area_texto" se activará cuando la página se cargue.
Luego necesitamos configurar el área de texto para que se oculte cuando ese disparador se active, aquí te mostramos cómo hacerlo:
- Habilita "Oyentes de Eventos" en comportamientos.
- Haz clic en Añadir Oyente
- Configura el "Al disparar de" al nombre del disparador al que queremos escuchar, en este caso "ocultar_area_texto"
- Configura la "Acción a realizar" a ocultar
Dado que nuestro oyente está en el área de texto, esto ocultará el área de texto cuando el disparador se ejecute, pero también podríamos escuchar este disparador en cualquier otro campo.
Ahora necesitamos configurar un nuevo disparador para que se active cuando el valor de nuestro campo de radio se establezca en la 2da opción, aquí te mostramos cómo hacerlo:
- Abre la configuración del campo de Radio y habilita el comportamiento "Disparadores de Eventos"
- Añade un nuevo disparador
- Configura el "En" a "Valor en"
- Configura los valores a "ck2" que es la 2da opción del campo de radio, queremos que el disparador se active cuando esta opción sea seleccionada
- Demos a nuestro disparador el nombre "mostrar_area_texto"
Ahora tenemos un nuevo disparador llamado "mostrar_area_texto" y este se activará cuando nuestra 2da opción de radio sea seleccionada
Solo necesitamos escuchar este nuevo disparador en nuestro área de texto para mostrar el área de texto cuando se active.
Así que volvemos a la configuración de nuestro área de texto, necesitamos añadir un nuevo oyente:
- Añadimos un nuevo oyente
- Configuramos el nombre del disparador a "mostrar_area_texto"
- Configuramos la "Acción" a "mostrar"
Ahora nuestro área de texto se mostrará una vez que la 2da opción del campo de radio sea seleccionada
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