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 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 Formulário no Studio e adicione componentes em seu formulário. Para este exemplo, adicione os seguintes componentes:

   • Duas caixas de seleção.
   • 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 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.

   

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 Formulário no Studio e adicione componentes em seu formulário. Você pode usar o mesmo arquivo de formulário que usou para experimentar as Condições simples. Para este exemplo, adicione os seguintes componentes:

   • Duas caixas de seleção.
   • Um número.
   • Um único Campo de texto.

2. Navegue até a guia Condicional do componente de Número .

3. Clique em Condições avançadas e vá para a seção JavaScript .

4. Se você quiser mostrar a condição no runtime, inicie 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.

   Para este exemplo, para exibir o componente Número , você pode 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: