Controles de formulário

Após você selecionar um componente de formulário, será aberto um assistente exibindo várias guias de configuração, para permitir uma personalização adicional para diferentes funcionalidades. Verifique o progresso dentro do painel de visualização do assistente.

Quando estiver satisfeito com o design de um componente, selecione Salvar.

A tabela abaixo descreve as configurações e controles disponíveis para as guias comuns do assistente.

Guia do assistente	Description	Menções especiais
Exibição	Configure a forma como o componente de formulário é exibido.	O nome que você definir no campo Rótulo obrigatório torna-se o NomeDaPropriedade na guia Chave de campo .
Dados	Configure um valor padrão que os usuários finais vejam no campo de texto.	Os componentes que podem conter vários itens (por exemplo, caixas de seleção, guias) podem ser definidos aqui.
Validação	Configure os requisitos de validação para habilitar outros componentes de interface do usuário.	NA
Chave do Campo	Configure o nome da propriedade do componente que você deseja usar no fluxo de trabalho.	Por padrão, esse valor é passado do campo Rótulo da guia Exibição.
Condicional	Configure as condições para o componente.	Você pode definir condições avançadas, como Javascript ou JSON.
Lógica	Configure a lógica que aciona as condições.	NA

Alguns componentes de formulário têm guias específicas, como por exemplo:

Component	Guia do assistente	Description
Data/Hora	Data	Configure as datas mínimas e máximas disponíveis para seleção.
	Hora	Configure a etapa incremental para horas e minutos.
Dia	Dia	Configure a maneira como o usuário corporativo seleciona o dia (incremental ou em uma lista suspensa).
	Mês	Configure a forma como o usuário empresarial seleciona o mês (incremental ou em uma lista suspensa).
	Ano	Configure a forma como o usuário empresarial seleciona o ano (incremental ou em uma lista suspensa) e também o ano mínimo e máximo disponíveis para seleção.
Editar Grade	Modelos	Personalize os cabeçalhos e linhas de seus dados de grade de edição.
Mapa de Dados	Layout	Aplique as alterações de layout margens ao seu mapa de dados.

Exibição

Rótulo — o título do componente.

Posição do rótulo — a posição do rótulo para um campo.

Descrição — O texto que aparece abaixo do campo de entrada.

Dica de ferramenta - Adiciona um ícone dedica de ferramenta em um lado do ícone. Insira o texto da dica de ferramenta.

Classe CSS personalizada — adicione uma classe CSS personalizada ao componente. Você pode adicionar várias classes, separadas por um espaço.

Oculto - Oculte um componente quando você mostra o formulário.

Observação: o componente ainda aparece no arquivo JSON.

Ocultar Rótulo — oculte o rótulo de um componente.

Desabilitado - Desabilitar um campo no formulário.

Espaço reservado - O texto que aparece quando o campo está vazio.

Prefixo - O texto exibido antes de um campo.

Sufixo - O texto que é exibido após um campo.

Exclusivo — quando selecionado, o campo é considerado exclusivo para o formulário.

Protegido - Quando selecionado, torna o campo disponível apenas para entrada.

Persistente — quando marcado, armazena um campo no banco de dados. Se você não quiser salvar um campo no banco de dados, desmarque Persistente.

Exibição de tabela — quando marcada, mostra o valor na exibição de tabela dos envios. Você pode usá-la para componentes filho que você adicionar dentro de componentes Editar grade , para mostrar os componentes filho dentro de linhas. Se deixado desmarcado, os dados não são exibidos na linha recolhida de Editar grade. Mesmo que os dados não sejam exibidos, você pode configurar um componente ao editar uma linha.

Máscara de entrada — uma máscara de entrada fornece um formato predefinido. Por exemplo, para um campo de número de telefone, a máscara de entrada padrão seria [phone]. Os elementos de máscara de entrada são:

• 9 - numérico
• a - alfabética
• * - alfanumérico

Dados

