Modelar formulário responsivo
Pré-requisitos
- Acesso ao menu Cadastro > Formulário (FO005).
- Formulário responsivo previamente cadastrado.
Apresentação
Após a criação da tabela e do formulário responsivo, é possível acessar o editor de formulário para realizar a modelagem.
Durante a modelagem, são incluídos todos os campos que deverão ser preenchidos pelos usuários durante a execução do formulário. Além disso, ao modelar o formulário, podem ser criadas regras, expressões, variáveis e funções para manipular os campos do formulário e os dados inseridos neles.
Veja como realizar a modelagem do formulário responsivo:
Modelar formulário responsivo
1. Acesse o menu Cadastro > Formulário (FO005).
2. Selecione o formulário responsivo previamente cadastrado.
3. Clique na seta ao lado do botão
e selecione a opção Editor de formulário.
4. Com a tela do editor aberta, realize a modelagem do formulário responsivo:
• O editor de formulário responsivo não possui o botão Salvar, pois todas as alterações realizadas durante a modelagem são salvas automaticamente pelo sistema.
• Se o uso do formulário responsivo no aplicativo off-line for habilitado, algumas regras, expressões, propriedades e componentes não serão permitidos. Confira quais componentes avançados e de integração poderão ser utilizados:
- Avançado: Arquivo, Assinatura, Lista avançada e Texto rico.
- Integração: Anexo.
• Se o formulário estiver com o controle de revisão do tipo Simplificado habilitado, o botão Aceitar revisão será exibido no editor. Confira o artigo Revisar formulário para mais detalhes.
Configurações disponíveis para os elementos do formulário
Após incluir cada um dos componentes desejados, é possível utilizar o painel Configurações para editá-los.
Veja as opções de edição disponíveis para cada componente:
Exibição
| Painel |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais no painel.
• Apresentação: defina como o painel será apresentado no formulário:
|
| Seção |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais na seção.
• Apresentação: defina como a seção será apresentada no formulário:
|
| Caixa |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado. • Ajustes: permite realizar ajustes visuais na caixa.
• Apresentação: marque a opção Escondido para que a caixa fique escondida até que determinada informação preenchida em algum outro campo a torne visível, através da execução de alguma regra. |
| Título |
• Título: informe o nome que será apresentado como título.
• Altura: defina a altura da área do título.
• Ajustes: permite realizar ajustes visuais no título.
• Fonte: no campo Tamanho da fonte, defina o tamanho da fonte do título. No campo Cor da fonte, defina a cor da fonte do título. Utilize as opções Negrito e Itálico para deixar o título em negrito e/ou itálico.
• Apresentação: marque a opção Escondido para que o título fique escondido e somente seja apresentado se alguma regra o tornar visível. |
| Imagem |
• Título: informe um nome para a imagem.
• Altura: defina a altura da imagem.
• Imagem: no campo Exibir, defina se a imagem apresentada será o logo padrão, o logo do relatório ou uma imagem. Se a escolha for uma imagem, utilize o botão Selecionar imagem para fazer o upload da imagem desejada.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: marque a opção Escondido para que a imagem fique escondida até que determinada informação preenchida em algum outro campo a torne visível, através da execução de alguma regra.
• Regras: selecione a regra que será executada ao clicar na imagem. |
Básico
| Texto |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Placeholder: informe o texto que deverá aparecer escrito no campo do formulário. Este recurso pode ser utilizado para indicar ao usuário como este campo deve ser preenchido.
• Configurar máscara: permite configurar uma máscara de preenchimento para o campo texto. A máscara tem três tipos de configuração: Formato livre, Máscara simples e Expressão regular. Com isso, podem ser definidos padrões de preenchimento, como: número de telefone, código postal, cadastro de pessoa física, placa de carro, entre outros. Após configurar a máscara, clique no botão Aplicar.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: defina as regras que serão executadas ao focalizar e/ou remover o foco do campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
|
Parágrafo
|
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Placeholder: informe o texto que deverá aparecer escrito no campo do formulário. Este recurso pode ser utilizado para indicar ao usuário como este campo deve ser preenchido.
• Altura: defina a altura que o parágrafo terá.
• Limites: informe o limite mínimo e máximo de caracteres que poderão ser preenchidos no parágrafo.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: defina as regras que serão executadas ao focalizar e/ou remover o foco do campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
| Inteiro |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Placeholder: informe o texto que deverá aparecer escrito no campo do formulário. Este recurso pode ser utilizado para indicar ao usuário como este campo deve ser preenchido.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: defina as regras que serão executadas ao focalizar e/ou remover o foco do campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela.
Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
| Decimal |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Placeholder: informe o texto que deverá aparecer escrito no campo do formulário. Este recurso pode ser utilizado para indicar ao usuário como este campo deve ser preenchido.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: defina as regras que serão executadas ao focalizar e/ou remover o foco do campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
| Data |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
| Hora |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: defina as regras que serão executadas ao focalizar e/ou remover o foco do campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
|
Caixa de seleção
|
• Título: defina um título para o campo.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
|
Grupo de opções
|
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado.
Para adicionar opções ao grupo, clique no botão Editar campo. Na tela que será apresentada, clique em Adicionar opção e inclua as opções deste grupo. É possível alterar a ordem de exibição das opções, arrastando-as para a ordem desejada. Também é possível inativá-las, basta desabilitar o botão localizado ao lado do nome do campo. |
| Lista simples |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado.
Para adicionar opções à lista, é necessário clicar no botão Editar campo. Na tela que será apresentada, clique em Adicionar opção e inclua as opções desta lista. É possível alterar a ordem de exibição das opções, arrastando-as para a ordem desejada. Também é possível inativá-las, basta desabilitar o botão localizado ao lado do nome do campo. |
| Botão |
• Título: defina um título para o botão.
Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que este botão for clicado. |
| Data e hora |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
Os componentes Grupo de opções e Lista simples permitem apenas 20 alternativas. Portanto, se for necessária uma quantidade maior de alternativas utilize a o componente Lista avançada.
Avançado
| Arquivo |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área do arquivo.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação da área do arquivo:
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
| Assinatura |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área da assinatura.
• Tipo de assinatura: defina se a assinatura será uma Assinatura escrita ou uma Imagem da assinatura do usuário, cadastrada na tela de dados do usuário. A primeira opção permite escrever em uma área pré-determinada, enquanto a segunda opção possibilita adicionar uma imagem da assinatura nos dados do usuário e utilizar essa imagem no formulário. Se for utilizada uma imagem, será solicitada a senha/contrassenha do usuário para efetuar a assinatura no formulário.
• Restrito ao usuário: é possível restringir a assinatura para que somente um determinado usuário possa assinar, como o CEO da empresa. Caso seja necessário, defina o usuário que terá permissão para assinar o formulário.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação da área da assinatura:
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
| Lista avançada |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Tabela e campos: clique neste botão para definir a tabela e o campo que contém os valores que poderão ser selecionados neste campo. Confira o artigo Criar lista de valores no formulário responsivo para saber como configurar este campo.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo:
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo. |
| Texto rico |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Salvar campo em: cada campo do formulário deve estar associado a um campo da tabela. Selecione o campo da tabela previamente cadastrado que será associado ao campo do formulário ou utilize o botão Incluir campo para registrar um novo campo na tabela. Obs.: caso seja selecionado um campo da tabela que esteja sendo utilizado em outro campo do formulário, será acrescentado um valor sequencial ao final do nome do campo que está sendo utilizado. |
| Tabela |
• Título: defina um título para a tabela/grid.
• Altura: defina a altura da área da tabela/grid.
• Tabela e campos: clique neste botão para definir a tabela e os campos que serão apresentados como coluna da tabela/grid. Confira o artigo Como utilizar tabelas nos campos do formulário responsivo para saber como configurar o campo.
• Fonte de dados: clique neste botão para configurar uma fonte de dados SQL ou REST para importar registros para dentro da tabela. Este campo somente será habilitado depois que a tabela for definida no botão Tabela e campos. Para obter mais detalhes sobre a configuração de grids ou fontes de dados, consulte os artigos:
• Apresentação: defina como será a apresentação da tabela:
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo. |
| Tabela editável |
• Título: defina um título para a tabela/grid.
• Altura: defina a altura da área da tabela/grid.
• Tabela e campos: clique neste botão para definir a tabela e os campos que serão apresentados como coluna da tabela/grid. Confira o artigo Como utilizar tabelas nos campos do formulário responsivo para saber como configurar o campo.
• Fonte de dados: clique neste botão para configurar uma fonte de dados SQL ou REST para importar registros para dentro da tabela. Este campo somente será habilitado depois que a tabela for definida no botão Tabela e campos.
• Apresentação: defina como será a apresentação da tabela:
|
| Lista de fonte SQL |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Fonte de dados: clique neste botão para definir o conjunto de dados que contém os valores que poderão ser selecionados neste campo. Confira o artigo Buscar dados externos via conjunto de dados para saber como configurar o campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo. |
| Lista de fonte REST |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Fonte de dados: clique neste botão para definir a fonte de dados que contém os valores que poderão ser selecionados neste campo.
• Ajustes: permite realizar ajustes visuais no campo.
• Apresentação: defina como será a apresentação do campo.
• Regras: selecione a regra que será executada assim que alguma alteração for realizada neste campo. |
Integração
| Anexo |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área de anexo. A altura mínima da área de anexo é 15.
• Ajustes: permite realizar ajustes visuais na área de anexo.
• Apresentação: defina como será a apresentação da área de anexo:
|
| Plano de ação |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área de plano de ação. A altura mínima da área de plano de ação é 15.
• Ajustes: permite realizar ajustes visuais na área de plano de ação.
• Apresentação: defina como será a apresentação da área de plano de ação:
|
| Análise de causa |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área de análise de causa. A altura mínima da área de análise de causa é 15.
• Ajustes: permite realizar ajustes visuais na área de análise de causa.
• Apresentação: defina como será a apresentação da área de análise de causa:
|
| Atributo |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área de atributo. A altura mínima da área de atributo é 15.
• Ajustes: permite realizar ajustes visuais na área de atributo.
• Apresentação: defina como será a apresentação da área de atributo:
• Dados do processo: informe o identificador da atividade do processo relacionado ao atributo. |
| Roteiro responsável |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área de roteiro responsável. A altura mínima da área de roteiro responsável é 15.
• Ajustes: permite realizar ajustes visuais na área de roteiro responsável.
• Apresentação: defina como será a apresentação da área de roteiro responsável:
• Dados do processo: informe o identificador da atividade do processo relacionado ao roteiro responsável. |
| Checklist |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área de checklist. A altura mínima da área de checklist é 15.
• Ajustes: permite realizar ajustes visuais na área de checklist.
• Apresentação: defina como será a apresentação da área de checklist:
• Dados do processo: informe o identificador da atividade do processo relacionado ao checklist. |
| Associação |
• Título: informe o nome que será apresentado como título. Marque a opção Esconder o título para que ele não seja apresentado.
• Altura: defina a altura da área de associação. A altura mínima da área de associação é 15.
• Ajustes: permite realizar ajustes visuais na área de associação.
• Apresentação: defina como será a apresentação da área de associação:
|
Para mais informações sobre a função de cada um dos componentes, confira o artigo Visão geral do editor de formulário responsivo.
Conclusão
Após a inclusão dos campos do formulário responsivo, será possível realizar configurações extras. Confira os artigos listados abaixo para saber como realizar tais ajustes:



