Componentes condicionales

The Conditional tab in the Form Designer allows you to place conditions on components in your form, in order to hide or display them.

La pestaña Condicional tiene dos secciones:

• Simple
• Condiciones avanzadas

Condiciones simples

La sección Simple de la pestaña Condicional te permite ocultar o mostrar un componente en función del valor de otro componente.

La sección Simple consta de tres campos:

1. This component should Display - from this dropdown list, choose:

   • True if you want to condition when the component displays.
   • False if you want to condition when the component hides.

2. When the form component - from this dropdown list, choose a component in the form to act as a condition.

3. Has the value - type in the value that conditions the component when to display or hide.

   

Condiciones avanzadas

La sección Condiciones avanzadas le permite usar código JavaScript para hacer combinaciones de condiciones.

La lógica avanzada anula los resultados de la lógica condicional simple.

En la sección Código JavaScript, introduce un código JavaScript personalizado.

The show variable must be given a true or false value. The data variable is used to access other components in the form, through the API key.

Tutorial

Condiciones simples

Para configurar una lógica de condición simple:

1. Open the Form Designer in the Create Form activity.
2. Arrastre y suelte componentes en su formulario. Para este ejemplo, arrastre y suelte lo siguiente:
   1. Dos componentes Checkbox .
   2. Componente de un número .
   3. Un componente de campo de texto . Presta atención a las claves de campo de cada componente. Los necesitas para crear tu lógica condicional.
3. Navigate to the Conditional tab of the Text Field component and go to the Simple section.
   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 quieres ocultar el componente, elige 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.
4. Guarde el componente.

Condiciones avanzadas

Para configurar una lógica de condición avanzada:

1. Open the Form Designer in the Create Form activity.

2. Arrastre y suelte componentes en su formulario. Para este ejemplo, arrastre y suelte lo siguiente:

   1. Dos componentes Checkbox .
   2. Componente de un número .
   3. Un componente de campo de texto . Presta atención a las claves de campo de cada componente. Los necesitas para crear tu lógica condicional.

3. Navigate to the Conditional tab of the Number component.

4. Click Advanced Conditions and go to the JavaScript section.

5. Si quieres crear una condición, utiliza la variable show y asígnale una condición utilizando el signo igual = . Utiliza la variable data.field_key_component para acceder a los datos de otros componentes del formulario. Para este ejemplo, para mostrar el componente Número , puedes escribir este 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.

6. For this example, to hide the Number component, you can type in this script:

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

7. Guarde el componente.

Flujo de trabajo de muestra

Para comprobar el flujo de trabajo completo o para tener una referencia futura, descarga el ejemplo XAML