Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Comentário: ajuste no layout da tabela de campos.

...

O editor de formulários conta com diversos recursos, campos e propriedades para os formulários que são criados especificamente para um processo. A seguir, são detalhados todos os campos e procedimentos necessários para a construção de um formulário seguindo as boas práticas de desenvolvimento. O editor de formulários é dividido em quatro partes distintas que serão detalhadas nesta documentação.

Image RemovedImage Added


Configurações iniciais

...

CampoPropriedades
Campo simples
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Tipo
define se o campo será do tipo texto, numérico ou calendário.

Título
título que será atribuído ao campo do formulário.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Máscara
formato no qual o valor do campo será exibido. As opções
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Dica de preenchimento
dica que descreve o valor esperado para o campo.

Limite de caracteres
o limite de caracteres do campo pode ser ajustado usando os ícones de seta ou inserindo o valor diretamente na propriedade. Se nenhum valor for definido, o limite padrão é 4.000 caracteres.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Valor inicial
valor pré-definido para o campo. Esse valor oculta a dica de preenchimento.

Máscara
formato no qual o valor do campo será exibido. As opções da máscara são:

  • Sem máscara
  • CPF
  • CNPJ
  • Porcentagem
  • CEP
  • Data
  • Hora
  • Data e Hora
  • Telefone fixo
  • Telefone celular
  • Placa de carro
  • Moeda
  • IP
Adicionais -
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar Analytics?
Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este campo pode ser usado para coletar dados sensíveis. Saiba mais aqui.

Área de texto
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Texto

Altura
usado para definir a altura do campo no formulário. O tamanho inicial padrão é 6. 

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Dica de preenchimento
dica que descreve o valor esperado para o campo.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Altura
usado para definir a altura do campo no formulário. O tamanho inicial padrão é 6. 

Valor inicial
valor pré-definido para o campo. Esse valor oculta a dica de preenchimento.

Limite de caracteres
O limite de caracteres do campo pode ser

Limite de caracteres
O limite de caracteres do campo pode ser ajustado usando os ícones de seta ou inserindo o valor diretamente na propriedade. Se nenhum valor for definido, o limite padrão é 4.000 caracteres.

Usar Analytics?
Quando assinalado, os dados
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar Analytics?
Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este campo pode ser usado para coletar dados sensíveis. Saiba mais aqui

Texto
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Texto
possível incluir parágrafos utilizando a tecla Enter.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Painel

Personalizar
possível realizar alinhamento do texto à direita, à esquerda e ao centro. Possível também utilizar negrito, itálico e sublinhado.

Tamanho do texto

define o
borderColor#f2f2f2
bgColor#f2f2f2
titlePersonalização

Alinhamento e estilo

define os alinhamentos que o campo vai receber, assim como os estilos aplicáveis negrito, itálico e sublinhado.

Tamanho do texto

define o tamanho da fonte utilizada no campo. Sendo possível definir entre o tamanho do parágrafo 7 ao 1.

Cor do texto
define a cor do texto incluído no campo

.

Cor

de

do lado esquerdo do fundo

primário

define a cor primária utilizada de fundo para o

cor que define o lado esquerdo do campo.

Cor

de

do lado direito do fundo

secundário

define a cor secundária utilizada de fundo para o campo. Quando utilizado, faz um gradiente entre as cores primárias e secundárias.

cor que define o lado direito do campo. 

Altura do espaço interno
define a altura do espaço interno do campo. Quanto maior o valor, maior será o espaço interno do campo. O valor máximo suportado é 100.

Arredondar bordas

usado para arredondar as bordas do campo.

Combo
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do

formulário.Texto de ajuda
instruções para o usuário preencher o

formulário.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Valor do campo
determina se as opções para seleção do campo
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Valor do campo
determina se as opções para seleção do campo serão definidas a partir de um dataset ou pré-definidas diretamente na construção do formulário.

  • Para usar informações pré-definidas no formulário, selecione a opção Valores manuais.

  • Para usar informações pré-definidas no formulário, selecione a opção Valores dinâmicos

Painel
borderColor#000000
bgColor#f2f2f2

Ao escolher obter os valores manuais, será necessário incluir os valores nos campos Título da opção e Valor.

Ao escolher obter os valores dinâmicos a partir de um dataset, é necessário acionar o botão Configurar dataset e preencher os campos abaixo:

Dataset
Define o dataset que será utilizado para fornecer os valores.

Ordenação
Define uma coluna para ordenar as opções disponíveis.

Opções
Define uma coluna para que suas linhas sejam opções do campo para o usuário final.

Valor
Define um identificador único da opção e não é exibido para o usuário final. Pode ser utilizado em personalizações via código.

  • Após preencher todos os campos necessários, clique em Salvar.
  • Também é possível editar as informações no ícone Image Modified e excluir no ícone Image Modified.
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar Analytics?
Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este campo pode ser usado para coletar dados sensíveis. Saiba mais aqui

Listas
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Texto de ajuda
instruções para o usuário preencher o formulário.

Tamanho do campo
usado para definir o tamanho do campo no

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Valor do campo
determina se as opções para seleção do campo serão definidas a partir de um dataset ou pré-definidas diretamente na construção do formulário.

  • Para usar informações pré-definidas no formulário, selecione a opção Definidos.
  • Para usar informações de um dataset escolha a opção Dataset.

Painel
borderColor#000000
bgColor#f2f2f2

Ao escolher obter os valores manuais, será necessário incluir os valores nos campos Título da opção e Valor.

Ao escolher obter os valores dinâmicos a partir de um dataset, é necessário acionar o botão Configurar dataset e preencher os campos abaixo:

Dataset
Define o dataset que será utilizado para fornecer os valores.

Ordenação
Define uma coluna para ordenar as opções disponíveis.

Opções
Define uma coluna para que suas linhas sejam opções do campo para o usuário final.

Valor
Define um identificador único da opção e não é exibido para o usuário final. Pode ser utilizado em personalizações via código.

  • Após preencher todos os campos necessários, clique em Salvar.
  • Também é possível editar as informações no ícone Image Modified e excluir no ícone Image Modified.
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar Analytics
Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este campo pode ser usado para coletar dados sensíveis. Saiba mais aqui

Seleção única
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Texto de ajuda
instruções para o usuário preencher o formulário.

Número de colunas
define o número de colunas que o campo terá.

Tamanho do campo

usado para definir o tamanho do campo no formulário.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Painel
borderColor
Título das opções
#f2f2f2
bgColor#f2f2f2
titleOpções

Título da opção
insira as opções que irão compor o campo. É possível alternar a posição das opções e excluí-las.

Valor
propriedade que poderá ser utilizada para integrações ou tratativas no código. Não será exibido para o usuário final.

Painel
Usar analytics?
Quando assinalado,
borderColor#000000
bgColor#f2f2f2

É possível adicionar quantas opções forem necessárias.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar analytics?
Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este campo pode ser usado para coletar dados sensíveis. Saiba mais aqui

Múltipla escolha
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Texto de ajuda
instruções para o usuário preencher o formulário.

Número de colunas
define o número de colunas que o campo terá.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Título das opções
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleOpções

Título da opção
insira as opções que irão compor o campo. É possível alternar a posição das opções e excluí-las.

Valor
propriedade que poderá ser utilizada para integrações ou tratativas no código. Não será exibido para o usuário final.

Usar analytics?

Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Painel
borderColor#000000
bgColor#f2f2f2

É possível adicionar quantas opções forem necessárias.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar analytics?

Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este

Informações
Este

campo pode ser usado para coletar dados sensíveis. Saiba mais aqui

Pesquisa
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Texto

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Painel
borderColor#000000
bgColor#f2f2f2
titleConfigurar dataset

Abaixo do campo Texto de ajuda é exibido o botão Configurar dataset para realizar a configuração da pesquisa. Para isso, é necessário preencher os campos abaixo:

Dataset
Define o dataset que será utilizado para fornecer os valores.

Ordenação
Define uma coluna para ordenar as opções disponíveis.

Opções
Define uma coluna para que suas linhas sejam opções do campo para o usuário final.

Valor
Define um identificador único da opção e não é exibido para o usuário final. Pode ser utilizado em personalizações via código.

  • Após preencher todos os campos necessários, clique em Salvar.
  • Também é possível editar as informações no ícone e excluir no ícone .
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar analytics?

Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este campo pode ser usado para coletar dados sensíveis. Saiba mais aqui


AvaliaçãoTamanho
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Texto de ajuda
instruções para o usuário preencher o formulário.

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
instruções para o usuário preencher o formulário.

Ícone
escolha entre os ícones disponíveis, que são: 

  • Estrela
  • Seleção
  • Feliz
  • Triste
  • Coração
