Componentes condicionais

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

A guia Condicional tem duas seções:

• Simple
• Condições Avançadas

Condições simples

A seção Simples da guia Condicional permite ocultar ou exibir um componente com base no valor de outro componente.

A seção Simples consiste em três 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.

   

Condições Avançadas

A seção Condições Avançadas permite que você use o código JavaScript para fazer combinações de condições.

A lógica avançada substitui os resultados da lógica condicional simples.

Na seção Código JavaScript, insira um 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

Condições simples

Para configurar uma lógica de condição simples:

1. Open the Form Designer in the Create Form activity.
2. Arraste e solte componentes em seu formulário. Para este exemplo, arraste e solte o seguinte:
   1. Dois componentes do Checkbox .
   2. Um componente de número .
   3. Um componente Campo de texto . Preste atenção às chaves de campo de cada componente. Você precisa deles para criar sua lógica condicional.
3. Navigate to the Conditional tab of the Text Field component and go to the Simple section.
   1. Este componente deve Exibir - escolha Verdadeiro na lista suspensa. Isso cria a condição para exibir o componente Campo de texto. Se você quiser ocultar o componente, escolha False.
   2. Quando o componente de formulário : escolha o componente de Número na lista suspensa.
   3. Tem o valor — digite o valor do componente Número que condiciona o Campo de Texto a ser exibido.
4. Salve o componente.

Condições Avançadas

Para configurar uma lógica de condição avançada:

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

2. Arraste e solte componentes em seu formulário. Para este exemplo, arraste e solte o seguinte:

   1. Dois componentes do Checkbox .
   2. Um componente de número .
   3. Um componente Campo de texto . Preste atenção às chaves de campo de cada componente. Você precisa deles para criar sua lógica condicional.

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

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

5. Se você quiser criar uma condição, use a variável show e atribua uma condição a ela usando o sinal de = igual. Use a variável data.field_key_component para acessar os dados em outros componentes de formulário. Para este exemplo, para exibir o componente Número , você pode digitar este script:

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

   Se quiser ocultar um componente sob uma condição, coloque um ponto de exclamação ! após o sinal de igual = e antes da condição.

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

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

7. Salve o componente.

Fluxo de trabalho amostral

Para verificar o fluxo de trabalho completo ou ter uma referência futura, baixe o exemplo XAML