Lógica Avançada

A guia Lógica do Form Designer permite criar condições e scripts de lógica avançada que podem alterar o estado ou o comportamento do componente de formulário selecionado.

Usando a lógica avançada, você pode alterar dinamicamente os controles, aparência e comportamento de um componente de formulário.

Uma lógica de formulário consiste em duas partes: o gatilho e a ação.

Gatilho O gatilho lógico é a condição para a Actions ocorrer. Por exemplo, pode ser que você queira exibir um campo de formulário específico apenas quando uma opção de caixa de seleção estiver marcada. Neste caso, a opção da caixa de seleção é o gatilho, e exibir o campo do formulário é o Actions.

Existem quatro tipos de gatilhos lógicos:

Tipo do Gatilho	Description	Exemplo
Simple	Você define um componente e valor de formulário de acionamento.
JavaScript	Você fornece uma lógica JavaScript para um componente de formulário ou dados de formulário. Use a sintaxe JavaScript para criar lógica complexa, como loop ou comportamento dinâmico.
Lógica JSON	Você fornece uma lógica JSON para um componente de formulário ou dados de formulário. Recomendado nos casos em que o JavaScript não é permitido. Não pode suportar loops ou comportamentos dinâmicos.
Evento	Você define um evento de componente, que uma vez emitido pelo componente correspondente, aciona a ação desejada.

Ação

A ação lógica é o comportamento do componente de formulário que deve ocorrer com base nas condições lógicas que você definiu (ou seja, o acionador). Por exemplo, você pode querer ativar um botão para usuários de uma idade específica. Nesse caso, a faixa etária é o gatilho e ativar o botão é a ação.

Existem quatro tipos de ações lógicas:

Tipo de Ação	Description	Exemplo
Propriedade	O gatilho altera uma das propriedades do componente disponíveis, como dica de ferramenta, descrição, classe CSS, etc. As propriedades disponíveis dependem do tipo do componente acionador.
Valor	O gatilho altera o valor do componente correspondente. A ação deve ser definida usando a sintaxe JavaScript.
Mesclar Esquema de Componente	O gatilho altera os parâmetros do esquema do componente encontrados no componente JSON. Para ver os parâmetros do esquema que você pode alterar, passe o mouse sobre o componente correspondente e clique em Editar JSON. Você pode alterar vários parâmetros em uma ação.
Personalizar Ação	Você define uma ação personalizada usando a sintaxe JavaScript, da mesma forma que definiria o tipo de gatilho JavaScript.

Tutorial

Para configurar uma lógica avançada:

1. Abra o Form Designer na atividade Create Form.
2. Arraste e solte componentes em seu formulário. Preste atenção às chaves de campo, pois você pode usá-las em sua lógica avançada.
3. Navegue até a guia Lógica do componente que você deseja alterar (ou seja, o componente no qual as Actions devem ocorrer).
4. Clique em +Adicionar Lógica. É possível adicionar quantas lógicas você desejar.
5. Digite um nome para sua lógica.
6. No painel Acionador , selecione o tipo de acionador que deseja usar em sua lógica. Os tipos disponíveis são Simple, Javascript, JSON Logice Event. Defina as condições desejadas para acionar a ação.
7. No painel Actions , clique em +Adicionar Actions. É possível adicionar quantas Actions você desejar, todas acionadas pela lógica que as agrupa.
8. Digite um nome para sua ação.
9. Selecione o tipo de ação que deseja usar. Os tipos disponíveis são Property, Value, Merge Component Schemae Custom Action. Defina o efeito desejado de sua ação.
10. Quando tudo estiver definido, clique em Salvar Actions.
11. Para salvar sua lógica, clique em Salvar lógica.

O procedimento acima se aplica genericamente a qualquer tipo de gatilho ou ação. Para um procedimento detalhado, confira os tutoriais específicos, que fornecem exemplos de cada gatilho específico e tipo de ação

• Tipo de gatilho: JavaScript e tipo de Actions : Valor Soma dinâmica de dois campos de texto.
• Tipo de gatilho: simples e tipo de Actions : propriedade Ocultar um campo dinamicamente
• Tipo de gatilho: Simples e tipo de Actions : Mesclar Esquema de Componente Alterar a cor do título dinamicamente
• Tipo de gatilho: Tipo de evento e ação: Actions Actions Definição de um campo de formulário para o padrão usando eventos
• Tipo de gatilho: JSON Tipo de lógica e Actions : propriedade Exibição de um componente com base na entrada do usuário

Resumindo dois campos de texto dinamicamente

Tipo de gatilho: JavaScript Tipo de ação: Valor

Essa lógica avançada resume dois campos de texto, com base na condição de que o usuário interaja com os campos de texto correspondentes.

1. Abra o Form Designer na atividade Create Form.
2. Arraste e solte três componentes do Campo de texto em seu formulário.
3. Nomeie dois dos componentes do campo de texto como A e Be nomeie o terceiro como Total. Preste atenção às suas chaves de campo, conforme você as usa em sua lógica avançada.
   Opcionalmente, você pode definir o componente de campo de texto Total como Desativado, para que os usuários corporativos não possam interagir com ele.
4. Acesse a aba Lógica do componente do campo Total .
5. Adicione uma lógica e nomeie-a como "soma dinâmica".

6. Selecione o tipo de gatilho JavaScript e insira o seguinte script na seção Área de Texto :

   result = true;
   return result;

   O fragmento acima detecta se há alterações nos campos de texto, ou seja, se o usuário interage com os campos de texto e aciona as Actions para somar os campos.

7. Adicione uma ação e nomeie-a como "a+b".

8. Selecione o tipo de ação Valor e insira o seguinte script na seção Valor (Javascript) :

   result = (+data.a) + (+data.b);
   return result;

   Substitua a e b pelos valores das chaves de campo dos componentes do campo de texto.
9. Salve a ação e a lógica.
10. Salve o componente.

No tempo de execução, se o usuário corporativo interagir com os campos de texto A e B, o campo Total será preenchido automaticamente, exibindo a soma de A e B.

Escondendo um campo dinamicamente

Tipo de gatilho: tipo de Actions Simples : Propriedade

Essa lógica avançada oculta um campo de formulário (ou seja, o Child field) quando o usuário insere "ocultar" em outro campo de formulário (ou seja, Parent field).

1. Abra o Form Designer na atividade Create Form.
2. Arraste e solte dois componentes do Campo de texto .
3. Nomeie um dos componentes do campo de texto como Parent fielde o outro como Child field. Preste atenção às suas chaves de campo, conforme você as usa em sua lógica avançada.
4. Vá para a guia Lógica do componente Child field .
5. Adicione uma lógica e nomeie-a como "ocultar entrada".

6. Selecione o tipo de gatilho Simples .

   6.1. No menu suspenso Quando o componente do formulário , selecione Parent field ({parentField_field_key}).

   6.2. No campo Tem o valor , insira "hide".

   A configuração acima detecta se o usuário insere a string "ocultar" no campo pai e aciona a ação para ocultar o campo filho.

7. Adicione uma ação e nomeie-a como "ocultar".

8. Selecione o tipo de Actions de propriedade .

   8.1. No menu suspenso Propriedades do componente , selecione Oculto.

   8.2. No menu suspenso Definir estado , selecione Verdadeiro.

9. Salve a ação e a lógica.
10. Salve o componente.

No tempo de execução, se o usuário corporativo inserir "ocultar" no campo pai, o campo filho ficará oculto.

Alterar a cor do título dinamicamente

Tipo de Actions : Simples Tipo de ação: Mesclar Esquema de Componente

Essa lógica avançada altera a cor do rótulo de um componente de campo de texto quando o usuário seleciona a cor desejada em uma lista. A alteração se aplica usando um arquivo CSS personalizado.

Pré-requisitos:

Crie um arquivo CSS contendo a nova cor para o rótulo do campo de texto e referencie-o na atividade Criar formulário, na propriedade da atividade LocalCSSFilePath .

Por exemplo, o trecho de CSS abaixo contém uma classe que define a cor do rótulo para verde ou vermelho:

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

Depois de referenciar o arquivo CSS nas propriedades de Criar formulário, crie seu formulário seguindo as etapas abaixo:

1. Abra o Form Designer na atividade Create Form.
2. Arraste e solte um componente de campo de texto e um componente de rádio . Preste atenção às suas chaves de campo, conforme você as usa em sua lógica avançada.
3. Na guia Exibição do componente do campo de texto, defina uma Classe CSS Personalizadapadrão. Por exemplo, para definir o vermelho como a cor padrão do campo de texto, use a classe textFieldLabel-red . A classe deve ser definida no arquivo CSS a partir dos pré- requisitos documentados acima.
   
   

   

   
   
4. Para o componente Rádio , adicione dois valores para as cores green e red.
5. Vá para a guia Lógica do componente Campo de texto .
6. Adicione uma lógica e nomeie-a como "seleção de cores".

7. Selecione o tipo de gatilho Simples .

   7.1. No menu suspenso Quando o componente do formulário , selecione Radio ({radio_field_key}).

   7.2. No campo Tem o valor , insira "green".

   A configuração acima detecta se o usuário seleciona "verde" nas opções de rádio e aciona a ação para alterar a cor do rótulo do campo de texto.

8. Adicione uma ação e nomeie-a como "alterar cor usando css".

9. Selecione o tipo de ação Mesclar Componente de Esquema e insira o seguinte fragmento:

   return { customClass: "textFieldLabel-green" }

10. Salve a ação e a lógica.
11. Salve o componente.

No tempo de execução, se o usuário corporativo selecionar o botão de opção "verde", o rótulo do campo de texto ficará verde. Se o usuário selecionar o botão de opção "vermelho", o rótulo do campo de texto ficará vermelho.

Definindo um campo de formulário como padrão usando eventos

Tipo de acionador: Tipo de ação do evento : Ação personalizada

Essa lógica avançada altera o conteúdo de um campo de texto quando o usuário clica em um botão. O botão emite um evento com base no qual o conteúdo do campo de texto muda para um texto padrão.

1. Abra o Form Designer na atividade Create Form.
2. Arraste e solte um componente de campo de texto e um componente de botão . Preste atenção às chaves de campo dos componentes, pois você as usa em sua lógica avançada.

3. Na guia Exibir do componente de botão:

   3.1. Rotule o componente do botão como Change value to "Default"

   3.2. Definir as Actions do botão como Clique

   3.3. Marque a caixa de seleção Usar para atualização local.

   3.4. Insira o seguinte fragmento na seção Atualizar Lógica de Dados . Isso emite o evento chamado resetTextField toda vez que o usuário clica no botão.

   instance.emit('resetTextField', {});

   3.5. Salve o componente de botão.

4. Vá para a guia Lógica do componente de campo de texto.
5. Adicione uma lógica e nomeie-a como "redefinir".
6. Selecione o tipo de acionador de evento .
7. No campo Nome do Evento , informe o nome do evento emitido ao clicar no botão. (ou seja, resetTextField).
   A configuração acima detecta quando o usuário clica no botão Change value to "Default" e substitui o conteúdo existente do campo de texto por "Padrão".
8. Adicione uma ação e nomeie-a como "padrão".
9. Selecione o tipo de Actions Actions .

10. Insira o trecho a seguir na seção Ação personalizada (Javascript) .

    return "Default"

11. Salve a ação e a lógica.
12. Salve o componente.

No tempo de execução, se o usuário corporativo clicar no botão Change value to "Default" , o evento resetTextField será emitido. O acionador escuta o evento e substitui o conteúdo do campo de texto existente por "Padrão".

Exibindo um componente com base na entrada do usuário

Tipo do gatilho: Tipo de Actions da lógica JSON : Propriedade

Essa lógica avançada exibe o conteúdo de um componente HTML (neste caso, uma imagem) quando o usuário insere o texto necessário.

1. Abra o Form Designer na atividade Create Form.
2. Arraste e solte um componente Campo de texto e um componente Elemento HTML . Preste atenção às chaves de campo dos componentes, pois você as usa em sua lógica avançada.

3. Na guia Exibição do componente do campo de texto:

   3.1. Rotule o componente do campo de texto como "Type "Show me"".

   3.2. Adicione a descrição "Deve ser uma correspondência exata (sensível a maiúsculas e minúsculas)" para indicar que os usuários devem inserir o texto conforme necessário.

   3.3. Salve o componente do campo de texto.

4. Na guia Exibir do componente de elemento HTML:

   4.1. Na seção Conteúdo , faça referência à imagem que deseja exibir. Por exemplo: <img href="https://picsum.photos/200/300" />.

   4.2. Marque a caixa de seleção Oculto para ocultar a exibição da imagem por padrão. 4.3. Salve o componente do elemento HTML.

5. Acesse a guia Lógica do componente do elemento HTML.
6. Adicione uma lógica e nomeie-a como "entrada do usuário".
7. Selecione o tipo de gatilho da Lógica JSON .
8. Insira o seguinte fragmento na seção Lógica JSON e substitua {text_field_component_field_key} pelo valor da chave do campo que você definiu para seu componente do campo de texto.

   {
     "===": [
       {
         "var": "data.{text_field_component_field_key}"
       },
       "Show me"
     ]
   }

   A configuração acima detecta quando o usuário insere "Mostre-me" e só então define o valor da propriedade Oculto do elemento HTML como False, exibindo assim o conteúdo HTML correspondente.

9. Adicione uma ação e nomeie-a como "imagem de exibição".

10. Selecione o tipo de Actions de propriedade .

    10.1. No menu suspenso Propriedade do componente , selecione Oculto.

    10.2. No menu suspenso Definir estado , selecione Falso.

11. Salve a ação e a lógica.
12. Salve o componente.

No tempo de execução, se o usuário inserir o texto necessário no campo de texto, o formulário exibirá o conteúdo HTML.

Fluxo de trabalho amostral

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