Escala inicio

Escala 
defina entre zero (0) ou

um (1)Escala fim
defina entre dois (2) à

dez (10).

Marcador início

Exibir numeração
ative essa opção para exibir valores numéricos correspondentes a cada etapa da escala.

Marcadores
ative para adicionar textos descritivos que contextualizam o início e o final da escala.

Marcador inicial
defina o

defina o

marcador de início. Por exemplo: Ruim.

Marcador

fim

final
defina o marcador de fim. Por exemplo: Bom

Exibir numeração
exibe a numeração conforme a escala de 1 à 10

.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados

Usar analytics?
Quando assinalado, os dados recebidos por este campo serão enviados ao Analytics.

Informações

Este campo pode ser usado para coletar dados sensíveis. Saiba mais aqui

TabelaTabela
Código
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código

código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Nome do botão de inclusão
botão utilizado para adicionar novos registros na tabela, ou seja, uma nova linha.

Ocultar título?

quando habilitado o título da tabela ficará oculto.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleTabela principal

Tabela principal

Titulo do campo será atribuído ao campo do formulário.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePrivacidade e dados
Informações

Este campo pode

Informações
Este campo pode

ser usado para coletar dados sensíveis. Saiba mais aqui

Painel
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePersonalização

Cor do título
define a cor que será utilizada no título.

Cor

de fundo do título

do lado esquerdo do fundo
define a cor de fundo do lado esquerdo que será utilizada no painel

.

Cor do lado direito do fundo

define a cor de fundo do lado direito que está utilizada no painel. 

Ícone

selecione um ícone para ser atribuído ao lado do título do painel.

AbasAbas
Código
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código

o código é uma propriedade que poderá ser utilizada para integrações ou tratativas no código. Não será exibido para o usuário final.

Título
por padrão o campo é aberto com três abas, sendo necessário incluir título para cada uma das abas. 

Ordenação

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAbas

Título da aba

defina o título que será atribuído a aba.

Código

propriedade que poderá ser utilizada para integrações ou tratativas no código. Não será exibido para o usuário final.


  • É possível ordenar as abas conforme a ordem
é possível ordenar as abas conforme a ordem é
  • necessária. Bastando clicar e segurar no íconeImage Modified.
Excluir aba
  • É possível excluir uma aba clicando no ícone de lixeiraImage Modified.
Imagem
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será atribuído ao campo do formulário

Tamanho do campo
usado para definir o tamanho do campo no formulário.

Valor do campo
aqui é possível incluir a imagem
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleUpload

Selecione o arquivo através do botão Selecionar arquivo, ou

arrastar o soltar

arraste e solte o arquivo

diretamente

na área indicada

do

.

Altura

define a altura da imagem adicionada ao campo.

Altura e

Largura
define

altura e

a largura da imagem adicionada ao campo.

Manter proporção
quando utilizado, mantém as proporções de altura e largura da imagem adicionada.

Comportamento

Preencher: A imagem será ampliada para se ajustar a todo

Alinhamento

define o alinhamento a imagem adicionada ao campo, sendo alinhamento à direita, central e à esquerda.

Comportamento

  • Preencher: A imagem será ampliada para se ajustar a todo o espaço disponível. Podendo destorcer.
  • Conter: A imagem será reduzida para se ajustar ao espaço disponível, mantendo suas proporções.
  • Cobrir: A imagem ocupará todo o espaço disponível, sendo cortada se necessário.
Divisor
Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleConfigurações gerais do campo

Código
código único de identificação do campo. Este código pode ser editado para o valor desejado, sendo apenas necessário ser um código único, ou seja, que não se repita. Pode ser usado em personalizações via código.

Título
título que será exibido junto ao divisor.


Painel
borderColor#f2f2f2
bgColor#f2f2f2
titleAjuda e preenchimento

Texto de ajuda
subtexto que será exibido abaixo do divisor.

Painel
borderColor#f2f2f2
bgColor#f2f2f2
titlePersonalização

Espessura
espessura da linha do divisor, podendo ser pequena, média ou grande

Cor do divisor
usado para definir a cor do divisor

Ícone
ícone que será exibido ao lado do divisor.


Regras do formulário

...

Ao criar ou editar um formulário de processo, é possível adicionar regras para serem validadas no momento de preenchimento. Abaixo vamos detalhar o conceito e como utilizar esse recurso:

...