Valor padrão — o valor do campo antes dos usuários interagirem com ele. O valor padrão substitui o texto do espaço reservado.

Valores múltiplos — quando marcado, vários valores podem ser adicionados ao campo. Os valores aparecem como uma matriz na API e um Botão Adicionar Outro fica visível no campo.

Conteúdo - A seção na qual você digita o conteúdo de um componente.

Formato de dados — o formato moment.js que você usa para salvar este campo. Por exemplo, HH:mm:ss.

Redesenhar em - Redesenhe este componente se outro componente no formulário mudar. Escolha o evento em que o componente deve ser redesenhado na lista suspensa. Os eventos padrão a serem escolhidos são Qualquer Alteração e Enviar.

Validação

Obrigatório - Quando selecionado, esse campo precisa ter um valor.

Validar em — determina quando esse componente dispara a validação de front-end. Escolha um evento na lista suspensa: Alterar ou Desfocar.

Tamanho mínimo — o requisito de tamanho mínimo que este campo deve satisfazer.

Tamanho máximo — o requisito de tamanho máximo que este campo deve satisfazer.

Tamanho Mínimo de Palavra - A quantidade mínima de palavras que podem ser adicionadas a este componente.

Tamanho máximo de palavra — a quantidade máxima de palavras que pode ser adicionada a esse campo.

Padrão de expressão regular — o padrão de expressão regular pelo qual o componente deve passar para que o formulário possa ser enviado.

Rótulo de erro — o rótulo que é exibido quando uma mensagem de erro de validação é exibida.

Mensagem de erro personalizada — uma mensagem de erro personalizada a ser exibida se um erro ocorrer.

Permitir apenas valores disponíveis — quando marcado, executa uma verificação de validação para garantir que o valor selecionado seja uma opção disponível.

Chave do Campo

Nome da propriedade — o nome do argumento correspondente para um componente na Coleção de Argumentos.

Você pode usar o Nome de propriedade para transmitir argumentos (usando a atividade Set Form Values ) dentro do formulário ou para obter valores fora de um formulário (usando a atividade Get Form Values ).

Condicional

A guia Condicional no Construtor de Formulários permite que você coloque condições em componentes em seu formulário para ocultá-los ou exibi-los.

A guia Condicional tem duas seções:

• Simple
• Condições Avançadas

Condições simples

A seção Simples da guia Condicional permite ocultar ou exibir um componente com base no valor de outro componente.

A seção Simples consiste em três campos:

1. Este componente deve ser exibido - nesta lista suspensa, escolha:

   • True se você deseja condicionar quando o componente for exibido.
   • False se você quiser condicionar quando o componente for ocultado.
2. Quando o componente de formulário - nesta lista suspensa, escolha um componente no formulário para atuar como uma condição.

3. Tem o valor - digite o valor que condiciona o componente quando exibir ou ocultar.

   
   

   

   
   

Condições Avançadas

A seção Condições Avançadas permite que você use o código JavaScript ou o JSONLogic para fazer combinações de condições.

Nota: A lógica avançada substitui os resultados da lógica condicional simples .

Na seção Código JavaScript, insira um código JavaScript personalizado.

A variável show deve receber um valor verdadeiro ou falso . A variável data é utilizada para acessar outros componentes do formulário, através da chave API.

Para aprender como usar os componentes condicionais, consulte a página do tutorial Componentes condicionais .

Lógica

A guia Lógica do Construtor de Formulários 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 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 sob a qual a ação ocorre. Por exemplo, talvez você queira exibir um campo de formulário específico somente quando uma opção de caixa de seleção estiver marcada. Nesse caso, a opção da caixa de seleção é o gatilho e exibir o campo do formulário é a ação.

Existem quatro tipos de gatilhos lógicos:

Tipo do Gatilho	Description	Exemplo
Simple	Selecione o tipo de gatilho e o valor que você deseja usar em sua lógica.
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 acionador JavaScript.	NA