Lógica Avançada

The Logic tab of the Form Designer allows you to create conditions and advanced logic scripts that can change the state or the behavior of the selected form component.

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 sobre a qual a ação ocorre. Por exemplo, você pode querer exibir um campo de formulário específico apenas quando uma opção de caixa de seleção estiver selecionada. Nesse caso, a opção de caixa de seleção é o gatilho, e exibir o campo de formulário é a ação.

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 uma lógica complexa, como loop ou comportamento dinâmico.
Lógica JSON	Você fornece uma lógica JSON para um componente ou dados do formulário. Recomendado em casos em que o JavaScript não é permitido. Não é compatível com 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 de disparo.
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 JSON do componente. Para ver os parâmetros de 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. Navigate to the Logic tab of the component you want to change (i.e., the component upon which the action should take place).
4. Click +Add Logic. You can add as many logics as you want.
5. Digite um nome para sua lógica.
6. In the Trigger pane, select the type of trigger you want to use in your logic. The available types are Simple, Javascript, JSON Logic, and Event. Set the desired conditions to trigger the action.
7. In the Action pane, click +Add Action. You can add as many actions as you want, all triggered by the logic that groups them.
8. Digite um nome para sua ação.
9. Select the type of action you want to use. The available types are Property, Value, Merge Component Schema, and Custom Action. Set the desired effect of your action.
10. When you are all set, click Save Action.
11. To save your logic, click Save Logic.

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 ação: valor Resumindo dois campos de texto dinamicamente
• Tipo de gatilho: Simples e tipo de ação: Propriedade , ocultando um campo dinamicamente
• Tipo de gatilho: simples e tipo de ação: mesclar esquema de componente alteração dinâmica da cor do título
• Tipo de gatilho: Tipo de evento e ação: Ação personalizada Configurando um campo de formulário para padrão usando eventos
• Tipo de gatilho: Lógica JSON e tipo de ação: Propriedade Exibição de um componente com base na entrada do usuário

Resumindo dois campos de texto dinamicamente

Tipo do 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. Drag and drop three Text Field components into your form.

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 Desabilitado, de modo que os usuários de negócios não possam interagir com ele.

4. Go to the Logic tab of the Total field component.

5. Adicione uma lógica e nomeie-a como "soma dinâmica".

6. Select the Javascript trigger type, and enter the following script in the Text Area section:

   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. Select the Value action type, and enter the following script in the Value (Javascript) section:

   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 do gatilho: Tipo de ação 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. Drag and drop two Text Field components.
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. Go to the Logic tab of the Child field component.
5. Adicione uma lógica e nomeie-a como "ocultar entrada".
6. Select the Simple trigger type.
   1. No menu suspenso Quando o componente de formulário , selecione Parent field ({parentField_field_key}).
   2. No campo Tem o valor , insira "ocultar". A configuração acima detecta se o usuário insere a string "ocultar" no campo pai e dispara a ação para ocultar o campo filho.
7. Adicione uma ação e nomeie-a como "ocultar".
8. Select the Property action type.
   1. No menu suspenso Propriedade do Componente , selecione Oculto.
   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 gatilho: tipo de ação simples : 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:

Create a CSS file containing the new color for the text field label and reference it in the Create Form activity, in the LocalCSSFilePath activity property.

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. Drag and drop one Text Field component and one Radio component. Pay attention to their field keys, as you use those in your advanced logic.

3. Na guia Exibição do componente de campo de texto, defina uma Classe CSS Personalizada padrão. Por exemplo, para definir 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. For the Radio component, add two values for the colors green and red.

5. Go to the Logic tab of the Text Field component.

6. Adicione uma lógica e nomeie-a como "seleção de cores".

7. Select the Simple trigger type.

   1. No menu suspenso Quando o componente de formulário , selecione Radio ({radio_field_key}).
   2. No campo Tem o valor , insira "grde". A configuração acima detecta se o usuário seleciona "verde" nas opções de rádio e dispara 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. Select the Merge Schema Component action type and enter the following snippet:

   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 gatilho: Tipo de ação de 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. Drag and drop one Text Field component and one Button component. Pay attention to the components field keys, as you use those in your advanced logic.

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

   1. Rotule o componente do botão como Change value to "Default"
   2. Defina a Ação do botão como Click.
   3. Marque a caixa de seleção Usar para Atualização Local.
   4. Insira o fragmento a seguir na seção Atualizar lógica de dados . Isso emite o evento chamado resetTextField toda vez que o usuário clicar no botão.

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

   5. Salve o componente do botão.

4. Go to the Logic tab of the text field component.

5. Adicione uma lógica e nomeie-a como "redefinir".

6. Select the Event trigger type.

7. In the Event Name field, enter the name of the event emitted when clicking the button. (i.e., 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. Select the Custom Action action type.

10. Input the following snippet in the Custom Action (Javascript) section.

    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 de gatilho: Tipo de ação de 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. Drag and drop one Text Field component and one HTML Element component. Pay attention to the components field keys, as you use those in your advanced logic.

3. In the Display tab of the text field component:

   1. Rotule o componente do campo de texto como "Digite "Show me"".
   2. Adicione a Descrição "Deve ser uma correspondência exata (diferenciação de maiúsculas)" para indicar aos usuários que eles devem inserir o texto conforme necessário.
   3. Salve o componente do campo de texto.

4. In the Display tab of the HTML element component:

   1. Na seção Conteúdo , faça referência à imagem que você deseja exibir. Por exemplo: <img href="https://picsum.photos/200/300" />.
   2. Marque a caixa de seleção Oculto , para ocultar a imagem da exibição por padrão.
   3. Salve o componente do elemento HTML.

5. Go to the Logic tab of the HTML element component.

6. Adicione uma lógica e nomeie-a como "entrada do usuário".

7. Select the JSON Logic trigger type.

8. Input the following snippet in the JSON Logic section, and replace {text_field_component_field_key} with the field key value you set for your text field component.

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

   The above configuration detects when the user inputs "Show me" and only then sets the value of the HTML element Hidden property to False, thus displaying the corresponding HTML content.

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

10. Select the Property action type.

    1. No menu suspenso Propriedade do Componente , selecione Oculto.
    2. No menu suspenso Definir estado , selecione False.

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 ter uma referência futura, baixe o exemplo XAML