Componentes condicionales

Para hacer que tus formularios sean dinámicos, puedes utilizar la pestaña Condicional de un componente de formulario. Allí puedes aplicar condiciones, que se muestran en tiempo de ejecución. Puedes aplicar dos tipos de condiciones:

• Condiciones simples
• Condiciones avanzadas

Condiciones simples

Este tutorial muestra cómo crear condiciones simples en un componente de formulario.

1. Abre tu archivo de formulario en Studio y añade componentes a tu formulario. Para este ejemplo, añade los siguientes componentes:

   • Dos casillas de verificación.
   • Un solo número.
   • Un único campo de texto.

2. Ve a la pestaña Condicional del componente Campo de texto y ve a la sección Simple .

   1. Este componente debe Mostrar: elige Verdadero en la lista desplegable. Esto crea la condición bajo la cual se muestra el componente Campo de texto. Si desea ocultar el componente, elija Falso
   2. Cuando el componente del formulario : elige el componente Número de la lista desplegable.
   3. Tiene el valor : escribe el valor del componente Número que condiciona el campo de texto a mostrar.

   

3. Guarde el componente.

Para ver cómo se comporta la condición simple, mire el siguiente vídeo:

Condiciones avanzadas

Este tutorial muestra cómo crear condiciones avanzadas en un componente de formulario.

Importante:

Las condiciones avanzadas anulan las condiciones simples.

1. Abre tu archivo de formulario en Studio y añade componentes a tu formulario. Puedes utilizar el mismo archivo de formulario que utilizaste para probar las condiciones simples. Para este ejemplo, añade los siguientes componentes:

   • Dos casillas de verificación.
   • Un número.
   • Un único campo de texto.

2. Ve a la pestaña Condicional del componente Número .

3. Haz clic en Condiciones avanzadas y ve a la sección JavaScript .

4. Si quieres mostrar la condición en tiempo de ejecución, inicia tu condición con la variable booleana show . Utiliza la variable data y el Nombre de la propiedad para acceder a los datos de otros componentes del formulario.

   Para este ejemplo, para mostrar el componente Número , puedes escribir el siguiente script:

   show = (data.checkbox1 === true && data.checkbox === true)
   

Si desea ocultar un componente bajo una condición, ponga un signo de exclamación ! después del signo de igual = y antes de la condición.

Para ver cómo se comporta la condición avanzada, mire el siguiente vídeo: