Formulários
Apresentação
Os Formulários no Betha BPM são as interfaces responsáveis pela interação entre o usuário e o processo de negócio. Eles permitem a coleta, exibição e validação de dados em cada etapa do fluxo, garantindo que as informações necessárias para a execução das tarefas sejam preenchidas de forma padronizada.
Nesta arquitetura, o formulário é um componente intrínseco ao ciclo de vida do processo. Isso significa que toda a estrutura de campos, regras de visibilidade e fontes de dados estão contidas no pacote do processo, facilitando a portabilidade (exportação e importação) entre diferentes entidades sem a perda de configurações.
Após a implantação de um diagrama com um formulário incorporado, o sistema Conecta é capaz de importar automaticamente esse esquema de formulário, permitindo a renderização do mesmo em cada tarefa que exija preenchimento. Isso facilita o fluxo de informações e permite que cada etapa do processo se conecte perfeitamente ao objetivo final, promovendo maior precisão no gerenciamento de tarefas e na coleta de dados.
Acesso e visão geral
O gerenciamento de formulários é realizado diretamente dentro do ambiente de modelagem do BPM. Não há necessidade de acessar sistemas externos para criar as interfaces das tarefas.
Para visualizar e editar formulários, o usuário deve possuir a licença do Studio Extensões ativa na entidade e ter as permissões configuradas no Gerenciador de Autorizações.
Para acessar a área de formulários:
Na tela inicial, selecione o processo desejado ou clique em + ADICIONAR PROCESSO.
Dentro do editor do processo, localize o menu de abas na parte superior da tela.
Clique na aba FORMULÁRIOS.
|
|---|
Nesta tela é possível adicionar um novo formulário, editar, visualizar ou excluir.
Visualização dos formulários
Ao clicar no ícone em forma de olho, o usuário pode visualizar as informações detalhadas do formulário e a saída de dados.
|
|---|
Exclusão de formulários
Para realizar a exclusão o usuário deve clicar no ícone de lixeira no canto direito da listagem de formulário e confirmar a ação. É importante ressaltar que as informações contidas no formulário deixarão de existir.
|
|---|
Criar e editar formulários
Para criar um formulário, o usuário deve acessar a aba Formulários, clicar no botão + ADICIONAR FORMULÁRIOS e inserir um título e uma breve descrição.
|
|---|
A edição do formulário se inicia logo após o salvamento. À esquerda da interface, estão disponíveis as ferramentas de construção, que permitem arrastar e organizar elementos específicos de acordo com a estrutura desejada.
|
|---|
A tela de edição de formulários permite a construção intuitiva de interfaces de coleta de dados através de um sistema de arraste e solte. Abaixo, detalhamos cada seção da interface:
1. Painel lateral de componentes (esquerda)
Este painel funciona como a caixa de ferramentas do criador do formulário.
Barra de pesquisa: permite localizar rapidamente um componente específico pelo nome.
Seção CAMPOS: Lista os tipos de dados que podem ser adicionados:
Campo de texto / Área de texto: para entradas alfanuméricas curtas ou longas.
Número: para entradas estritamente numéricas.
Múltipla escolha / Caixa de seleção: para seleções únicas ou múltiplas.
Data e horário: para seleção de cronogramas.
Upload de arquivo: permite que o usuário anexe documentos.
Seleção estática/dinâmica: para listas de opções pré-definidas ou vindas de fontes externas.
Seção LAYOUT: Contém ferramentas para organizar a estrutura visual da tela (como colunas ou divisores).
2. Área de construção
É o espaço principal onde o formulário ganha vida. O usuário deve selecionar um item no painel esquerdo e arrastá-lo para a mensagem central "Arraste e solte um componente de formulário". Uma vez posicionado, cada componente pode ser reordenado ou configurado individualmente.
3. Aba de pré-visualização (direita)
Ao clicar nesta aba, o sistema oculta as ferramentas de edição e exibe como o formulário aparecerá para o usuário final, permitindo testes de usabilidade antes da publicação. Além disso, é possível visualizar a partir desta aba a entrada e saída de dados do formulário.
Elementos dos formulários
Os formulários do Betha BPM permitem estruturar a coleta de informações necessárias para a execução dos processos. Por meio deles, é possível criar telas de preenchimento adaptadas às necessidades de cada etapa, garantindo que os dados informados pelos usuários estejam organizados, padronizados e disponíveis para uso no fluxo de trabalho.
A construção de um formulário é feita a partir de componentes. Cada componente possui uma finalidade específica dentro da estrutura do formulário. Alguns são utilizados para coletar dados, como textos, números, datas, opções de seleção e arquivos. Outros são utilizados para organizar visualmente o conteúdo, separar seções, agrupar campos ou apresentar orientações ao usuário.
Ao configurar um formulário, é importante escolher o componente mais adequado para cada tipo de informação. Essa escolha influencia diretamente a experiência de preenchimento, a qualidade dos dados coletados e a forma como essas informações poderão ser utilizadas nas etapas seguintes do processo.
|
|---|
Os componentes de preenchimento devem ser utilizados quando o usuário precisa informar dados no formulário. Nesses casos, é possível configurar propriedades como rótulo, descrição, obrigatoriedade, valores permitidos, limites de preenchimento e regras de validação. Essas configurações ajudam a orientar o usuário e reduzem a possibilidade de envio de informações incompletas ou inconsistentes.
Já os componentes de organização e layout não coletam dados diretamente. Eles são utilizados para melhorar a apresentação do formulário, tornando a navegação mais clara e separando as informações em blocos compreensíveis. Esses componentes são especialmente úteis em formulários extensos ou em processos que exigem o preenchimento de informações de diferentes naturezas.
Antes de publicar um formulário, é recomendado revisar a estrutura criada, conferir se os campos obrigatórios foram configurados corretamente e testar o preenchimento como usuário final. Também é importante verificar se as mensagens de validação são claras, se os componentes aparecem na ordem correta e se o formulário permanece compreensível em diferentes tamanhos de tela.
As próximas seções apresentam os principais componentes disponíveis para criação de formulários, explicando sua finalidade, comportamento, configurações recomendadas, validações e boas práticas de uso.
Campos
Nesta seção, apresentamos uma explicação pormenorizada de cada componente que integra a aba de campos.
Campo de texto
O componente Campo de texto permite incluir, no formulário, um campo destinado ao preenchimento de informações textuais curtas. Ele deve ser utilizado quando o usuário precisar informar dados simples, como nome, título, código, telefone, e-mail, identificação, número de documento ou qualquer outra informação que possa ser registrada em uma única linha.
Diferente da Área de texto, que é indicada para respostas mais longas e descritivas, o Campo de texto é recomendado para informações objetivas, com menor volume de caracteres e preenchimento direto.
Quando utilizar
Utilize o componente Campo de texto quando a informação solicitada puder ser preenchida em uma única linha. Esse componente é indicado para dados curtos e objetivos, especialmente quando não há necessidade de selecionar opções, informar valores numéricos específicos ou registrar textos longos.
Alguns exemplos de uso são: nome do solicitante, cargo, setor, e-mail, telefone, número de protocolo, código de identificação, assunto da solicitação ou título de uma atividade.
Para textos longos, como justificativas, observações, descrições detalhadas ou pareceres, recomenda-se utilizar o componente Área de texto. Para valores exclusivamente numéricos, utilize o componente Número. Para datas, utilize o componente Data e hora. Para opções previamente definidas, utilize componentes de seleção.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza um campo de preenchimento simples, com rótulo e, quando configurado, um texto de orientação exibido dentro do próprio campo. O valor informado é registrado conforme as regras definidas na configuração do componente.
O Campo de texto pode receber configurações adicionais para controlar sua apresentação e comportamento. Entre elas, é possível definir um texto de ajuda, uma descrição, uma dica de preenchimento, prefixo, sufixo, máscara de entrada, preenchimento automático, contador de palavras ou caracteres, verificação ortográfica e regras de visibilidade.
Na lateral da configuração, a área de pré-visualização permite acompanhar como o campo será exibido ao usuário final. Esse recurso facilita a conferência do rótulo, do texto de orientação e da aparência geral do componente antes de salvar as alterações.
Configurações do componente
Ao adicionar um Campo de texto ao formulário, é possível ajustar suas propriedades de apresentação, dados, validação e exibição condicional. Essas configurações definem como o campo será apresentado ao usuário, como o valor será armazenado e quais regras serão aplicadas durante o preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome exibido acima ou ao lado do campo. | Utilize um rótulo claro e objetivo, como “Nome do solicitante”, “E-mail” ou “Número do protocolo”. |
| Chave da propriedade | Define o identificador interno do campo para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com o rótulo do campo. |
| Posição do rótulo | Define onde o rótulo será exibido em relação ao campo. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Texto de ajuda | Exibe uma orientação dentro do campo enquanto ele estiver vazio. | Utilize para apresentar um exemplo curto de preenchimento, como “Digite seu e-mail”. |
| Descrição | Exibe uma instrução complementar relacionada ao campo. | Utilize quando for necessário explicar melhor o dado esperado. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o preenchimento. | Utilize para instruções que complementam o texto de ajuda ou a descrição. |
| Prefixo | Adiciona um texto antes do valor informado no campo. | Utilize quando o campo exigir uma indicação fixa antes do conteúdo, como um código ou símbolo. |
| Sufixo | Adiciona um texto depois do valor informado no campo. | Utilize quando o valor informado precisar de uma indicação complementar ao final. |
| Máscara de entrada | Define um formato específico para o preenchimento do campo. | Utilize quando o dado precisar seguir um padrão, como telefone, CPF, CEP ou outro formato controlado. |
| Permitir múltiplas máscaras | Permite configurar mais de um formato de preenchimento para o mesmo campo. | Utilize quando o campo aceitar formatos diferentes, como telefone fixo e celular. |
| Autocompletar | Define o comportamento de preenchimento automático do navegador. | Utilize conforme a necessidade de facilitar ou restringir sugestões automáticas. |
| Oculto | Oculta o campo do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do campo. | Utilize com cuidado, pois o rótulo ajuda o usuário a entender o que deve ser preenchido. |
| Exibir contador de palavras | Exibe a contagem de palavras digitadas. | Utilize quando houver limite ou controle relacionado à quantidade de palavras. |
| Exibir contador de caracteres | Exibe a contagem de caracteres digitados. | Utilize quando houver limite mínimo ou máximo de caracteres. |
| Ocultar entrada | Oculta visualmente o conteúdo digitado. | Utilize apenas quando houver necessidade de proteger a informação informada. |
| Foco inicial | Define se o cursor será posicionado automaticamente no campo ao abrir o formulário. | Utilize em formulários simples, quando este for o primeiro campo a ser preenchido. |
| Permitir verificação ortográfica | Permite a verificação ortográfica do conteúdo digitado. | Mantenha habilitado para campos textuais comuns. |
| Desativado | Exibe o campo sem permitir edição. | Utilize quando o valor deve ser apenas visualizado pelo usuário. |
|
|---|
Na aba Dados, é possível configurar o comportamento do valor armazenado no campo. Entre as opções disponíveis, estão o uso de múltiplos valores, valor padrão, caixa do texto e tratamento de espaços múltiplos.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Vários valores | Permite armazenar mais de um valor para o mesmo campo. | Utilize apenas quando o processo permitir múltiplas entradas para a mesma informação. |
| Usar variável para preencher opções | Permite utilizar uma variável para preencher valores, quando disponível. | Utilize quando o campo depender de informação previamente definida no processo. |
| Valor padrão | Define um valor inicial para o campo. | Utilize quando houver um preenchimento recorrente ou valor sugerido. |
| Caixa do texto | Define se o texto será mantido como digitado, convertido para maiúsculas ou convertido para minúsculas. | Utilize para padronizar dados como siglas, códigos ou e-mails. |
| Truncar espaços múltiplos | Remove espaços repetidos no conteúdo informado. | Utilize para evitar inconsistências causadas por espaços duplicados. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será enviado quando o campo estiver oculto por uma condição. | Mantenha habilitado quando o valor não deve ser considerado se o campo não estiver visível ao usuário. |
|
|---|
Na aba Validação, são definidas as regras que controlam se o conteúdo informado é aceito pelo formulário. Essas regras ajudam a impedir o envio de dados incompletos, fora do tamanho permitido ou em formato diferente do esperado.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Validar em | Define o momento em que a validação será aplicada. | Utilize a configuração padrão, salvo quando houver necessidade específica de validar em outro momento. |
| Obrigatório | Define se o campo deve ser preenchido antes do envio do formulário. | Utilize quando a informação for indispensável para a continuidade do processo. |
| Validar quando oculto | Define se o campo será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em campos exibidos por condição. |
| Comprimento mínimo | Define a quantidade mínima de caracteres permitida. | Utilize quando respostas muito curtas não forem aceitáveis. |
| Comprimento máximo | Define a quantidade máxima de caracteres permitida. | Utilize para limitar informações que devem seguir um tamanho controlado. |
| Comprimento mínimo da palavra | Define tamanho mínimo para palavras informadas no campo. | Utilize apenas quando houver regra específica relacionada à estrutura do texto. |
| Comprimento máximo da palavra | Define tamanho máximo para palavras informadas no campo. | Utilize apenas quando houver necessidade de impedir entradas fora do padrão. |
| Padrão de expressão regular | Define um padrão técnico que o valor precisa seguir. | Utilize quando o campo exigir formato específico, como e-mail, código ou identificação padronizada. |
| Mensagem de erro personalizada | Permite definir uma mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre como corrigir o preenchimento. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o componente conforme o valor informado em outro campo do formulário. Essa configuração permite que o Campo de texto seja apresentado apenas quando fizer sentido para o contexto do preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o campo será exibido ou ocultado conforme a condição configurada. | Utilize quando o campo depender de uma resposta anterior. |
| Quando o componente do formulário | Define qual outro campo será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir o Campo de texto. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o campo seja exibido ou ocultado. |
|
|---|
Boas práticas
O Campo de texto deve ser utilizado para informações curtas e objetivas. O rótulo deve indicar claramente o que o usuário precisa informar, evitando nomes genéricos como “Texto”, “Informação” ou “Campo”.
O texto de ajuda deve ser breve e servir como exemplo de preenchimento. Quando a orientação for mais detalhada, prefira utilizar a descrição ou a dica de preenchimento. Isso evita que o campo fique visualmente poluído e melhora a compreensão do usuário.
A chave da propriedade deve seguir um padrão consistente, sem espaços e sem caracteres especiais. Essa padronização facilita o uso do campo em regras, condições e integrações.
Máscaras de entrada devem ser utilizadas quando o valor precisa seguir um formato específico. Para campos como telefone, CPF, CEP ou códigos padronizados, a máscara ajuda o usuário a preencher corretamente e reduz erros de digitação.
Os contadores de caracteres ou palavras devem ser utilizados quando houver limite real de preenchimento. Evite ativá-los sem necessidade, pois informações visuais em excesso podem dificultar a leitura do formulário.
Quando o campo estiver relacionado a uma condição, teste o comportamento na aba Condicional antes de publicar o formulário. É importante confirmar se o campo aparece e desaparece corretamente e se os valores ocultos serão ou não enviados conforme a regra definida.
Após configurado, o componente será exibido no formulário como um campo simples de preenchimento textual. O usuário deverá informar o conteúdo solicitado conforme o rótulo, o texto de ajuda e as orientações configuradas. Caso o campo seja obrigatório, possua limite de caracteres, máscara de entrada ou regra de formato, o sistema valida o conteúdo antes de permitir o envio do formulário. Área de texto
Área de texto
O componente Área de texto permite incluir, no formulário, um campo destinado ao preenchimento de informações textuais mais extensas. Ele deve ser utilizado quando o usuário precisar registrar descrições, justificativas, observações, pareceres, relatos ou qualquer outro conteúdo que exija mais de uma linha para ser informado.
Diferente do Campo de texto, que é indicado para respostas curtas e objetivas, a Área de texto oferece mais espaço para digitação e leitura. Por isso, é recomendada para informações descritivas ou explicativas, em que o usuário precisa detalhar uma situação, apresentar contexto ou registrar uma manifestação mais completa.
Quando utilizar
Utilize o componente Área de texto quando a informação solicitada exigir uma resposta mais detalhada. Esse componente é adequado para campos como justificativa da solicitação, descrição do problema, observações complementares, motivo do indeferimento, parecer técnico, relato de atendimento ou detalhamento de uma ocorrência.
Para informações curtas, como nome, título, código, e-mail ou número de protocolo, recomenda-se utilizar o componente Campo de texto. Para valores exclusivamente numéricos, utilize o componente Número. Para datas, utilize o componente Data e hora. Para respostas padronizadas, utilize componentes de seleção.
A Área de texto deve ser usada quando o conteúdo informado pelo usuário não puder ser previsto completamente e precisar ser registrado em formato livre.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza um campo maior para digitação. O campo permite inserir conteúdo em várias linhas, possibilitando que o usuário organize o texto com quebras de linha e registre informações mais extensas.
Na configuração do componente, a área de Pré-visualização exibe como a Área de texto será apresentada ao usuário final. Essa visualização permite conferir o rótulo, o texto de ajuda, a altura inicial do campo e o comportamento das opções configuradas antes de salvar as alterações.
A quantidade inicial de linhas visíveis pode ser definida na aba Apresentação, por meio da configuração Linhas. Também é possível habilitar a Expansão automática, que permite que o campo aumente verticalmente conforme o usuário digita. Essa configuração é útil quando o tamanho do conteúdo pode variar bastante entre os preenchimentos.
Quando a opção Vários valores é habilitada na aba Dados, o componente passa a permitir o preenchimento de mais de uma Área de texto para o mesmo campo. Nesse caso, o usuário visualiza a opção Adicionar outro, podendo incluir novos blocos de preenchimento conforme a necessidade do formulário.
Configurações do componente
Ao adicionar uma Área de texto ao formulário, é possível ajustar suas propriedades de apresentação, dados, validação e exibição condicional. Essas configurações definem como o campo será apresentado ao usuário, como o valor será armazenado e quais regras serão aplicadas durante o preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome exibido junto ao campo. | Utilize um nome claro e objetivo, como “Justificativa da solicitação”, “Descrição da ocorrência” ou “Observações complementares”. |
| Chave da propriedade | Define o identificador interno do campo para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com o rótulo do campo. |
| Posição do rótulo | Define onde o rótulo será exibido em relação ao campo. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Texto de ajuda | Exibe uma orientação dentro do campo enquanto ele estiver vazio. | Utilize para apresentar um exemplo breve de preenchimento, como “Digite as observações da solicitação”. |
| Descrição | Exibe uma instrução complementar relacionada ao campo. | Utilize quando for necessário explicar melhor o tipo de informação esperada. |
| Linhas | Define a altura inicial da Área de texto. | Ajuste conforme o tamanho esperado da resposta. Para observações simples, poucas linhas podem ser suficientes. Para justificativas e pareceres, utilize uma área maior. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o preenchimento. | Utilize para instruções complementares que ajudam o usuário a preencher o campo corretamente. |
| Prefixo | Adiciona um texto antes do conteúdo informado. | Utilize somente quando houver necessidade de apresentar uma informação fixa antes do texto. |
| Sufixo | Adiciona um texto depois do conteúdo informado. | Utilize somente quando houver necessidade de complementar o valor informado com uma indicação fixa. |
| Editor | Permite definir o tipo de editor utilizado no componente, quando disponível. | Utilize editor avançado apenas quando a formatação do texto for necessária para o processo. |
| Expansão automática | Permite que o campo aumente verticalmente conforme o usuário digita. | Recomendada para campos que podem receber textos longos e variáveis. |
| Autocompletar | Define o comportamento de preenchimento automático do navegador. | Utilize conforme a necessidade de facilitar ou restringir sugestões automáticas. |
| Oculto | Oculta o campo do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do campo. | Utilize com cuidado, pois o rótulo ajuda o usuário a entender o que deve ser preenchido. |
| Exibir contador de palavras | Exibe a contagem de palavras digitadas. | Utilize quando houver limite ou controle relacionado à quantidade de palavras. |
| Exibir contador de caracteres | Exibe a contagem de caracteres digitados. | Utilize quando houver limite mínimo ou máximo de caracteres. |
| Foco inicial | Define se o cursor será posicionado automaticamente no campo ao abrir o formulário. | Utilize quando a Área de texto for o principal campo de preenchimento do formulário. |
| Permitir verificação ortográfica | Permite a verificação ortográfica do conteúdo digitado. | Mantenha habilitado para campos descritivos, como justificativas, observações e pareceres. |
| Desativado | Exibe o campo sem permitir edição. | Utilize quando o conteúdo deve ser apenas visualizado pelo usuário. |
|
|---|
Na aba Dados, são configuradas opções relacionadas ao valor armazenado no campo e à forma como ele será tratado pelo formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Vários valores | Permite que o usuário informe mais de um valor para o mesmo campo. | Utilize apenas quando o processo permitir ou exigir múltiplas descrições, observações ou registros. |
| Usar variável para preencher opções | Permite utilizar uma variável para preencher valores, quando disponível. | Utilize quando o campo depender de informação previamente definida no processo. |
| Valor padrão | Define um conteúdo inicial para o campo. | Utilize quando houver um texto sugerido ou modelo de preenchimento. |
| Caixa do texto | Define se o texto será mantido como digitado, convertido para maiúsculas ou convertido para minúsculas. | Utilize para padronizar o conteúdo quando houver regra específica de apresentação. |
| Truncar espaços múltiplos | Remove espaços repetidos no conteúdo informado. | Utilize para reduzir inconsistências causadas por espaços duplicados. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o campo estiver oculto por uma condição. | Mantenha habilitado quando o valor não deve ser considerado se o campo não estiver visível ao usuário. |
|
|---|
Na aba Validação, são definidas as regras que controlam se o conteúdo informado será aceito pelo formulário. Essas regras ajudam a impedir o envio de respostas vazias, curtas demais, longas demais ou fora do padrão esperado.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Validar em | Define o momento em que a validação será aplicada. | Utilize a configuração padrão, salvo quando houver necessidade específica de validar em outro momento. |
| Obrigatório | Define se o campo deve ser preenchido antes do envio do formulário. | Utilize quando a informação for indispensável para a continuidade do processo. |
| Validar quando oculto | Define se o campo será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em campos exibidos por condição. |
| Comprimento mínimo | Define a quantidade mínima de caracteres permitida. | Utilize quando respostas muito curtas não forem suficientes para análise. |
| Comprimento máximo | Define a quantidade máxima de caracteres permitida. | Utilize para evitar textos excessivamente longos. |
| Comprimento mínimo da palavra | Define tamanho mínimo para palavras informadas no campo. | Utilize apenas quando houver regra específica relacionada à estrutura do texto. |
| Comprimento máximo da palavra | Define tamanho máximo para palavras informadas no campo. | Utilize apenas quando houver necessidade de impedir entradas fora do padrão. |
| Padrão de expressão regular | Define um padrão técnico que o valor precisa seguir. | Utilize quando o texto precisar seguir um formato específico. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre como corrigir o preenchimento. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar a Área de texto conforme o valor informado em outro componente do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o campo será exibido ou ocultado conforme a condição configurada. | Utilize quando a Área de texto depender de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir a Área de texto. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o campo seja exibido ou ocultado. |
|
|---|
Boas práticas
A Área de texto deve ser utilizada quando houver necessidade real de coletar informações descritivas. O rótulo do campo deve deixar claro o que o usuário precisa informar, evitando nomes genéricos como “Texto”, “Descrição” ou “Observação” quando o contexto exigir maior precisão.
O texto de ajuda deve ser breve e servir como exemplo de preenchimento. Quando a orientação for mais detalhada, utilize a descrição ou a dica de preenchimento. Isso mantém o campo claro e evita excesso de informação dentro da área de digitação.
A quantidade de linhas deve ser definida conforme o tamanho esperado da resposta. Campos de observação podem ter poucas linhas, enquanto justificativas, pareceres e relatos devem oferecer mais espaço para digitação.
A expansão automática é recomendada quando o conteúdo pode variar bastante. Com ela, o campo se adapta ao tamanho do texto informado, melhorando a experiência de preenchimento.
O uso de editor avançado deve ser avaliado com cuidado. Em formulários simples, o texto sem formatação costuma ser suficiente e reduz a possibilidade de preenchimentos inconsistentes. O editor avançado é mais indicado quando o conteúdo precisa ser apresentado posteriormente com formatação, como em pareceres, comunicados ou textos reutilizados em documentos.
A opção de múltiplos valores deve ser utilizada apenas quando houver necessidade de registrar mais de uma resposta para o mesmo campo. Caso contrário, mantenha essa opção desabilitada para evitar preenchimentos desnecessários.
Quando a Área de texto estiver relacionada a uma condição, teste o comportamento antes de publicar o formulário. Verifique se o campo aparece e desaparece corretamente e se o valor será omitido quando o componente estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário como um campo ampliado para digitação. O usuário poderá informar o conteúdo solicitado, organizar o texto em mais de uma linha e respeitar as orientações configuradas no rótulo, no texto de ajuda, na descrição ou na dica de preenchimento. Caso o campo seja obrigatório, possua limite de caracteres, regra de formato ou condição de exibição, o sistema valida o conteúdo antes de permitir o envio do formulário.
Número
O componente Número permite incluir, no formulário, um campo destinado ao preenchimento de valores numéricos. Ele deve ser utilizado quando a informação esperada precisa ser registrada como número, permitindo que o sistema valide o conteúdo informado e utilize esse valor em regras, análises, cálculos ou etapas posteriores do processo.
Diferente do Campo de texto, o componente Número é indicado para dados que devem aceitar apenas valores numéricos, como quantidades, valores, percentuais, prazos, idades, medidas ou limites. Sua configuração permite controlar aspectos como separador de milhares, casas decimais, valor mínimo, valor máximo e obrigatoriedade de preenchimento.
Quando utilizar
Utilize o componente Número quando a informação solicitada representar um valor numérico. Esse componente é adequado para campos como quantidade de itens, idade, valor estimado, percentual, carga horária, prazo em dias, número de parcelas, pontuação, peso, altura, medida ou qualquer outro dado que deva ser tratado como número pelo formulário.
O componente também é recomendado quando o valor informado será utilizado em regras do processo, comparações, validações ou cálculos. Nesses casos, o uso do componente Número contribui para manter o dado em formato adequado e reduz inconsistências causadas por preenchimentos textuais.
Evite utilizar esse componente para informações que, embora sejam compostas por números, não devem ser tratadas como valores numéricos. Códigos, números de documentos, CEPs, telefones e identificadores com zeros à esquerda podem ser melhor representados por Campo de texto, especialmente quando precisam preservar formatação específica.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza um campo simples para preenchimento numérico. O campo apresenta um rótulo e, quando configurado, um texto de ajuda para orientar o preenchimento.
Na área de Pré-visualização, é possível conferir como o componente será exibido ao usuário final antes de salvar as alterações. Essa visualização mostra o rótulo, o campo de entrada e o texto de ajuda configurado.
O comportamento do campo pode variar conforme as configurações aplicadas. Quando o separador de milhares é habilitado, o número pode ser apresentado com separação visual para facilitar a leitura. Quando são definidas casas decimais, o campo passa a aceitar valores com a quantidade de casas configurada. Caso a opção de requerer decimal esteja habilitada, o valor informado deve respeitar a apresentação decimal definida.
Na aba Validação, é possível limitar o intervalo de valores aceitos. Dessa forma, o sistema pode impedir o envio do formulário quando o número informado estiver abaixo do valor mínimo ou acima do valor máximo configurado.
Configurações do componente
Ao adicionar um componente Número ao formulário, é possível ajustar suas propriedades de apresentação, dados, validação e exibição condicional. Essas configurações definem como o campo será exibido ao usuário, como o valor será armazenado e quais regras deverão ser respeitadas durante o preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome exibido junto ao campo. | Utilize um nome claro e objetivo, como “Quantidade”, “Valor estimado”, “Prazo em dias” ou “Percentual”. |
| Chave da propriedade | Define o identificador interno do campo para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com o rótulo do campo. |
| Posição do rótulo | Define onde o rótulo será exibido em relação ao campo. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Texto de ajuda | Exibe uma orientação dentro do campo enquanto ele estiver vazio. | Utilize para indicar o tipo de número esperado, como “Digite um número”. |
| Descrição | Exibe uma instrução complementar relacionada ao campo. | Utilize quando for necessário explicar a unidade, o critério ou a regra de preenchimento. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o preenchimento. | Utilize para reforçar instruções importantes, como o intervalo aceito ou o formato esperado. |
| Prefixo | Adiciona um texto antes do valor informado. | Utilize quando o número precisar ser apresentado com uma indicação anterior, como “R\$”. |
| Sufixo | Adiciona um texto depois do valor informado. | Utilize quando o número precisar ser acompanhado de unidade, como “dias”, “%”, “kg” ou “horas”. |
| Autocompletar | Define o comportamento de preenchimento automático do navegador. | Utilize conforme a necessidade de facilitar ou restringir sugestões automáticas. |
| Oculto | Oculta o campo do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do campo. | Utilize com cuidado, pois o rótulo ajuda o usuário a entender qual número deve ser informado. |
| Ocultar entrada | Oculta visualmente o conteúdo digitado. | Utilize apenas em situações específicas em que o valor não deve ficar visível durante o preenchimento. |
| Foco inicial | Define se o cursor será posicionado automaticamente no campo ao abrir o formulário. | Utilize quando o campo Número for o primeiro ou principal dado a ser preenchido. |
| Desativado | Exibe o campo sem permitir edição. | Utilize quando o valor deve ser apenas visualizado pelo usuário. |
|
|---|
Na aba Dados, são configuradas opções relacionadas ao valor armazenado e à forma como o número será tratado no formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Vários valores | Permite que o usuário informe mais de um valor para o mesmo campo. | Utilize apenas quando o processo permitir ou exigir múltiplos valores numéricos para a mesma informação. |
| Usar variável para preencher opções | Permite utilizar uma variável para preencher valores, quando disponível. | Utilize quando o campo depender de informação previamente definida no processo. |
| Valor padrão | Define um valor inicial para o campo. | Utilize quando houver um número sugerido ou recorrente para o preenchimento. |
| Usar separador de milhares | Exibe separador visual para facilitar a leitura de números grandes. | Recomenda-se utilizar em valores monetários, quantidades altas ou números extensos. |
| Casas decimais | Define a quantidade de casas decimais aceitas no campo. | Utilize quando o número exigir precisão decimal, como valores monetários, percentuais ou medidas. |
| Requerer decimal | Exige a apresentação de casas decimais no valor informado. | Utilize quando o processo exigir padronização decimal, como em valores financeiros. |
| Truncar espaços múltiplos | Remove espaços repetidos no conteúdo informado. | Pode ser mantido para evitar inconsistências de preenchimento. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o campo estiver oculto por uma condição. | Mantenha habilitado quando o valor não deve ser considerado se o campo não estiver visível ao usuário. |
|
|---|
Na aba Validação, são definidas as regras que controlam se o valor informado será aceito pelo formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Validar em | Define o momento em que a validação será aplicada. | Utilize a configuração padrão, salvo quando houver necessidade específica de validar em outro momento. |
| Obrigatório | Define se o campo deve ser preenchido antes do envio do formulário. | Utilize quando o número for indispensável para a continuidade do processo. |
| Validar quando oculto | Define se o campo será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em campos exibidos por condição. |
| Valor mínimo | Define o menor valor permitido para o campo. | Utilize quando houver um limite inferior, como idade mínima, quantidade mínima ou prazo mínimo. |
| Valor máximo | Define o maior valor permitido para o campo. | Utilize quando houver um limite superior, como idade máxima, quantidade máxima ou teto de valor. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre como corrigir o valor informado. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o componente Número conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o campo será exibido ou ocultado conforme a condição configurada. | Utilize quando o campo Número depender de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir o componente Número. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o campo seja exibido ou ocultado. |
|
|---|
Boas práticas
O componente Número deve ser utilizado apenas quando o valor informado precisar ser tratado como número. Essa escolha é importante para evitar problemas em regras, cálculos, filtros e validações do processo.
O rótulo do campo deve indicar claramente qual valor deve ser informado. Quando houver unidade de medida, utilize descrição, prefixo ou sufixo para orientar o usuário. Por exemplo, campos como “Prazo estimado” podem utilizar o sufixo “dias”, enquanto campos de valor financeiro podem utilizar o prefixo “R\$”.
Evite utilizar o componente Número para códigos, documentos, telefones, CEPs ou identificadores. Esses dados podem conter zeros à esquerda, formatações específicas ou caracteres que não devem ser tratados como valor numérico. Nesses casos, o Campo de texto costuma ser mais adequado.
Configure casas decimais apenas quando necessário. Para quantidades inteiras, prazos em dias ou número de pessoas, não é necessário permitir decimais. Para valores financeiros, medidas e percentuais, as casas decimais podem ser importantes para manter a precisão do dado informado.
O separador de milhares deve ser utilizado quando houver números grandes ou valores monetários. Essa configuração melhora a leitura, mas deve ser testada para garantir que o valor continua sendo registrado corretamente.
Sempre que houver limites conhecidos, configure valor mínimo e valor máximo. Essa prática reduz erros de preenchimento e evita que o usuário informe valores fora da realidade do processo.
Quando o campo estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se o componente aparece e desaparece corretamente e se o valor será omitido quando o campo estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário como um campo para preenchimento numérico. O usuário deverá informar o valor solicitado, observando o rótulo, o texto de ajuda, a descrição e as regras configuradas. Caso o campo seja obrigatório, possua valor mínimo, valor máximo, casas decimais ou outra regra de preenchimento, o sistema valida o conteúdo antes de permitir o envio do formulário.
Múltipla escolha
O componente Múltipla escolha permite incluir, no formulário, uma lista de opções para que o usuário selecione uma única alternativa. Ele deve ser utilizado quando as respostas possíveis são conhecidas previamente e quando apenas uma delas pode representar a escolha correta para o contexto do formulário.
Esse componente contribui para padronizar as respostas e reduzir inconsistências no preenchimento, pois o usuário não precisa digitar uma informação livremente. Em vez disso, ele escolhe uma alternativa entre as opções configuradas pelo responsável pelo formulário.
Quando utilizar
Utilize o componente Múltipla escolha quando o usuário precisar selecionar apenas uma opção dentro de um conjunto de alternativas previamente definido. Esse componente é indicado para situações em que as opções são fixas, conhecidas e mutuamente excludentes, ou seja, quando a seleção de uma alternativa elimina as demais.
Alguns exemplos de uso são: escolha de tipo de solicitação, definição de prioridade, indicação de turno, seleção de forma de atendimento, classificação de uma ocorrência, escolha de situação cadastral ou identificação de um motivo principal.
Quando o usuário puder marcar mais de uma opção, recomenda-se utilizar um componente próprio para múltiplas seleções, conforme disponibilidade no formulário. Quando a resposta esperada for uma confirmação simples, como aceite ou declaração, recomenda-se utilizar o componente Caixa de seleção. Quando as opções forem exibidas em uma lista suspensa, recomenda-se avaliar o uso de Seleção estática ou Seleção dinâmica, conforme a origem dos dados.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza o rótulo do componente e, abaixo dele, as opções configuradas. Cada opção é apresentada com um botão de seleção circular. Ao marcar uma opção, ela passa a representar a resposta escolhida para aquele campo.
Como o componente permite seleção única, apenas uma opção deve permanecer selecionada por vez. Quando o usuário escolhe outra alternativa, a seleção anterior é substituída pela nova escolha.
Na área de Pré-visualização, é possível conferir como o componente será apresentado ao usuário final antes de salvar a configuração. Essa visualização permite verificar o rótulo, a disposição das opções, a posição dos textos das alternativas e o comportamento da seleção.
Na aba Dados, as opções são configuradas por meio da tabela de valores. Cada alternativa possui um rótulo, que será exibido ao usuário, e um valor, que será armazenado pelo sistema. Também é possível definir um valor padrão, caso uma das opções deva aparecer selecionada inicialmente.
Configurações do componente
Ao adicionar o componente Múltipla escolha ao formulário, é possível ajustar suas propriedades de apresentação, dados, validação e exibição condicional. Essas configurações definem como o campo será exibido ao usuário, quais opções estarão disponíveis e quais regras deverão ser respeitadas durante o preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome ou pergunta exibida junto ao componente. | Utilize um texto claro, como “Tipo de atendimento”, “Prioridade da solicitação” ou “Motivo principal”. |
| Chave da propriedade | Define o identificador interno do campo para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com o rótulo. |
| Posição do rótulo | Define onde o rótulo principal será exibido em relação ao componente. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Posição do rótulo das opções | Define onde o texto de cada opção será exibido em relação ao botão de seleção. | Utilize a posição que oferecer melhor leitura para o usuário. Em geral, o texto à direita do botão facilita a compreensão. |
| Descrição | Exibe uma instrução complementar associada ao componente. | Utilize quando for necessário explicar o critério de escolha. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o usuário. | Utilize quando a escolha depender de uma regra específica do processo. |
| Exibição em linha | Exibe as opções horizontalmente, quando habilitada. | Utilize apenas quando houver poucas opções e os textos forem curtos. |
| Oculto | Oculta o componente do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do componente. | Utilize com cuidado, pois o rótulo ajuda o usuário a entender o que deve ser selecionado. |
| Foco inicial | Define se o componente receberá foco ao abrir o formulário. | Utilize apenas quando a escolha for o primeiro ou principal ponto de preenchimento. |
| Desativado | Exibe o componente sem permitir alteração. | Utilize quando a opção selecionada deve ser apenas visualizada pelo usuário. |
|
|---|
Na aba Dados, são configuradas as alternativas que serão apresentadas ao usuário e os valores que serão armazenados pelo sistema.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Usar variável para preencher opções | Permite utilizar uma variável para preencher as opções, quando disponível. | Utilize quando as opções dependerem de uma informação previamente definida no processo. |
| Valor padrão | Define qual opção será exibida inicialmente selecionada. | Use com cuidado, pois uma opção previamente marcada pode levar o usuário a enviar uma escolha sem perceber. |
| Valores | Define a lista de alternativas disponíveis para seleção. | Cadastre apenas opções válidas e necessárias para o processo. |
| Rótulo | Define o texto da opção exibido ao usuário final. | Utilize textos objetivos e compreensíveis. |
| Valor | Define o valor interno salvo quando a opção é selecionada. | Utilize valores simples e estáveis, preferencialmente sem alterar após a publicação do formulário. |
| Atalho | Permite configurar um atalho para seleção da opção, quando disponível. | Utilize apenas quando houver necessidade operacional específica. |
| Adicionar outro | Permite inserir novas opções na lista de valores. | Utilize para cadastrar todas as alternativas que devem estar disponíveis ao usuário. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o componente estiver oculto por uma condição. | Mantenha habilitado quando a resposta não deve ser considerada se o campo não estiver visível. |
|
|---|
Na aba Validação, são definidas as regras que controlam se a seleção feita pelo usuário será aceita pelo formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Obrigatório | Define se o usuário deve selecionar uma opção antes do envio do formulário. | Utilize quando a escolha for indispensável para a continuidade do processo. |
| Permitir apenas valores disponíveis | Restringe o preenchimento aos valores configurados no componente. | Recomenda-se manter habilitado quando o campo deve aceitar somente as opções cadastradas. |
| Validar quando oculto | Define se o componente será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em componentes exibidos por condição. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre como corrigir a seleção. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o componente Múltipla escolha conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o componente será exibido ou ocultado conforme a condição configurada. | Utilize quando a pergunta só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir a Múltipla escolha. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o componente seja exibido ou ocultado. |
|
|---|
Boas práticas
O componente Múltipla escolha deve ser utilizado quando apenas uma alternativa puder ser selecionada. Essa definição precisa estar clara para evitar confusão com componentes que permitem múltiplas marcações.
O rótulo deve indicar exatamente o que o usuário precisa escolher. Evite nomes genéricos como “Opção” ou “Escolha”, pois eles não explicam o objetivo do campo. Prefira rótulos como “Tipo de atendimento”, “Prioridade da solicitação” ou “Motivo principal”.
As opções devem ser objetivas e não devem se sobrepor. Quando duas alternativas forem muito parecidas, o usuário pode ter dificuldade para decidir qual delas representa melhor a situação. Sempre que possível, revise as opções com a equipe responsável pelo processo antes de publicar o formulário.
Evite configurar valor padrão quando a escolha exigir decisão consciente do usuário. Uma opção previamente selecionada pode fazer com que o usuário envie o formulário sem avaliar corretamente as alternativas.
A exibição em linha deve ser usada apenas quando houver poucas opções e textos curtos. Quando houver muitas alternativas ou textos maiores, mantenha a exibição vertical para melhorar a leitura.
Os valores internos devem ser definidos com cuidado, pois podem ser utilizados em regras, condições, integrações e relatórios. Após o formulário entrar em uso, alterações nesses valores podem impactar o processamento das informações já registradas.
Quando o componente estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ele aparece e desaparece corretamente e se o valor será omitido quando estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário com o rótulo e as opções disponíveis para seleção. O usuário deverá marcar a alternativa que corresponde à resposta desejada.
Se o componente estiver configurado como obrigatório, o sistema impedirá o envio do formulário até que uma opção válida seja selecionada. Caso existam regras condicionais, o componente poderá aparecer ou permanecer oculto conforme as respostas informadas em outros campos.
Caixa de seleção
O componente Caixa de seleção permite incluir, no formulário, um campo que pode ser marcado ou desmarcado pelo usuário. Ele deve ser utilizado quando a informação esperada representar uma confirmação, aceite, declaração ou condição que possa ser respondida como sim ou não.
Na prática, esse componente registra uma condição booleana. Quando a caixa está marcada, entende-se que a condição foi confirmada. Quando permanece desmarcada, entende-se que a condição não foi confirmada.
Quando utilizar
Utilize o componente Caixa de seleção quando o usuário precisar confirmar uma afirmação ou indicar que determinada condição se aplica ao formulário. Esse tipo de campo é recomendado para situações como aceite de termos, confirmação de ciência, autorização, declaração de veracidade das informações ou indicação de que uma etapa foi conferida.
A Caixa de seleção não deve ser utilizada para perguntas com várias alternativas de resposta. Quando o usuário precisar escolher uma opção entre várias possibilidades, recomenda-se utilizar componentes de seleção, como Múltipla escolha, Seleção estática ou Seleção dinâmica, conforme o comportamento desejado. Quando for necessário permitir a marcação de várias opções em uma lista, deve-se utilizar um componente próprio para múltiplas seleções, se disponível no formulário.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza uma caixa acompanhada de um rótulo. Para responder, basta marcar ou desmarcar a opção apresentada.
Quando a Caixa de seleção estiver desmarcada, o campo representa uma resposta negativa ou ausência de confirmação. Quando estiver marcada, representa uma resposta afirmativa ou confirmação da condição apresentada.
Na área de Pré-visualização, é possível conferir como o componente será exibido ao usuário final antes de salvar a configuração. Essa visualização mostra a caixa de marcação, o rótulo configurado e o comportamento visual do componente.
Na aba Dados, é possível configurar se a Caixa de seleção terá valor padrão marcado. Quando o valor padrão estiver habilitado, o campo será exibido inicialmente marcado para o usuário. Essa configuração deve ser utilizada com cuidado, principalmente em campos de aceite, ciência ou declaração.
Configurações do componente
Ao adicionar uma Caixa de seleção ao formulário, é possível ajustar suas propriedades de apresentação, dados, validação e exibição condicional. Essas configurações determinam como o campo será apresentado ao usuário e como a informação será registrada pelo sistema.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o texto exibido junto à Caixa de seleção. | Utilize uma frase clara e objetiva, que represente exatamente a condição a ser confirmada pelo usuário. |
| Chave da propriedade | Define o identificador interno do campo para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com a finalidade do campo. |
| Descrição | Exibe uma orientação complementar associada ao componente. | Utilize quando for necessário explicar o impacto da marcação ou fornecer contexto adicional. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o usuário. | Utilize quando a confirmação depender de uma regra específica do processo. |
| Tipo de entrada | Define o tipo de entrada do componente. | Mantenha como Caixa de seleção quando a finalidade for marcar ou desmarcar uma confirmação. |
| Oculto | Oculta o componente do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o texto exibido junto à caixa. | Utilize com cuidado, pois o rótulo informa ao usuário o que está sendo confirmado. |
| Foco inicial | Define se o componente receberá foco ao abrir o formulário. | Utilize apenas quando a Caixa de seleção for o primeiro ou principal ponto de interação do formulário. |
| Desativado | Exibe o componente sem permitir alteração. | Utilize quando a condição deve ser apenas visualizada pelo usuário. |
|
|---|
Na aba Dados, são configuradas opções relacionadas ao valor inicial do campo e ao comportamento do envio quando o componente estiver oculto por uma condição.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Usar variável para preencher opções | Permite utilizar uma variável para preencher valores, quando disponível. | Utilize apenas quando o valor inicial depender de uma informação previamente definida no processo. |
| Valor padrão | Define se a Caixa de seleção será exibida inicialmente marcada. | Mantenha desmarcado quando a ação exigir confirmação ativa do usuário. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o componente estiver oculto por uma condição. | Mantenha habilitado quando a resposta não deve ser considerada se o campo não estiver visível ao usuário. |
|
|---|
Na aba Validação, são definidas as regras que controlam se o componente deve ser marcado antes do envio do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Obrigatório | Define se o usuário deverá marcar a Caixa de seleção antes de enviar o formulário. | Utilize quando a confirmação for indispensável para a continuidade do processo. |
| Validar quando oculto | Define se o componente será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em componentes exibidos por condição. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre a necessidade de marcar a opção. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar a Caixa de seleção conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o componente será exibido ou ocultado conforme a condição configurada. | Utilize quando a confirmação só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir a Caixa de seleção. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o componente seja exibido ou ocultado. |
|
|---|
Boas práticas
A Caixa de seleção deve ser usada para confirmações simples e objetivas. O texto do campo deve ser escrito como uma afirmação, e não como uma pergunta ambígua. Em vez de utilizar “Você aceita os termos?”, recomenda-se utilizar “Declaro que li e aceito os termos apresentados.”
Também é importante evitar rótulos genéricos, como “Sim”, “Aceito” ou “Confirmo”, quando eles não estiverem acompanhados de contexto suficiente. O usuário precisa compreender exatamente o que está marcando.
Em situações de aceite, ciência ou declaração, recomenda-se manter o valor padrão desmarcado. Essa prática evita que o usuário envie o formulário com uma confirmação previamente marcada sem perceber.
Quando houver necessidade de explicar o conteúdo da confirmação, utilize a descrição do componente ou uma Dica antes da Caixa de seleção. Isso ajuda o usuário a entender o que será confirmado antes de marcar a opção.
Evite utilizar a Caixa de seleção para perguntas com várias respostas possíveis. Esse componente representa apenas uma condição marcada ou desmarcada. Para seleção entre alternativas, utilize Múltipla escolha, Seleção estática ou Seleção dinâmica, conforme a necessidade do formulário.
Quando o componente estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ele aparece e desaparece corretamente e se o valor será omitido quando estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário como uma opção que pode ser marcada ou desmarcada. O usuário deverá marcar a Caixa de seleção quando a condição apresentada for verdadeira ou quando desejar confirmar a informação solicitada. Se o campo estiver configurado como obrigatório, o sistema impedirá o envio do formulário até que a opção seja marcada. Caso existam regras condicionais, o componente poderá aparecer ou permanecer oculto conforme as respostas informadas em outros campos.
Data e hora
O componente Data e hora permite incluir, no formulário, um campo destinado ao preenchimento de datas, horários ou ambos. Ele deve ser utilizado quando o processo exigir o registro de uma informação temporal, como data de ocorrência, prazo, agendamento, período de atendimento ou horário previsto para uma atividade.
O componente apresenta ao usuário um campo com seletor de calendário e, conforme a configuração aplicada, também permite informar horário. Dessa forma, o preenchimento ocorre de maneira mais padronizada, reduzindo erros de digitação e variações de formato.
|
|---|
Quando utilizar
Utilize o componente Data e hora quando a informação solicitada representar uma data, um horário ou uma combinação entre data e horário. Esse componente é indicado para situações em que o valor informado precisa seguir um padrão temporal e pode ser utilizado posteriormente em regras, prazos, análises ou etapas do processo.
Alguns exemplos de uso são: data e hora de abertura de uma ocorrência, data prevista para conclusão, prazo de atendimento, data de agendamento, horário de início de uma atividade, horário de término de uma etapa ou registro de quando determinado evento aconteceu.
Para informações que não representem datas ou horários, recomenda-se utilizar o componente correspondente ao tipo de dado esperado. Textos devem ser registrados em Campo de texto ou Área de texto, valores numéricos devem ser registrados no componente Número e respostas padronizadas devem ser configuradas em componentes de seleção.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza um campo de preenchimento com ícone de calendário. Ao selecionar o campo ou acionar o ícone, o sistema permite escolher uma data e, quando a entrada de hora estiver habilitada, também permite informar o horário correspondente.
Na aba Apresentação, é possível configurar informações básicas do componente, como rótulo, chave da propriedade, posição do rótulo, permissão de entrada manual, texto de ajuda, descrição e dica de preenchimento. A área de Pré-visualização permite conferir como o campo será exibido ao usuário final antes de salvar a configuração.
Na aba Data, é possível habilitar ou desabilitar a entrada de data e restringir datas específicas, períodos, finais de semana ou dias da semana. Na aba Hora, é possível habilitar a entrada de hora, definir o tamanho dos passos de hora e minuto e configurar o formato de 12 horas, quando aplicável.
Na aba Dados, o componente pode receber valor padrão e, quando disponível, múltiplos valores. Na aba Validação, é possível tornar o campo obrigatório e definir datas mínima e máxima por meio do calendário. Já a aba Condicional permite controlar quando o componente deve ser exibido conforme a resposta de outro campo do formulário.
Configurações do componente
Ao adicionar o componente Data e hora ao formulário, é possível ajustar suas propriedades de apresentação, data, hora, dados, validação e exibição condicional. Essas configurações determinam como o campo será exibido ao usuário, quais valores poderão ser informados e quais regras serão aplicadas durante o preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome exibido junto ao campo. | Utilize um nome claro e objetivo, como “Data e hora do atendimento”, “Prazo final” ou “Data da ocorrência”. |
| Chave da propriedade | Define o identificador interno do campo para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com o rótulo do campo. |
| Posição do rótulo | Define onde o rótulo será exibido em relação ao campo. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Permitir entrada manual | Permite que o usuário digite a data e hora diretamente no campo. | Utilize quando o usuário puder informar o valor manualmente, além de selecionar pelo calendário. |
| Texto de ajuda | Exibe uma orientação dentro do campo enquanto ele estiver vazio. | Utilize para indicar o preenchimento esperado, como “Selecione uma data e hora”. |
| Descrição | Exibe uma instrução complementar associada ao campo. | Utilize quando for necessário explicar o critério da data ou do horário solicitado. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o usuário. | Utilize quando houver uma regra específica, como prazo mínimo ou período permitido. |
| Oculto | Oculta o componente do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do componente. | Utilize com cuidado, pois o rótulo informa ao usuário qual data ou horário deve ser preenchido. |
| Foco inicial | Define se o componente receberá foco ao abrir o formulário. | Utilize apenas quando esse for o primeiro ou principal campo a ser preenchido. |
| Desativado | Exibe o componente sem permitir alteração. | Utilize quando o valor deve ser apenas visualizado pelo usuário. |
|
|---|
Na aba Data, são configuradas as regras relacionadas à seleção de datas.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Habilitar entrada de data | Define se o componente permitirá informar data. | Mantenha habilitado quando o campo precisar registrar dia, mês e ano. |
| Desativar datas específicas ou datas por intervalo | Permite bloquear datas específicas ou períodos determinados. | Utilize quando houver datas indisponíveis para seleção, como feriados, períodos encerrados ou janelas não permitidas. |
| Desativar finais de semana | Impede a seleção de sábados e domingos. | Utilize quando o processo aceitar apenas dias úteis. |
| Desativar dias da semana | Permite bloquear dias específicos da semana. | Utilize quando determinadas atividades não ocorrerem em dias específicos. |
|
|---|
Na aba Hora, são configuradas as regras relacionadas à seleção de horário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Habilitar entrada de hora | Define se o componente permitirá informar horário. | Mantenha habilitado quando for necessário registrar hora e minuto. |
| Tamanho do passo da hora | Define o intervalo usado para seleção das horas. | Utilize conforme a necessidade do processo. Para seleção precisa, mantenha intervalo menor. |
| Tamanho do passo do minuto | Define o intervalo usado para seleção dos minutos. | Utilize intervalos maiores quando o processo aceitar horários aproximados, como de 15 em 15 ou 30 em 30 minutos. |
| Formato de 12 horas | Define se o horário será apresentado em formato de 12 horas, com AM/PM. | Utilize apenas quando esse formato fizer sentido para os usuários do formulário. |
|
|---|
Na aba Dados, são configuradas opções relacionadas ao valor armazenado e ao comportamento do envio quando o componente estiver oculto por uma condição.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Vários valores | Permite que o usuário informe mais de um valor para o mesmo campo. | Utilize apenas quando o processo permitir ou exigir múltiplas datas ou horários para a mesma informação. |
| Usar variável para preencher opções | Permite utilizar uma variável para preencher valores, quando disponível. | Utilize quando o campo depender de uma informação previamente definida no processo. |
| Valor padrão | Define uma data e hora inicial para o campo. | Utilize quando houver um valor sugerido, como a data atual ou uma data previamente calculada. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o componente estiver oculto por uma condição. | Mantenha habilitado quando o valor não deve ser considerado se o campo não estiver visível ao usuário. |
|
|---|
Na aba Validação, são definidas as regras que controlam se a data e hora informadas serão aceitas pelo formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Validar em | Define o momento em que a validação será aplicada. | Utilize a configuração padrão, salvo quando houver necessidade específica de validar em outro momento. |
| Obrigatório | Define se o campo deve ser preenchido antes do envio do formulário. | Utilize quando a data ou horário forem indispensáveis para a continuidade do processo. |
| Usar calendário para definir data mínima | Define a menor data permitida para preenchimento. | Utilize quando o usuário não puder informar datas anteriores a um determinado limite. |
| Usar calendário para definir data máxima | Define a maior data permitida para preenchimento. | Utilize quando o usuário não puder informar datas posteriores a um determinado limite. |
| Validar quando oculto | Define se o componente será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em campos exibidos por condição. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre como corrigir a data ou horário informado. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o componente Data e hora conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o componente será exibido ou ocultado conforme a condição configurada. | Utilize quando a data ou horário só forem necessários a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir o componente Data e hora. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o componente seja exibido ou ocultado. |
|
|---|
Boas práticas
O componente Data e hora deve ser utilizado somente quando a informação solicitada representar um valor temporal. Essa escolha ajuda a manter o preenchimento padronizado e evita que datas e horários sejam digitados como texto livre.
O rótulo deve indicar exatamente qual data ou horário o usuário precisa informar. Evite rótulos genéricos como “Data” ou “Horário” quando o contexto exigir maior precisão. Prefira nomes como “Data e hora do atendimento”, “Data prevista para conclusão” ou “Data da ocorrência”.
Quando o processo aceitar apenas datas, desabilite a entrada de hora, se essa configuração estiver disponível. Quando o processo exigir data e horário, mantenha as duas entradas habilitadas para garantir que o valor seja registrado de forma completa.
A entrada manual deve ser utilizada com atenção. Ela pode agilizar o preenchimento para usuários experientes, mas também pode gerar erros se o formato informado não estiver claro. Quando a precisão for importante, reforce a orientação por meio do texto de ajuda, descrição ou dica de preenchimento.
Quando o processo não permitir atendimento em finais de semana ou em dias específicos, utilize as opções de restrição da aba Data. Isso evita que o usuário selecione datas inválidas e reduz a necessidade de correção posterior.
Os passos de hora e minuto devem ser definidos conforme a granularidade necessária. Para agendamentos com horários fechados, intervalos de 30 ou 60 minutos podem ser suficientes. Para registros mais precisos, intervalos menores podem ser mais adequados.
Evite configurar valor padrão quando a escolha da data exigir decisão consciente do usuário. Em casos em que o valor padrão for útil, como preenchimento automático com a data atual, revise se essa definição não poderá gerar registros incorretos.
Quando o componente estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ele aparece e desaparece corretamente e se o valor será omitido quando estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário como um campo para seleção ou preenchimento de data e hora. O usuário poderá informar o valor solicitado usando o seletor de calendário e, quando habilitado, os controles de horário. Se o campo estiver configurado como obrigatório, o sistema impedirá o envio do formulário até que uma data ou horário válido seja informado. Caso existam restrições de data mínima, data máxima, finais de semana ou dias específicos, o sistema validará o preenchimento conforme as regras configuradas.
Upload de arquivo
O componente Upload de arquivo permite incluir, no formulário, um campo destinado ao envio de arquivos pelo usuário. Ele deve ser utilizado quando o processo exigir o recebimento de documentos, comprovantes, imagens, relatórios ou outros anexos necessários para análise, conferência ou continuidade da solicitação.
No formulário, o componente é exibido como uma área de envio de arquivo, na qual o usuário pode arrastar um arquivo ou clicar para procurá-lo no dispositivo. Após o envio, o arquivo passa a compor as informações registradas no formulário, conforme as regras de configuração aplicadas.
|
|---|
Quando utilizar
Utilize o componente Upload de arquivo quando a informação necessária para o processo precisa ser enviada em formato de arquivo. Esse componente é indicado para situações como envio de documentos de identificação, comprovantes, declarações assinadas, imagens de ocorrência, documentos digitalizados, relatórios técnicos, planilhas ou arquivos complementares à solicitação.
O Upload de arquivo não deve ser utilizado para informações que possam ser preenchidas diretamente no formulário. Quando o usuário puder digitar a informação, utilize Campo de texto ou Área de texto. Quando a informação for uma data, número ou opção padronizada, utilize o componente correspondente. O envio de arquivo deve ser reservado para casos em que o conteúdo precisa ser analisado, armazenado ou consultado como anexo.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza uma área de envio com a orientação para arrastar ou clicar para anexar arquivos. A pré-visualização do componente apresenta uma estrutura com as colunas Nome do Arquivo e Tamanho, permitindo identificar os arquivos adicionados.
O usuário pode anexar o arquivo por meio da opção Procurar arquivos ou arrastando o documento para a área indicada, quando essa funcionalidade estiver disponível no navegador utilizado. Após selecionar o arquivo, o componente deve exibir as informações do anexo de acordo com o comportamento configurado.
Na aba Arquivo, o responsável pela configuração pode definir os tipos de arquivo aceitos, o padrão de arquivo permitido, o tamanho mínimo e máximo do anexo e outras opções relacionadas à forma de envio. Na aba Dados, é possível habilitar múltiplos valores, permitindo que o usuário envie mais de um arquivo no mesmo componente.
Configurações do componente
Ao adicionar o componente Upload de arquivo ao formulário, é possível ajustar suas propriedades de apresentação, arquivo, dados, validação e exibição condicional. Essas configurações definem como o campo será exibido, quais arquivos serão aceitos e quais regras deverão ser respeitadas durante o envio.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome exibido junto ao componente. | Utilize um nome claro, como “Anexar comprovante”, “Documento de identificação” ou “Relatório técnico”. |
| Chave da propriedade | Define o identificador interno do componente para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com a finalidade do anexo. |
| Posição do rótulo | Define onde o rótulo será exibido em relação ao componente. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Descrição | Exibe uma orientação complementar associada ao componente. | Utilize para informar qual documento deve ser anexado e em quais condições. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o usuário. | Utilize para reforçar instruções sobre formato, tamanho ou qualidade do arquivo. |
| Oculto | Oculta o componente do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do componente. | Utilize com cuidado, pois o rótulo informa qual arquivo deve ser enviado. |
| Foco inicial | Define se o componente receberá foco ao abrir o formulário. | Utilize apenas quando o upload for o primeiro ou principal ponto de interação do formulário. |
| Desativado | Exibe o componente sem permitir envio ou alteração. | Utilize quando o arquivo deve ser apenas visualizado, conforme o comportamento disponível no ambiente. |
|
|---|
Na aba Arquivo, são configuradas as regras específicas para o envio dos anexos. Essas opções permitem controlar quais arquivos serão aceitos, como serão identificados e quais limites de tamanho serão aplicados.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Tipos de arquivo | Permite configurar tipos de arquivo aceitos, associando rótulo e valor. | Utilize quando o processo aceitar apenas determinados formatos, como PDF, JPG ou PNG. |
| Modelo de nome de arquivo | Define um padrão para o nome do arquivo enviado, quando aplicável. | Utilize quando houver necessidade de padronizar a identificação dos anexos. |
| Exibir como imagem | Permite exibir arquivos de imagem diretamente no formulário, quando disponível. | Utilize quando o usuário ou o analista precisar visualizar a imagem anexada com facilidade. |
| Apenas enviar | Restringe o comportamento do componente para envio, quando disponível. | Utilize quando o objetivo for apenas anexar o arquivo, sem necessidade de exibição posterior no formulário. |
| Padrão de arquivo | Define o padrão aceito para os arquivos enviados. | Utilize para restringir extensões ou formatos permitidos. Quando todos os tipos forem aceitos, o padrão pode permanecer amplo. |
| Tamanho mínimo do arquivo | Define o menor tamanho permitido para o anexo. | Utilize quando for necessário evitar arquivos vazios ou inválidos. |
| Tamanho máximo do arquivo | Define o maior tamanho permitido para o anexo. | Utilize para evitar arquivos muito grandes e manter o envio dentro do limite aceito pelo processo. |
| Usar a API de Upload Multipart | Permite usar envio multipartido, quando disponível. | Utilize apenas quando houver necessidade técnica ou arquivos maiores que exijam esse comportamento. |
|
|---|
Na aba Dados, são configuradas opções relacionadas à quantidade de arquivos aceitos e ao comportamento do envio quando o componente estiver oculto por uma condição.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Vários valores | Permite que o usuário envie mais de um arquivo no mesmo componente. | Utilize quando o processo aceitar múltiplos anexos para a mesma solicitação. |
| Usar variável para preencher opções | Permite utilizar uma variável para preencher valores, quando disponível. | Utilize quando o comportamento do componente depender de uma informação previamente definida no processo. |
| Variável de opções | Define a variável BPMN que contém a lista de opções, quando o uso de variável estiver habilitado. | Utilize apenas quando houver configuração específica do processo para controle de opções. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o componente estiver oculto por uma condição. | Mantenha habilitado quando o arquivo não deve ser considerado se o componente não estiver visível ao usuário. |
|
|---|
Na aba Validação, são definidas as regras que controlam se o envio de arquivo será exigido antes da conclusão do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Obrigatório | Define se o usuário deve anexar um arquivo antes de enviar o formulário. | Utilize quando o anexo for indispensável para análise ou continuidade do processo. |
| Validar quando oculto | Define se o componente será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em componentes exibidos por condição. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre o arquivo necessário. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o componente Upload de arquivo conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o componente será exibido ou ocultado conforme a condição configurada. | Utilize quando o envio do arquivo só for necessário a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir o Upload de arquivo. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o componente seja exibido ou ocultado. |
|
|---|
Boas práticas
O componente Upload de arquivo deve apresentar instruções claras sobre qual documento precisa ser anexado. O rótulo deve indicar o tipo de arquivo esperado, evitando nomes genéricos como “Arquivo” ou “Anexo” quando o processo exigir um documento específico.
A descrição e a dica de preenchimento devem ser utilizadas para informar formatos aceitos, limite de tamanho e cuidados com a qualidade do arquivo. Em documentos digitalizados ou imagens, recomenda-se orientar o usuário a enviar arquivos legíveis.
Sempre que o processo exigir apenas um documento, mantenha o envio de múltiplos valores desabilitado. Quando mais de um arquivo for aceito, habilite essa opção e informe na descrição quais documentos podem ser enviados.
Configure o tamanho máximo conforme a necessidade real do processo. Limites muito altos podem gerar arquivos desnecessariamente pesados, enquanto limites muito baixos podem impedir o envio de documentos válidos.
Quando houver restrição de formato, configure os tipos e o padrão de arquivo de forma coerente. Essa prática reduz erros de envio e facilita a análise posterior dos anexos.
A opção de exibir como imagem deve ser usada quando a visualização do arquivo no formulário contribuir para a conferência do conteúdo. Para documentos que serão baixados ou analisados separadamente, essa opção pode não ser necessária.
Quando o componente estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se o campo aparece e desaparece corretamente e se o valor será omitido quando estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário como uma área para envio de arquivo. O usuário poderá arrastar o arquivo para o campo ou clicar para procurá-lo no dispositivo, conforme o comportamento disponível na interface. Se o componente estiver configurado como obrigatório, o sistema impedirá o envio do formulário até que um arquivo válido seja anexado. Caso existam regras de formato, tamanho ou exibição condicional, o sistema aplicará essas validações conforme a configuração definida.
Seleção estática
O componente Seleção estática permite incluir, no formulário, um campo de lista suspensa com opções cadastradas manualmente pelo responsável pela configuração. Ele deve ser utilizado quando o usuário precisa selecionar uma alternativa entre valores fixos, conhecidos previamente e mantidos diretamente no próprio formulário.
No Betha BPM, esse componente é apresentado como Componente de Seleção. As opções são configuradas na aba Dados, em Valores da Fonte de Dados, onde cada item possui um rótulo, exibido ao usuário final, e um valor, utilizado internamente pelo sistema.
Quando utilizar
Utilize o componente Seleção estática quando as opções disponíveis para o usuário forem conhecidas previamente e não depender de consulta a cadastros, integrações ou variáveis externas. Esse componente é indicado para listas pequenas, estáveis e fáceis de manter manualmente no formulário.
Alguns exemplos de uso são tipo de atendimento, prioridade, turno, categoria da solicitação, forma de contato, situação do pedido, classificação de ocorrência ou qualquer outro campo em que o usuário precise escolher uma opção entre valores fixos.
Quando as opções forem atualizadas com frequência ou dependerem de uma origem externa, recomenda-se utilizar Seleção dinâmica. Quando a escolha precisar ser exibida em botões de opção, recomenda-se utilizar Múltipla escolha. Quando a resposta for apenas uma confirmação marcada ou desmarcada, recomenda-se utilizar Caixa de seleção.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza um campo de lista suspensa. Ao clicar no campo, o sistema apresenta as opções configuradas. Depois que o usuário seleciona uma opção, o valor escolhido passa a ser exibido no campo.
Quando a pesquisa está habilitada, o campo também permite digitar parte do texto para localizar uma opção na lista. Esse comportamento é útil quando a lista possui várias alternativas, pois facilita a localização do item desejado sem que o usuário precise percorrer todos os valores manualmente.
Na área de Pré-visualização, é possível conferir como o componente será apresentado ao usuário final antes de salvar a configuração. Essa visualização ajuda a validar o rótulo, o formato do campo, a abertura da lista suspensa e o comportamento da pesquisa estática.
Configurações do componente
Ao adicionar o componente Seleção estática ao formulário, é possível ajustar suas propriedades de apresentação, dados, validação e exibição condicional. Essas configurações definem como o campo será exibido, quais opções estarão disponíveis e quais regras deverão ser respeitadas durante o preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome exibido junto ao componente. | Utilize um nome claro e objetivo, como “Tipo de atendimento”, “Prioridade” ou “Categoria da solicitação”. |
| Chave da propriedade | Define o identificador interno do componente para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com o rótulo do campo. |
| Posição do rótulo | Define onde o rótulo será exibido em relação ao campo. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Tipo de componente | Define o tipo de apresentação utilizado pela seleção. | Mantenha a configuração adequada ao comportamento desejado para a lista suspensa. |
| Texto de ajuda | Exibe uma orientação dentro do campo enquanto nenhuma opção foi selecionada. | Utilize para indicar a ação esperada, como “Selecione uma opção”. |
| Descrição | Exibe uma instrução complementar associada ao componente. | Utilize quando for necessário explicar o critério de escolha. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o usuário. | Utilize quando a escolha depender de uma regra específica do processo. |
| Oculto | Oculta o componente do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do componente. | Utilize com cuidado, pois o rótulo informa ao usuário qual informação deve ser selecionada. |
| Opções exclusivas | Controla a possibilidade de restringir opções repetidas, quando aplicável. | Utilize quando for necessário evitar seleção duplicada em cenários com múltiplos valores. |
| Foco inicial | Define se o componente receberá foco ao abrir o formulário. | Utilize apenas quando esse for o primeiro ou principal campo de preenchimento. |
| Desativado | Exibe o componente sem permitir alteração. | Utilize quando a opção deve ser apenas visualizada pelo usuário. |
|
|---|
Na aba Dados, são configuradas as opções que serão exibidas na lista suspensa e a forma como os valores serão tratados pelo formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Vários valores | Permite que o usuário selecione ou armazene mais de um valor no mesmo componente, quando disponível. | Utilize apenas quando o processo permitir mais de uma seleção. |
| Usar variável para preencher opções | Define se as opções serão preenchidas por uma variável do processo. | Para Seleção estática, mantenha como “Não”, pois as opções são cadastradas manualmente. |
| Valor padrão | Define uma opção inicial para o campo. | Use com cuidado para não induzir o usuário a manter uma opção sem avaliação. |
| Valores da Fonte de Dados | Define a lista de opções exibidas ao usuário. | Cadastre apenas opções válidas para o processo. |
| Rótulo | Define o texto da opção exibido na lista suspensa. | Utilize textos claros, curtos e compreensíveis. |
| Valor | Define o valor interno salvo quando a opção é selecionada. | Utilize valores simples, estáveis e padronizados. |
| Adicionar outro | Permite incluir novas opções na lista de valores. | Utilize para cadastrar todas as alternativas que devem estar disponíveis ao usuário. |
| Atualizar opções em | Define quando as opções devem ser atualizadas com base em outro componente, quando aplicável. | Utilize apenas quando a lista depender de alteração em outro campo. |
| Atualizar opções ao desfocar | Define se as opções devem ser atualizadas quando o usuário sair de determinado campo. | Utilize quando a atualização depender da finalização do preenchimento de outro componente. |
| Limpar valor ao atualizar opções | Remove o valor selecionado quando as opções forem atualizadas. | Recomenda-se habilitar quando a seleção anterior puder se tornar inválida após a atualização da lista. |
| Habilitar pesquisa estática | Permite pesquisar entre as opções cadastradas manualmente. | Recomenda-se habilitar quando a lista possuir quantidade relevante de opções. |
| Limite de pesquisa | Define o limite utilizado para executar a pesquisa estática. | Ajuste conforme a necessidade de busca e o comportamento esperado no formulário. |
| Usar pesquisa exata | Define se a pesquisa deve considerar correspondência exata. | Utilize quando o usuário precisar localizar opções por termos específicos. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o componente estiver oculto por uma condição. | Mantenha habilitado quando a resposta não deve ser considerada se o campo não estiver visível. |
|
|---|
Na aba Validação, são definidas as regras que controlam se a seleção feita pelo usuário será aceita pelo formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Validar em | Define o momento em que a validação será aplicada. | Utilize a configuração padrão, salvo quando houver necessidade específica de validar em outro momento. |
| Obrigatório | Define se o usuário deve selecionar uma opção antes do envio do formulário. | Utilize quando a escolha for indispensável para a continuidade do processo. |
| Permitir apenas valores disponíveis | Restringe o preenchimento aos valores configurados no componente. | Recomenda-se manter habilitado quando o campo deve aceitar somente opções cadastradas. |
| Validar quando oculto | Define se o componente será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em componentes exibidos por condição. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre como corrigir a seleção. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar a Seleção estática conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o componente será exibido ou ocultado conforme a condição configurada. | Utilize quando a seleção só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir a Seleção estática. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o componente seja exibido ou ocultado. |
|
|---|
Boas práticas
A Seleção estática deve ser utilizada quando as opções forem fixas e conhecidas no momento da configuração do formulário. Essa prática ajuda a manter o preenchimento padronizado e evita respostas escritas de formas diferentes para uma mesma informação.
O rótulo deve indicar claramente o que o usuário precisa selecionar. Evite nomes genéricos como “Seleção” ou “Opção”. Prefira rótulos que representem o conteúdo da lista, como “Tipo de atendimento”, “Categoria da solicitação” ou “Prioridade”.
As opções devem ser objetivas, curtas e organizadas em uma ordem lógica. Dependendo do contexto, a lista pode ser organizada por ordem alfabética, ordem de prioridade ou sequência natural do processo.
Evite listas muito longas em Seleção estática. Quando houver muitas opções ou quando os valores puderem mudar com frequência, a Seleção dinâmica tende a ser mais adequada, pois reduz a necessidade de manutenção manual do formulário.
O valor interno das opções deve ser definido com cuidado, pois pode ser utilizado em regras, condições, integrações e relatórios. Após o formulário entrar em uso, alterações nesses valores podem impactar o processamento das informações já registradas.
Evite configurar valor padrão quando a escolha exigir decisão consciente do usuário. Uma opção previamente selecionada pode fazer com que o formulário seja enviado com uma resposta que o usuário não avaliou.
Quando a lista possuir poucas opções, a pesquisa estática pode ser desnecessária. Quando a lista for maior, habilitar a pesquisa pode facilitar a localização da opção correta pelo usuário.
Quando o componente estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ele aparece e desaparece corretamente e se o valor será omitido quando estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário como um campo de lista suspensa. O usuário deverá clicar no campo, visualizar as opções disponíveis e selecionar a alternativa adequada. Se a pesquisa estática estiver habilitada, o usuário poderá digitar parte do texto para localizar uma opção na lista. Se o componente estiver configurado como obrigatório, o sistema impedirá o envio do formulário até que uma opção válida seja selecionada.
Seleção dinâmica
O componente Seleção dinâmica permite incluir, no formulário, um campo de lista suspensa cujas opções são carregadas a partir de uma fonte de dados configurada. Ele deve ser utilizado quando o usuário precisa selecionar uma opção entre valores mantidos fora do formulário, como registros de uma base, cadastros, ativos ou informações consultadas de forma dinâmica.
No Betha BPM, esse componente é apresentado como Componente de Seleção dinâmica. Sua principal característica é a aba Configurações Fonte Dados, na qual são definidos a fonte consultada, o ativo, os campos retornados e o campo utilizado para busca. Dessa forma, o formulário pode apresentar opções atualizadas conforme os dados disponíveis na origem configurada.
|
|---|
Quando utilizar
Utilize o componente Seleção dinâmica quando as opções apresentadas ao usuário dependerem de uma fonte de dados e não devam ser cadastradas manualmente no formulário. Esse componente é indicado para listas que podem mudar com frequência, que possuem muitos registros ou que precisam refletir informações mantidas em outro local.
Alguns exemplos de uso são seleção de unidade responsável, setor, servidor, fornecedor, município, categoria cadastrada, tipo de serviço, local de atendimento, responsável pela análise ou qualquer outra informação que precise ser consultada em uma fonte de dados.
Quando a lista for pequena, fixa e raramente alterada, recomenda-se utilizar Seleção estática. Quando a escolha precisar ser apresentada por botões de opção, recomenda-se utilizar Múltipla escolha. Quando a resposta for apenas uma confirmação marcada ou desmarcada, recomenda-se utilizar Caixa de seleção.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza um campo de lista suspensa. Ao clicar no campo, o sistema apresenta as opções disponíveis conforme a fonte de dados configurada. Depois que o usuário seleciona uma opção, o valor escolhido passa a ser exibido no componente.
O campo pode apresentar um texto de ajuda enquanto nenhuma opção foi selecionada, orientando o usuário sobre a ação esperada. Na pré-visualização, é possível conferir como o componente será exibido ao usuário final antes de salvar a configuração.
A Seleção Dinâmica depende diretamente da configuração da fonte de dados. Para que as opções sejam exibidas corretamente, é necessário informar a fonte, o ativo, o campo de listagem, os campos que serão consultados e o campo de busca. Esses dados determinam o que será carregado, como as opções serão apresentadas e como o usuário poderá localizar uma opção na lista.
Configurações do componente
Ao adicionar o componente Seleção dinâmica ao formulário, é possível ajustar suas propriedades de apresentação, dados, configurações da fonte de dados, validação e exibição condicional. Essas configurações definem como o campo será exibido, de onde as opções serão carregadas, quais informações serão apresentadas ao usuário e quais regras deverão ser respeitadas durante o preenchimento.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome exibido junto ao componente. | Utilize um nome claro e objetivo, como “Unidade responsável”, “Município”, “Fornecedor” ou “Tipo de serviço”. |
| Chave da propriedade | Define o identificador interno do componente para armazenamento, regras e integrações. | Utilize uma chave curta, sem espaços e coerente com o rótulo do campo. |
| Posição do rótulo | Define onde o rótulo será exibido em relação ao campo. | Mantenha a posição superior quando quiser preservar a leitura padrão do formulário. |
| Texto de ajuda | Exibe uma orientação dentro do campo enquanto nenhuma opção foi selecionada. | Utilize para indicar a ação esperada, como “Selecione uma opção”. |
| Descrição | Exibe uma instrução complementar associada ao componente. | Utilize quando for necessário explicar o critério de escolha ou a origem da informação. |
| Dica de preenchimento | Permite incluir uma orientação adicional para auxiliar o usuário. | Utilize quando a seleção depender de uma regra específica do processo. |
| Oculto | Oculta o componente do formulário. | Utilize apenas quando o campo precisar existir para regras internas, mas não deve ser exibido ao usuário. |
| Ocultar rótulo | Oculta o rótulo visual do componente. | Utilize com cuidado, pois o rótulo informa ao usuário qual informação deve ser selecionada. |
| Foco inicial | Define se o componente receberá foco ao abrir o formulário. | Utilize apenas quando esse for o primeiro ou principal campo de preenchimento. |
| Desativado | Exibe o componente sem permitir alteração. | Utilize quando a opção deve ser apenas visualizada pelo usuário. |
|
|---|
Na aba Dados, são configuradas opções relacionadas ao comportamento do valor armazenado e ao envio das informações quando o componente estiver oculto por uma condição.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Vários valores | Permite que o usuário selecione ou armazene mais de um valor no mesmo componente, quando disponível. | Utilize apenas quando o processo permitir mais de uma seleção para o mesmo campo. |
| Usar variável para preencher opções | Define se as opções serão preenchidas por uma variável do processo. | Utilize somente quando houver necessidade de alimentar o componente a partir de uma variável específica. |
| Valor padrão | Define uma opção inicial para o campo, quando disponível. | Use com cuidado para não induzir o usuário a manter uma opção sem avaliação. |
| Omitir valor dos dados de envio quando condicionalmente oculto | Define se o valor será omitido quando o componente estiver oculto por uma condição. | Mantenha habilitado quando a resposta não deve ser considerada se o campo não estiver visível. |
|
|---|
Na aba Configurações Fonte Dados, são definidas as informações necessárias para buscar e apresentar as opções da Seleção dinâmica.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Fonte | Define a fonte de dados que será consumida pelo componente. | Selecione a fonte correta para garantir que as opções sejam carregadas a partir da origem adequada. |
| Ativo | Define o ativo que será consultado dentro da fonte selecionada. | Selecione o ativo correspondente ao conjunto de dados que deve alimentar a lista. |
| Separador de campos de listagem | Define o caractere usado para separar os campos exibidos na listagem após a consulta do ativo. | Utilize quando a opção precisar exibir mais de uma informação ao usuário, como código e descrição. |
| Campo de listagem | Define o campo que será usado para apresentar os resultados após a consulta do ativo. | Utilize um campo claro e compreensível para o usuário final. |
| Campos | Define quais campos devem retornar na consulta ao ativo selecionado. | Selecione apenas os campos necessários para o preenchimento e para as regras do processo. |
| Campo de busca | Define o campo utilizado como filtro da pesquisa ao clicar e digitar no componente. | Utilize um campo que facilite a localização das opções, como nome, descrição ou identificador. |
|
|---|
Na aba Validação, são definidas as regras que controlam se a seleção feita pelo usuário será aceita pelo formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Validar em | Define o momento em que a validação será aplicada. | Utilize a configuração padrão, salvo quando houver necessidade específica de validar em outro momento. |
| Obrigatório | Define se o usuário deve selecionar uma opção antes do envio do formulário. | Utilize quando a escolha for indispensável para a continuidade do processo. |
| Validar quando oculto | Define se o componente será validado mesmo quando estiver oculto. | Utilize com cuidado, especialmente em componentes exibidos por condição. |
| Mensagem de erro personalizada | Permite definir a mensagem exibida quando a validação não for atendida. | Utilize para orientar o usuário de forma clara sobre como corrigir a seleção. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar a Seleção dinâmica conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o componente será exibido ou ocultado conforme a condição configurada. | Utilize quando a seleção só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir a Seleção dinâmica. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o componente seja exibido ou ocultado. |
|
|---|
Boas práticas
A Seleção dinâmica deve ser utilizada quando as opções dependerem de uma fonte de dados e não puderem ser mantidas manualmente no formulário. Essa prática reduz retrabalho, evita listas desatualizadas e melhora a confiabilidade das informações apresentadas ao usuário.
O rótulo deve indicar claramente o que o usuário precisa selecionar. Evite nomes genéricos como “Seleção” ou “Opção”. Prefira rótulos que representem o conteúdo da lista, como “Unidade responsável”, “Município”, “Fornecedor” ou “Tipo de serviço”.
A fonte de dados deve ser testada antes da publicação do formulário. Verifique se as opções são carregadas corretamente, se a lista apresenta informações compreensíveis e se o valor selecionado é armazenado conforme esperado.
O campo de listagem deve ser definido com foco na compreensão do usuário final. Sempre que possível, utilize nomes, descrições ou identificações claras, evitando apresentar apenas códigos internos. Quando for necessário exibir mais de uma informação, utilize o separador de campos de listagem para organizar a apresentação.
O campo de busca deve facilitar a localização da opção desejada. Para listas de pessoas, unidades ou serviços, geralmente é mais adequado utilizar campos textuais, como nome ou descrição, em vez de identificadores técnicos.
Selecione apenas os campos necessários no retorno da consulta. Campos em excesso podem dificultar a manutenção da configuração e trazer informações que não serão utilizadas no processo.
Evite configurar valor padrão quando a escolha exigir decisão consciente do usuário. Uma opção previamente selecionada pode fazer com que o formulário seja enviado com uma resposta que o usuário não avaliou.
Quando o componente estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ele aparece e desaparece corretamente e se o valor será omitido quando estiver oculto, conforme a regra definida.
Após configurado, o componente será exibido no formulário como um campo de lista suspensa. O usuário deverá clicar no campo, localizar a opção desejada e selecioná-la. Se o componente estiver configurado como obrigatório, o sistema impedirá o envio do formulário até que uma opção válida seja selecionada. Caso a fonte de dados não retorne opções ou esteja configurada incorretamente, o campo poderá não apresentar resultados, impedindo o preenchimento adequado.
Layout
Nesta seção, apresentamos uma explicação pormenorizada de cada componente que integra a aba de Layout.
Dica
O componente Dica permite incluir, no formulário, um conteúdo informativo destinado a orientar o usuário durante o preenchimento. Ele deve ser utilizado quando for necessário apresentar instruções, explicações, avisos ou informações complementares relacionadas a um campo, a uma seção ou ao formulário como um todo.
No Betha BPM, esse componente é apresentado como Componente de Conteúdo. Ele possui um editor de texto que permite formatar a orientação exibida ao usuário, incluindo recursos como estilo de parágrafo, negrito, itálico, links, listas, alinhamento, imagens, citações, tabelas e outros elementos de formatação disponíveis na barra do editor.
Diferente dos componentes de preenchimento, a Dica não coleta informações do usuário. Sua função é apenas apresentar conteúdo de apoio para facilitar o entendimento do formulário e reduzir dúvidas durante o preenchimento.
|
|---|
Quando utilizar
Utilize o componente Dica quando o usuário precisar receber uma orientação antes de preencher uma informação ou tomar uma decisão no formulário. Esse componente é recomendado para explicar regras de preenchimento, indicar documentos necessários, apresentar critérios de análise, orientar sobre prazos, contextualizar uma etapa ou destacar informações importantes.
A Dica também pode ser utilizada no início de uma seção para explicar o objetivo dos campos que serão preenchidos em seguida. Nesses casos, ela ajuda o usuário a compreender o contexto antes de informar os dados solicitados.
Quando a orientação for curta e estiver diretamente relacionada a um único campo, a descrição do próprio campo pode ser suficiente. A Dica é mais adequada quando a informação precisa de maior destaque, quando se aplica a vários campos ou quando deve aparecer como um bloco independente dentro do formulário.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza o conteúdo configurado no local em que a Dica foi posicionada. Esse conteúdo pode aparecer antes de um campo, entre grupos de campos, no início de uma seção ou próximo de componentes que exigem orientação adicional.
A Dica não exige preenchimento, não possui interação obrigatória e não interfere diretamente no envio do formulário. Ela serve para orientar o usuário, mas não substitui validações, obrigatoriedades ou regras configuradas nos demais componentes.
No editor do componente, o responsável pela configuração pode escrever e formatar o conteúdo da Dica. A barra de edição permite aplicar formatações simples ao texto, como negrito, itálico, listas, alinhamento e inserção de links, entre outros recursos disponíveis. Abaixo do editor, a aba Apresentação permite configurar rótulo, chave da propriedade e ocultar o componente, se necessário. Já a aba Condicional permite definir regras para que a Dica seja exibida apenas em determinadas situações.
Configurações do componente
Ao adicionar uma Dica ao formulário, é possível ajustar o conteúdo exibido, suas informações de identificação e, quando necessário, regras de exibição condicional. Essas configurações determinam como a orientação será apresentada ao usuário final.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Conteúdo | Define o texto ou conteúdo informativo que será exibido no formulário. | Escreva uma orientação clara e diretamente relacionada ao contexto do preenchimento. |
| Editor de conteúdo | Permite formatar o texto da Dica por meio da barra de edição. | Utilize formatações simples e apenas quando ajudarem na leitura da orientação. |
| Rótulo | Define o nome interno ou identificação do componente. | Utilize um rótulo objetivo, como “Dica”, “Orientação sobre anexos” ou “Instrução de preenchimento”. |
| Chave da propriedade | Define o identificador interno do componente. | Utilize uma chave curta, sem espaços e coerente com o rótulo configurado. |
| Oculto | Oculta a Dica do formulário. | Utilize apenas quando o conteúdo precisar existir na configuração, mas não deve ser exibido ao usuário. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar a Dica conforme o valor informado em outro campo do formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se a Dica será exibida ou ocultada conforme a condição configurada. | Utilize quando a orientação só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir a Dica. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que a Dica seja exibida ou ocultada. |
|
|---|
Boas práticas
A Dica deve ser utilizada para melhorar a compreensão do formulário, sem sobrecarregar a tela com excesso de texto. O conteúdo deve ser claro, objetivo e relacionado ao ponto do formulário em que a Dica está posicionada.
Evite textos genéricos, como “Preencha corretamente” ou “Atenção ao formulário”. Prefira orientações específicas, como “Informe a data prevista para conclusão da atividade. Essa informação será utilizada para cálculo do prazo da solicitação.”
A formatação deve ser usada com moderação. Recursos como negrito, listas e links podem ajudar a destacar informações importantes, mas o uso excessivo pode prejudicar a leitura e deixar o formulário visualmente carregado.
Sempre que possível, posicione a Dica antes do campo ou da seção a que ela se refere. Uma orientação sobre anexos deve aparecer antes do Upload de arquivo. Uma orientação sobre critérios de seleção deve aparecer antes do componente de seleção. Uma orientação geral deve aparecer no início do formulário ou da seção correspondente.
Quando a Dica incluir links, verifique se o endereço está correto e se o usuário possui permissão para acessar o conteúdo indicado. Links quebrados ou inacessíveis podem gerar dúvidas e interromper o preenchimento.
Quando a Dica depender de uma resposta anterior, utilize a aba Condicional para exibi-la apenas quando for relevante. Isso evita que o usuário veja orientações que não se aplicam ao seu caso.
Após configurado, o componente será exibido no formulário como um conteúdo informativo. O usuário poderá ler a Dica para compreender melhor o preenchimento dos campos relacionados, mas não precisará interagir com ela para enviar o formulário.
Painel
O componente Painel permite agrupar campos relacionados dentro de uma mesma seção do formulário. Ele deve ser utilizado para organizar visualmente informações que pertencem ao mesmo contexto, facilitando o preenchimento pelo usuário e a leitura dos dados apresentados no processo.
Diferente dos componentes de preenchimento, o Painel não coleta uma informação diretamente. Sua função é estruturar o formulário, reunindo outros componentes em um bloco identificado por título e, quando configurado, com comportamento colapsável.
Quando utilizar
Utilize o componente Painel quando o formulário possuir muitos campos ou quando for necessário separar as informações por assunto. Ele é recomendado para organizar blocos como dados do solicitante, informações da solicitação, dados do atendimento, documentos anexados, análise técnica ou parecer final.
Esse componente contribui para deixar o formulário mais claro, principalmente em processos com várias etapas de preenchimento ou com grande volume de informações. Ao separar os campos em painéis, o usuário consegue compreender melhor quais dados pertencem a cada parte da solicitação.
Para formulários simples, com poucos campos, o uso de Painel pode não ser necessário. Nesses casos, a organização pode ser feita apenas pela ordem dos componentes ou por textos de orientação. O Painel é mais indicado quando há necessidade de criar seções visuais bem delimitadas.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza o Painel como uma área agrupada, identificada por um título. Dentro dele, são exibidos os campos adicionados durante a configuração do formulário.
Quando a opção Colapsável estiver habilitada, o Painel permite que o usuário abra ou feche a seção durante o preenchimento. Esse comportamento ajuda a reduzir a quantidade de informações visíveis na tela e facilita a navegação em formulários extensos.
Quando a opção Iniciar recolhido estiver habilitada, o Painel será apresentado inicialmente fechado. Essa configuração deve ser usada com cuidado, principalmente quando o Painel contém campos obrigatórios, pois o usuário pode não perceber que há informações pendentes dentro da seção.
Na área de Pré-visualização, é possível conferir como o Painel será exibido ao usuário final antes de salvar a configuração. Essa visualização mostra o título, a área do Painel e, quando habilitado, o ícone de expansão ou recolhimento.
Configurações do componente
Ao adicionar o componente Painel ao formulário, é possível ajustar suas propriedades de apresentação e exibição condicional. Essas configurações determinam como a seção será apresentada ao usuário final e como os componentes internos serão organizados.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Chave da propriedade | Define o identificador interno do Painel para organização, regras e estrutura do formulário. | Utilize uma chave curta, sem espaços e coerente com a finalidade da seção. |
| Título | Define o nome exibido no cabeçalho do Painel. | Utilize um título curto e representativo, como “Dados do solicitante”, “Informações da solicitação” ou “Anexos”. |
| Tema | Define a aparência visual do Painel, quando houver opções disponíveis. | Mantenha o tema padrão quando não houver necessidade de destaque visual específico. |
| Dica de preenchimento | Permite incluir uma orientação adicional associada ao Painel. | Utilize quando for necessário orientar o usuário sobre o conjunto de campos agrupados. |
| Colapsável | Permite que o usuário expanda ou recolha o Painel durante o preenchimento. | Recomendada para formulários extensos ou seções que não precisam ficar visíveis o tempo todo. |
| Iniciar recolhido | Define se o Painel será carregado fechado ao abrir o formulário. | Utilize quando a seção for complementar, opcional ou acessada apenas em situações específicas. |
| Oculto | Oculta o Painel do formulário. | Utilize apenas quando a seção precisar existir para regras internas, mas não deve ser exibida ao usuário. |
| Ocultar rótulo | Oculta o título visual do Painel. | Utilize com cuidado, pois o título ajuda o usuário a identificar o conteúdo da seção. |
| Desativado | Exibe o Painel sem permitir interação, quando aplicável. | Utilize apenas quando os componentes internos não devem ser alterados pelo usuário. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o Painel conforme o valor informado em outro campo do formulário. Essa configuração é útil quando uma seção inteira só deve aparecer em determinadas situações.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o Painel será exibido ou ocultado conforme a condição configurada. | Utilize quando a seção só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir o Painel. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o Painel seja exibido ou ocultado. |
|
|---|
Boas práticas
O Painel deve ser utilizado para organizar o formulário de maneira lógica. Antes de adicioná-lo, avalie quais campos pertencem ao mesmo contexto e qual título representa melhor esse conjunto de informações.
Evite criar painéis com apenas um campo, exceto quando houver uma necessidade visual ou de regra específica. O uso excessivo de painéis pode tornar o formulário mais longo e dificultar a navegação.
Também é recomendável manter uma ordem coerente entre as seções. Em geral, dados de identificação devem aparecer antes de informações específicas da solicitação, e dados de análise ou conclusão devem aparecer depois.
Quando o formulário for extenso, o recurso Colapsável pode melhorar a experiência do usuário, pois reduz a quantidade de informações visíveis ao mesmo tempo. No entanto, esse recurso deve ser usado com cuidado em seções obrigatórias, para evitar que o usuário não perceba que ainda há campos pendentes.
O título do Painel deve ser claro e direto. Evite nomes genéricos, como “Informações”, “Dados” ou “Outros”, quando for possível indicar melhor o conteúdo da seção. Títulos como “Dados do solicitante”, “Endereço de atendimento” e “Documentos anexados” ajudam o usuário a compreender a estrutura do formulário.
Quando o Painel estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ele aparece e desaparece corretamente e se os campos internos se comportam conforme a regra definida.
Após configurado, o Painel será exibido no formulário como uma seção visual contendo os campos adicionados em seu interior. O usuário deverá preencher os campos normalmente, respeitando as regras definidas em cada componente interno. Se o Painel estiver configurado como colapsável, o usuário poderá abrir ou fechar a seção durante o preenchimento. Essa organização facilita a navegação em formulários extensos e ajuda a apresentar as informações de forma mais clara.
Tabela
O componente Tabela permite organizar campos do formulário em uma estrutura composta por linhas e colunas. Ele deve ser utilizado quando as informações precisam ser apresentadas de forma tabular, facilitando a leitura, a comparação ou o preenchimento de dados relacionados entre si.
Diferente dos componentes de preenchimento, a Tabela não coleta uma informação diretamente. Sua função é estruturar visualmente outros componentes dentro das células, permitindo que o formulário apresente informações de maneira mais organizada.
Quando utilizar
Utilize o componente Tabela quando houver necessidade de organizar informações em formato de linhas e colunas. Esse componente é recomendado para situações em que a disposição tabular facilita a compreensão do usuário, como comparação de dados, preenchimento de valores por categoria, organização de períodos, apresentação de quantidades ou estruturação de informações em um mesmo padrão visual.
A Tabela pode ser utilizada, por exemplo, para organizar campos de valores por item, dados por mês, informações por etapa, campos de conferência ou conjuntos de respostas que precisam ser comparados lado a lado.
Para simples separação visual entre seções do formulário, recomenda-se utilizar componentes como Painel ou Separador. A Tabela é mais indicada quando a relação entre as informações depende da leitura em linhas e colunas.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza a Tabela conforme a quantidade de linhas e colunas configurada. Os campos adicionados às células são preenchidos normalmente, respeitando o comportamento e as regras de cada componente inserido.
A Tabela funciona como uma estrutura visual. Isso significa que ela organiza os campos, mas as validações, obrigatoriedades e regras de preenchimento pertencem aos componentes internos. Por exemplo, se uma célula contém um campo Número obrigatório, a regra de obrigatoriedade deve ser configurada no próprio campo Número, e não na Tabela.
Na área de Pré-visualização, é possível conferir como a Tabela será exibida ao usuário final antes de salvar a configuração. Essa visualização permite verificar a quantidade de linhas e colunas, o alinhamento das células e a aparência geral da estrutura.
Configurações do componente
Ao adicionar o componente Tabela ao formulário, é possível ajustar suas propriedades de apresentação e exibição condicional. Essas configurações determinam a estrutura da Tabela, sua aparência visual e as regras para exibição no formulário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome ou identificação da Tabela. | Utilize um rótulo claro, relacionado ao conjunto de informações organizadas na estrutura. |
| Chave da propriedade | Define o identificador interno da Tabela para organização, regras e estrutura do formulário. | Utilize uma chave curta, sem espaços e coerente com a finalidade da Tabela. |
| Número de linhas | Define quantas linhas serão exibidas na Tabela. | Configure conforme a quantidade de registros, categorias ou períodos que precisam ser apresentados. |
| Número de colunas | Define quantas colunas serão exibidas na Tabela. | Utilize apenas a quantidade necessária para manter a leitura clara. |
| Clonar componentes de linha | Replica os componentes configurados em uma linha para as demais linhas da Tabela, quando aplicável. | Utilize quando várias linhas devem seguir a mesma estrutura de preenchimento. |
| Alinhamento da célula | Define o alinhamento horizontal do conteúdo dentro das células. | Utilize alinhamento à esquerda para textos e avalie alinhamento centralizado ou à direita para dados curtos ou valores. |
| Listado | Aplica sombreamento alternado nas linhas da Tabela. | Utilize para melhorar a leitura em tabelas com várias linhas. |
| Bordado | Exibe bordas visíveis na Tabela. | Recomenda-se habilitar quando for importante separar visualmente as células. |
| Hover | Destaca uma linha quando o usuário posiciona o cursor sobre ela. | Utilize quando a Tabela tiver várias linhas e a leitura puder ser facilitada pelo realce visual. |
| Condensado | Reduz o espaçamento visual da Tabela. | Utilize apenas quando for necessário economizar espaço sem prejudicar a legibilidade. |
| Oculto | Oculta a Tabela do formulário. | Utilize apenas quando a estrutura precisar existir para regras internas, mas não deve ser exibida ao usuário. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar a Tabela conforme o valor informado em outro campo do formulário. Essa configuração é útil quando uma estrutura tabular só deve aparecer em determinadas situações.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se a Tabela será exibida ou ocultada conforme a condição configurada. | Utilize quando a Tabela só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir a Tabela. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que a Tabela seja exibida ou ocultada. |
|
|---|
Boas práticas
A Tabela deve ser utilizada quando a organização em linhas e colunas tornar o formulário mais compreensível. Antes de adicioná-la, avalie se a disposição tabular realmente facilita o preenchimento. Em formulários simples, uma sequência comum de campos pode ser mais clara do que uma Tabela.
Evite criar tabelas muito largas, com muitas colunas. Quanto maior o número de colunas, menor será o espaço disponível para cada campo, o que pode prejudicar a leitura e dificultar o preenchimento em telas menores.
Os campos inseridos nas células devem ter rótulos claros ou estar acompanhados de uma estrutura que deixe evidente o que deve ser preenchido. Quando o rótulo dos componentes internos for ocultado para deixar a Tabela mais limpa, a organização das linhas e colunas precisa ser suficiente para orientar o usuário.
Quando várias linhas seguirem a mesma estrutura, utilize a opção de clonar componentes de linha, se ela atender ao comportamento esperado. Isso ajuda a manter consistência entre as células e reduz o risco de configurações diferentes em linhas que deveriam ser iguais.
As opções visuais, como Listado, Bordado e Hover, devem ser usadas para melhorar a leitura. O uso de bordas é recomendado quando a separação entre as células precisa ficar evidente. O modo Condensado deve ser utilizado apenas quando o ganho de espaço não prejudicar a legibilidade.
A Tabela exige atenção especial em telas pequenas. Como a estrutura mantém linhas e colunas, a visualização pode ficar reduzida ou exigir rolagem horizontal. Antes de publicar o formulário, teste o comportamento em diferentes tamanhos de tela e avalie se a Tabela continua compreensível para o usuário.
Quando a Tabela estiver relacionada a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ela aparece e desaparece corretamente e se os componentes internos respeitam as regras configuradas.
Após configurada, a Tabela será exibida no formulário como uma estrutura organizada em linhas e colunas. O usuário deverá preencher os campos apresentados nas células, respeitando as orientações e validações de cada componente interno. Se houver campos obrigatórios dentro da Tabela, o sistema impedirá o envio do formulário até que esses campos sejam preenchidos corretamente. Caso a Tabela esteja configurada com exibição condicional, ela poderá aparecer ou permanecer oculta conforme as respostas informadas em outros campos.
Colunas
O componente Colunas permite organizar campos do formulário lado a lado, distribuindo os componentes em uma estrutura horizontal. Ele deve ser utilizado quando houver necessidade de melhorar o aproveitamento do espaço da tela e apresentar campos relacionados em uma mesma linha visual.
Diferente dos componentes de preenchimento, a Coluna não coleta informações diretamente. Sua função é estruturar o layout do formulário, permitindo que outros componentes sejam posicionados dentro de cada coluna.
No Betha BPM, esse componente é apresentado como Componente de Colunas. A configuração permite definir o rótulo, a chave da propriedade, as propriedades de cada coluna, o tamanho, a largura, a inclusão de novas colunas e o ajuste automático da estrutura.
Quando utilizar
Utilize o componente Coluna quando dois ou mais campos puderem ser apresentados lado a lado sem prejudicar a compreensão do usuário. Esse componente é recomendado para organizar campos curtos e relacionados, como telefone e e-mail, data inicial e data final, cidade e estado, número e complemento, quantidade e valor, ou informações que pertencem ao mesmo contexto de preenchimento.
A Coluna também pode ser utilizada para reduzir a altura do formulário quando há muitos campos simples. Ao distribuir informações em uma mesma linha, o formulário se torna mais compacto e pode exigir menos rolagem vertical.
Para informações extensas, campos que exigem leitura cuidadosa ou componentes com conteúdo longo, recomenda-se evitar o uso de colunas. Nesses casos, a apresentação em uma única coluna tende a ser mais clara para o usuário.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza os campos posicionados lado a lado, conforme a estrutura definida na configuração do componente. Cada campo inserido dentro de uma coluna mantém seu próprio comportamento, suas validações e suas regras de preenchimento.
A Coluna apenas controla a distribuição visual dos componentes. As informações continuam sendo preenchidas, validadas e registradas pelos campos internos.
Na aba Apresentação, é possível configurar as propriedades da estrutura de colunas. Em Propriedades da Coluna, cada linha representa uma coluna configurada, com definição de tamanho e largura. Também é possível adicionar novas colunas por meio da opção Adicionar coluna.
A opção Ajustar colunas automaticamente permite reorganizar a estrutura quando os componentes internos de uma coluna estiverem ocultos, conforme a regra aplicada ao formulário. Esse comportamento é útil em formulários com campos condicionais, pois evita que a estrutura fique com espaços vazios desnecessários.
Configurações do componente
Ao adicionar o componente Coluna ao formulário, é possível ajustar suas propriedades de apresentação e exibição condicional. Essas configurações determinam como os campos serão distribuídos na tela e quando a estrutura será exibida ao usuário.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome ou identificação do componente de Colunas. | Utilize um rótulo que represente o grupo de campos organizados na estrutura. |
| Chave da propriedade | Define o identificador interno do componente para organização, regras e estrutura do formulário. | Utilize uma chave curta, sem espaços e coerente com a finalidade da seção. |
| Propriedades da Coluna | Permite configurar as colunas que compõem a estrutura. | Defina apenas a quantidade de colunas necessária para manter a leitura clara. |
| Tamanho | Define o tamanho de tela usado como referência para a coluna. | Mantenha o tamanho adequado ao comportamento visual esperado no formulário. |
| Largura | Define quanto espaço a coluna ocupará na linha. | Distribua as larguras de forma equilibrada. Para duas colunas iguais, utilize largura 6 em cada uma. |
| Adicionar coluna | Permite incluir uma nova coluna na estrutura. | Utilize quando houver necessidade de posicionar mais campos lado a lado. |
| Ajustar colunas automaticamente | Reorganiza as colunas quando componentes internos estiverem ocultos, quando aplicável. | Utilize em formulários com campos condicionais para evitar espaços vazios na estrutura. |
| Oculto | Oculta o componente de Colunas do formulário. | Utilize apenas quando a estrutura precisar existir para regras internas, mas não deve ser exibida ao usuário. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o componente Coluna conforme o valor informado em outro campo do formulário. Essa configuração é útil quando uma estrutura inteira de campos só deve aparecer em determinadas situações.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se a estrutura de colunas será exibida ou ocultada conforme a condição configurada. | Utilize quando o grupo de campos só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir as colunas. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que as colunas sejam exibidas ou ocultadas. |
|
|---|
Boas práticas
A Coluna deve ser utilizada para organizar campos que tenham relação entre si e que possam ser compreendidos em conjunto. O objetivo é melhorar a disposição visual do formulário, não apenas reduzir espaço.
Evite criar muitas colunas na mesma linha. Quanto maior o número de colunas, menor será o espaço disponível para cada campo, o que pode prejudicar a leitura e o preenchimento. Em geral, duas colunas são suficientes para a maioria dos casos. Três colunas podem ser utilizadas em campos curtos e de fácil compreensão, desde que a visualização seja testada.
A largura das colunas deve ser configurada com atenção. Na estrutura baseada no Form.io, a distribuição da largura utiliza uma referência de 12 unidades. Assim, duas colunas com largura 6 e 6 ocupam a linha de forma equilibrada. Caso a soma das larguras ultrapasse esse limite, os campos podem ser deslocados para outra linha ou prejudicar a organização visual.
Também é importante avaliar o comportamento em telas menores. O Form.io indica que o componente Columns pode ser usado para exibir componentes lado a lado, economizar espaço vertical e colapsar quando o formulário é renderizado em dispositivo móvel. Por isso, sempre teste o formulário em resoluções diferentes antes da publicação.
Quando houver campos condicionais dentro das colunas, avalie a opção Ajustar colunas automaticamente. Essa configuração pode ajudar a reorganizar a estrutura quando uma coluna deixar de exibir seus componentes internos.
Evite utilizar Coluna para conteúdos longos, como áreas de texto extensas, tabelas grandes ou listas com muitas opções. Esses componentes costumam ter melhor leitura quando ocupam a largura total do formulário.
Após configurada, a Coluna será exibida no formulário como uma distribuição horizontal de campos. O usuário deverá preencher os componentes normalmente, respeitando as regras de cada campo interno. Caso existam campos obrigatórios dentro das colunas, o sistema impedirá o envio do formulário até que esses campos sejam preenchidos corretamente. Se a estrutura estiver configurada com exibição condicional, ela poderá aparecer ou permanecer oculta conforme as respostas informadas em outros campos.
Separador
O componente Separador permite inserir uma divisão visual entre partes do formulário. Ele deve ser utilizado para organizar melhor a leitura das informações, indicando ao usuário que um bloco de campos foi encerrado e que uma nova parte do formulário será iniciada. Quando configurado, ele é exibido na pré-visualização como uma linha horizontal, sem campo de preenchimento e sem necessidade de interação do usuário.
Quando utilizar
Utilize o componente Separador quando for necessário criar uma divisão simples entre seções do formulário. Ele é recomendado para separar blocos de informações que pertencem a contextos diferentes, como dados do solicitante, informações da solicitação, anexos, observações e dados de análise.
O Separador é útil principalmente em formulários com muitos campos, nos quais a leitura contínua pode dificultar a identificação das partes do preenchimento. Ao inserir uma divisão visual, o usuário consegue perceber com mais facilidade a transição entre um conjunto de informações e outro.
Para seções que precisam de título, agrupamento visual mais evidente ou comportamento recolhível, recomenda-se utilizar o componente Painel. O Separador é mais adequado quando a intenção é apenas criar uma divisão visual simples, sem agrupar os campos em uma estrutura própria.
Comportamento do componente
Ao acessar o formulário, o usuário visualiza o Separador como uma linha ou divisão horizontal posicionada entre os componentes. Ele não exige interação, não possui campo de preenchimento e não interfere diretamente no envio do formulário.
Na área de Pré-visualização, é possível conferir como o Separador será exibido ao usuário final antes de salvar a configuração. Nos prints enviados, a pré-visualização apresenta uma linha horizontal, indicando que o componente será utilizado apenas como elemento visual de separação.
Na aba Apresentação, é possível configurar o rótulo, a chave da propriedade e a opção de ocultar o componente. Na aba Condicional, é possível definir regras para que o Separador seja exibido ou ocultado conforme o valor informado em outro campo do formulário.
Configurações do componente
Ao adicionar um Separador ao formulário, é possível ajustar suas propriedades de identificação e exibição. Essas configurações determinam como o componente será tratado na estrutura do formulário e quando será apresentado ao usuário final.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Rótulo | Define o nome ou identificação do componente. | Utilize um rótulo objetivo, como “Separador”, “Separador de seções” ou um nome relacionado à divisão criada. |
| Chave da propriedade | Define o identificador interno do componente para organização e regras do formulário. | Utilize uma chave curta, sem espaços e coerente com a finalidade do componente. |
| Oculto | Oculta o Separador do formulário. | Utilize apenas quando o componente precisar existir na estrutura, mas não deve ser exibido ao usuário. |
|
|---|
Na aba Condicional, é possível definir regras para exibir ou ocultar o Separador conforme o valor informado em outro campo do formulário. Essa configuração é útil quando a própria seção separada também depende de uma resposta anterior.
| Configuração | Descrição | Recomendação de uso |
|---|---|---|
| Este componente deve ser exibido | Define se o Separador será exibido ou ocultado conforme a condição configurada. | Utilize quando a divisão visual só fizer sentido a partir de uma resposta anterior. |
| Quando o componente do formulário | Define qual componente será usado como referência para a condição. | Selecione o campo que determina a necessidade de exibir o Separador. |
| Tem o valor | Define o valor que ativa a condição. | Informe o valor esperado para que o Separador seja exibido ou ocultado. |
|
|---|
Boas práticas
O Separador deve ser utilizado para melhorar a organização visual do formulário. Antes de adicioná-lo, avalie se a divisão realmente ajuda o usuário a compreender a estrutura do preenchimento.
Evite inserir muitos separadores em sequência ou utilizá-los entre campos que pertencem ao mesmo contexto. O uso excessivo pode fragmentar o formulário e tornar a leitura menos fluida.
Quando a divisão entre seções precisar de identificação textual, utilize uma Dica, um título ou um Painel, conforme os componentes disponíveis no ambiente. O Separador sozinho indica uma mudança visual, mas não explica necessariamente o conteúdo da próxima seção.
Também é importante manter consistência. Se o formulário utiliza Separador para dividir grandes blocos de informação, siga o mesmo padrão ao longo de toda a estrutura. Isso ajuda o usuário a reconhecer a lógica de organização do formulário.
Quando o Separador estiver relacionado a uma condição, teste o comportamento antes de publicar o formulário. Verifique se ele aparece e desaparece corretamente e se acompanha a seção à qual está relacionado.
Após configurado, o Separador será exibido no formulário como uma divisão visual entre componentes. O usuário não precisará interagir com ele para continuar o preenchimento. Sua principal finalidade é tornar o formulário mais organizado, ajudando o usuário a identificar a separação entre blocos de informações e a avançar pelo preenchimento com mais clareza.



























































