Construtor de regras
Introdução
O Rule Builder permite adicionar lógica condicional aos seus Formulários de maneira rápida e intuitiva, sem usar uma única linha de código. Você simplesmente precisa adicionar uma série de condições a serem cumpridas para implementar uma série de ações, como ocultar/mostrar elementos HTML, ativar/desativar campos, copiar valores de campos, pular páginas e fazer contas.
Para acessar o Rule Builder você deve ir até Form Manager , clicar no Actions correspondente ao formulário que irá trabalhar, depois em Conditional Rules .
Requisitos
Antes de usar o Rule Builder, seu formulário deve ter pelo menos um campo. Caso contrário, uma mensagem de aviso será exibida.
Sem limitações
Você não tem nenhuma limitação para criar regras condicionais. Você pode criar quantas regras, condições, subcondições e ações forem necessárias.
Adicione sua primeira regra
Para este exemplo, você deve criar um formulário de contato com quatro campos:
- Nome (campo de texto)
- E-mail (campo e-mail)
- Mensagem (área de texto)
- Botão (com texto Enviar)
Em seguida, vá para o Gerenciador de Formulários, localize seu formulário, clique no botão Ações e clique em Regras Condicionais.
- Uma vez neste Form Rule Builder, a primeira coisa que você notará é um painel em branco com o botão Adicionar regra. Clique neste botão para criar sua primeira regra.
- Então você verá duas linhas, a primeira refere-se às condições e a segunda às ações.
- Clique no botão Adicionar condição e aparecerá o primeiro campo do formulário, seguido de um extrato. Em nosso exemplo, o primeiro campo do Formulário é um campo de Texto com o rótulo 'Nome', portanto o Construtor de Regras mostrará a condição
'Name' 'is present'
. - Agora clique no botão Adicionar Ação e observe que diversas listas de seleção aparecem. A primeira lista mostra a ação a ser executada (Para este exemplo, deixe em ‘Mostrar’); o segundo mostra o Tipo de resultado (Para este exemplo, deixe 'Campo') e o terceiro, o rótulo do primeiro campo: 'Nome'. Para este exemplo, você irá alterá-lo para 'Enviar' (o texto 'Enviar' refere-se ao botão).
- Por fim, no canto superior direito desta regra você verá um pequeno aviso laranja “Alterações não salvas” e ao lado um botão verde com o ícone Verificar. Clique neste botão para salvar esta regra. O aviso desaparecerá.
Você criou sua primeira regra.
Se você vir o seu formulário, notará que o botão desapareceu, mas se você inserir um texto no campo ‘Nome’, o botão aparecerá.
Você deve estar ciente de que algumas regras são cumpridas bidirecionalmente; isto é, se a condição for cumprida a ação será executada. Mas, se a condição não for atendida, a ação oposta será executada (Mostrar <=> Ocultar, Ativar <=> Desativar, Matemática <=> Redefinir para O).
Você pode adicionar regras adicionais clicando no botão "Adicionar regra", mas isso não será salvo até que você pressione o botão verde. Lembre-se de que cada regra será armazenada separadamente.
Observação: para excluir uma regra , clique no botão vermelho com o ícone da Lixeira. Além disso, se quiser interromper a execução de uma regra por um determinado período, você pode desativá-la e ativá-la quando precisar.
Anatomia das Regras
Uma regra condicional é composta de três partes: Nome/Descrição, Condições e Ações.
Nome / Descrição
A primeira parte nos permite descrever a lógica condicional. Basta usar algumas palavras para nomear ou descrever o que você deseja alcançar com esta regra. (Opcional. Comprimento máximo: 255)
Condições
É a segunda parte de uma regra, está no início e permite especificar o campo ou campos que precisam ser avaliados, conforme o tipo de avaliação.
- Tipo de Condição : O tipo de condição indica quantas condições devem ser atendidas para executar a ação. Pode ser: Todos, Qualquer ou Nenhum. O padrão é Todos.
- Doença: A instrução se refere a um campo do formulário e deve ser preenchida. Consiste em 3 partes.
- Nome : O nome do campo do formulário no qual a condição se baseia.
- Operador : O operador de comparação usado para avaliar a condição.
- Valor : É um valor arbitrário que o usuário deve inserir no Formulário. A forma como os Valores serão definidos irá variar de acordo com o tipo de campo e o tipo de operador.
- Múltiplas condições : você pode adicionar múltiplas condições a uma regra. O tipo de condição indicará se todas devem ser atendidas (AND), se houver (OR) ou nenhuma.
- Grupo de condições : além de condições, uma regra pode conter um grupo de condições. Um grupo de condições difere de uma condição que permite alterar o tipo de condição. Portanto, uma regra pode ser do tipo Todos (AND), mas o grupo pode ser do tipo Qualquer (OR).
- Processo de avaliação : O processo de avaliação das condições é de cima para baixo. Ou seja, as condições do início serão avaliadas antes daquelas que estão no final, em ordem decrescente.
Nota: As condições " Pertence a " e " Não pertence a " podem analisar vários valores separados por "|", isso permite comparar o valor do campo com vários valores, caso um deles corresponda a ação será executada.
Ações
A última parte de uma regra indica a ação a ser executada se as condições forem atendidas. Como condições, as ações possuem uma forma declarativa de fácil compreensão.
Uma ação consiste basicamente em três partes:
- Tipo de ação:
- Mostrar/Ocultar
- Ativar/Desativar
- Copiar : permite copiar o valor de um campo ou outro elemento ou um valor estático e colá-lo em outro campo automaticamente. Um ótimo exemplo de onde isso é útil é em um formulário onde você pode coletar um endereço de envio e cobrança. O usuário final pode inserir seu endereço de entrega e marcar a opção Copiar para preencher automaticamente os campos de endereço de cobrança com os mesmos dados. Outro caso de uso comum é usar um valor estático vazio para limpar um campo usando lógica condicional.
- Matemática : Permite Adição/Subtração/Multiplicação/Divisão/Resto de campos e mostrar o resultado em outro campo ou elemento HTML.
- Avaliar : Permite avaliar expressões matemáticas (fórmulas) e definir o resultado em outro campo. Também é compatível com cálculos de data. Por exemplo, se quiser calcular a multiplicação de dois campos e dividir esse valor por 10, utilize a seguinte fórmula:
{{number_1}} * {{number_2}} / 100
. Tenha em mente que a avaliação de expressões matemáticas não funciona com ações opostas. Você pode ler a lista completa de cálculos avançados suportados pelo Rule Builder, graças às excelentes bibliotecas Math.js e date-fns - Formato de número : permite formatar um número de diferentes maneiras e sem qualquer codificação. Por exemplo, para fornecer o formato monetário a um número: 10130,25 use o seguinte formato '$0,0,00' e o número agora será exibido como $10.130,25. Além disso, por padrão, o formato levará a localidade do idioma que você selecionou na configuração do seu formulário, então por exemplo, se o nosso idioma do formulário for alemão, obteremos: €10 130,25. Você pode ler a lista completa de formatos suportados pelo Rule Builder graças à excelente biblioteca Numeral.js .
- Formato de texto : permite selecionar vários campos para criar uma nova sequência de texto formatada e definir o resultado em outro campo ou elemento HTML. Por exemplo. Para gerar automaticamente um endereço de e-mail, selecione um campo Nome e insira o seguinte formato {{0}} @example.com e selecione o campo E-mail onde o endereço de e-mail será exibido. Você pode usar tokens numéricos para identificar a posição do campo na lista de campos ou usar o ID do campo ou o alias do campo, em nosso exemplo: {0}@example.com ou {{text_1234}} @example.com ou {{name}} @example.com deve funcionar.
- Pular : Permite definir para qual página ir quando passarmos para a próxima página. Esta ação só deve ser usada em um Formulário Multi Step.
- Forma: Permite definir ações relacionadas ao formulário:
- 'Enviar': Para enviar o formulário.
- 'Redefinir': Para redefinir o formulário.
- 'Próxima página': Para ir para a próxima página.
- 'Página Anterior': Para ir para a página anterior.
- Alvo: Variará dependendo do tipo de Ação. Pode ser de dois tipos:
- Campo
- Elemento
- Nome:
- Se o Destino for Campo, será o nome do campo.
- Se o Target for Element ele estará entre vários elementos HTML selecionados pelo jQuery. Por exemplo:
- '#abc': O destino é o elemento HTML com 'abc' como ID.
- '.abc': O destino são todos os elementos HTML com 'abc' como classe CSS.
- Ações opostas : Por padrão, as ações opostas foram habilitadas porque ajudam na criação de regras condicionais comuns e as tornam mais lógicas. Por exemplo, se depois de atender a uma condição eu quiser mostrar um campo, então claramente, por não atender à condição, quero manter esse campo oculto. No entanto, há ocasiões em que desabilitar ações opostas pode ser útil. Quando isso ocorrer, somente a ação descrita na regra será executada.
Observe que o uso de elementos requer um conhecimento básico de jQuery, mas oferece grandes vantagens. Por exemplo, você poderia criar uma ação para ocultar todos os campos do formulário;'Hide' 'Element' '.form-group'
.
Nota: Você pode identificar o ID e a classe CSS dos campos do formulário usando a guia Código do Form Builder .
Validação Condicional
Você pode omitir uma validação de campo obrigatória usando regras condicionais de duas maneiras:
- Quando o campo está oculto.
- Quando o campo pertence a uma página que foi ignorada.
Por exemplo, se um campo for criado com o Form Builder e nas regras condicionais for definido que este campo só deverá ser exibido se outro campo atender a uma condição e a condição não for atendida, então o primeiro campo não será mais obrigatório (será não será validado pelo servidor).
Nota: Para usar a Validação Condicional, a validação do lado do cliente deve estar desabilitada. (Veja Configurações do formulário -> Não validar) )