Componentes condicionais

Para tornar seus formulários dinâmicos, você pode usar a guia Condicional de um componente de formulário. Lá, você pode aplicar as condições que aparecem no Runtime. É possível aplicar dois tipos de condições:

• Condições simples
• Condições Avançadas

Condições simples

Este tutorial demonstra como criar condições simples em um componente de formulário.

1. Abra seu arquivo de Formulário no Studio e adicione componentes ao seu formulário.
   Para esse exemplo, adicione os seguintes componentes:

   • Dois Checkbox.
   • Um único número.
   • Um único Campo de Texto.
2. Navegue até a guia Condicional do componente Campo de Texto e acesse a seção Simples .
   1. Este componente deve Exibir - escolha Verdadeiro na lista suspensa. Isso cria a condição para exibir o componente Campo de Texto. Se quiser ocultar o componente, escolha Falso
   2. Quando o componente de formulário - escolha o componente 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.
   
   

   

   
   
3. Salve o componente.

Para ver como a condição simples se comporta, assista o vídeo abaixo:

Condições Avançadas

Este tutorial mostra como criar condições avançadas em um componente de formulário.

Importante: as Condições Avançadas substituem as condições Simples.

1. Abra seu arquivo de Formulário no Studio e adicione componentes ao seu formulário. Você pode usar o mesmo arquivo de formulário usado para testar as condições Simples.
   Para esse exemplo, adicione os seguintes componentes:

   • Dois Checkbox.
   • Um número.
   • Um único Campo de Texto.
2. Navegue até a guia Condicional do componente Número .
3. Clique em Condições avançadas e acesse a seção JavaScript .
4. Se você quiser mostrar a condição no Runtime, comece sua condição com a variável booleana show . Use a variável data e o Nome da Propriedade para acessar os dados em outros componentes do formulário.

   Nesse exemplo, para exibir o componente Número , é possível digitar o seguinte 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.

Para visualizar o comportamento da condição avançada, assista o vídeo abaixo: