Histórico da Página
Índice |
---|
Falando de Forms Beta...
Este guia visa orientar usuários na construção de novo formulários utilizando o Forms Beta. O novo editor de formulários da plataforma que está mais prático e dinâmico, basta arrastar os componentes (drag and drop) para a tela e dar início a construção do seu formulário.
(IMAGEM TEMPORÁRIA)
Nota | ||
---|---|---|
| ||
Formulários criados em Forms beta não são permitidos para importação/exportação e ou utilização em processos, como também não possuem nenhum vínculo com comunidades. |
Construir um formulário
Siga os passos abaixo para a construir um formulário.
01. Acessar o item Soluções no menu principal e acionar Forms.
02. Uma nova guia será apresentada com a listagem dos forms já publicados aberta. (Forms)
03. Acionar Nova solução e a tela do editor de formulários será apresentada.
04. Acima do quadro de componentes é possível definir um título para o formulário em Título do formulário escrito em verde.
Painel |
---|
O título possui limitação de 70 caracteres. |
Abaixo do título, a esquerda da janela, está o quadro com os componentes de campo e layout disponíveis para a construção do formulário.
05. Arrastar e soltar (drag and drop) o componente escolhido na área que desejar e uma área pontilhada será exibida para definir a localização e o espaço do campo adicionado.O usuário pode definir a localização do campo conforme a necessidade. Ou poderá alinhar os campos ao topo, através do ícone apresentado em verde no rodapé do editor. Ao selecioná-lo, todos os componentes ficarão alinhados ao todo do formulário que está sendo criado.
Ao adicionar um campo é possível editá-lo ou excluí-lo.
- Para abrir a edição de um campo, acionar o ícone representado por no canto direito do campo.
- Para excluir um campo adicionado, acionar o ícone representado porno canto direito do campo.
Componentes de campo
Confira abaixo os componentes de campo disponíveis para construção do formulário:
Campo texto: utilizado para adicionar campos de texto no formulário.
- Título do campo: título para o campo adicionado;
- Estilo do campo: estilo do campo adicionado a ser escolhido;
- Sem estilo: utilizado para manter o campo padrão;
- CPF: utilizado para inclusão de CPFs;
- CEP: utilizado para inclusão de CEPs;
- CNPJ: utilizado para inclusão de CNPJs;
- Data e Hora: utilizado para informar datas e horas;
- Porcentagem: utilizado para inclusão de valores com porcentagem;
- Telefone fixo: utilizado para inclusão de números telefônicos;
- Telefone celular: utilizado para inclusão de números móveis;
- Placa de carro: utilizado para inclusão dos dados da placa de carros;
- Moeda: utilizado para inclusão de valores em moedas;
- IP: utilizado para inclusão de IPs;
- Dica: informação de ajuda para preenchimento do campo;
- Valor inicial: valor inicial para preenchimento do campo ex: Digite aqui seu CPF;
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo. Ex: Nome da rua;
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados.
Parágrafo:utilizado para inserir parágrafos na construção do formulário para visualizar informações extensas.
- Título do campo: título para o campo adicionado;
- Dica: informação de ajuda para preenchimento do campo;
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo. Ex: detalhe sua experiência;
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados;
Escolha única: utilizado para adicionar campo com múltipla opções, porém permite a seleção de somente uma opção.
- Título do campo: título para o campo adicionado;
- Opções: número de opções para incluir no campo;
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo. Ex: escolha uma opção;
- Obrigatório: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados;
Múltipla escolha: utilizado para adicionar campo com múltipla escolha, ou seja, permite selecionar uma ou mais de uma opção.
- Título do campo: título para o campo adicionado
- Opções: número de opções para incluir no campo
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo. Ex: escolha uma ou mais opções
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados.
Painel |
---|
Salientamos que os campos de Múltipla escolha do Forms BETA, são salvos na tabela de forma diferenciada à antiga técnica de construção de formulários. Ao incluir valores selecionados nesses campos, os registros serão salvos na mesma coluna e linha do dataset. Cada valor ficará identificado por um pipe separador (|). Dessa forma, o caractere é reservado somente para esta função. |
Lista: utilizado para adicionar listas ao formulário.
- Título do campo: Título para o campo adicionado
- Opções: número de opções para incluir no campo
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo. Ex. escolha uma estado
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados.
Painel |
---|
Salientamos que os campos de Múltipla escolha do Forms BETA, são salvos na tabela de forma diferenciada à antiga técnica de construção de formulários. Ao incluir valores selecionados nesses campos, os registros serão salvos na mesma coluna e linha do dataset. Cada valor ficará identificado por um pipe separador (|). Dessa forma, o caractere é reservado somente para esta função. |
Lista suspensa: utilizado para adicionar listas onde as opções podem ser expandidas e selecionadas.
- Título do campo: título para o campo adicionado
- Opções: número de opções para incluir no campo
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo. Ex: selecione uma opção
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados.
Numérico: utilizado para coletar dados numéricos de acordo com a necessidade.
- Título do campo: título do campo adicionado
- Dica: informação de ajuda para preenchimento do campo
- Valor inicial: valor inicial para preenchimento do campo ex: Digite aqui seu CPF
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo Ex: Digite seu RG
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados.
Data: utilizado para definição de data no calendário.
- Título do campo: título para o campo adicionado
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo Ex: Escolha uma data
- Obrigatório?:utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas:nome único do campo para consulta de dados.
Avaliação: utilizado para criar formulários contendo avaliação para que seja possível coletar dados de pesquisa de satisfação no formato de estrelas.
- Título do campo: título para o campo de avaliação adicionado
- Valor da classificação: possível definir qual o valor máximo para a nota da avaliação entre: 1 estrela a 5 estrelas
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo Ex: Defina de 1 a 5 estrelas
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Opções avançadas: nome único do campo para consulta de dados.
Pesquisa: ??
Busca usuário: utilizado quando se tem a necessidade de procurar usuários do fluig dentro do formulário.
- Título:título para o campo de busca adicionado
- Filtro: filtra se a busca será feita por papel, grupo ou nenhum filtro será aplicado
- Salvar: salva o e-mail do usuário buscado
- Obrigatório?: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Dica: informação de ajuda para preenchimento do campo
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo Ex: Digite o nome do usuário desejado
- Opções avançadas: nome único do campo para consulta de dados.
Texto Rico: utilizado para inserção de textos que necessitam de destaque. Neste campo é possível definir a fonte, sua cor, seu tamanho, negrito, itálico, sublinhado, riscado e ativar o corretor ortográfico.
- Título: título para o campo de texto adicionado
- Obrigatório: utilizado para definir se o campo é obrigatório ou não. O campo obrigatório ficará identificado por um asterisco *
- Dica: informação de ajuda para preenchimento do campo
- Texto de ajuda: utilizado para auxiliar no momento de preenchimento do campo Ex: Escreva sobre você
Componentes de layout
Confira abaixo os componentes de layout disponíveis para construção do formulário
Botão: utilizado quando se tem a necessidade de ter outras ações no formulário além das ações padrão da plataforma que são o Salvar e Fechar.
- Título: título para o botão adicionado
- Tipo de botão: pode-se escolher entre três tipos de botão, sendo eles:
- Salvar e continuar;
- Salvar e fechar;
- Cancelar;
- Cor da label: possível definir uma cor para a label do botão
- Cor de fundo: possível definir uma cor para o fundo do botão
Imagem: Utilizado para adicionar imagens do desktop ou da rede em formulários.
- Carregar a imagem: carrega uma imagem diretamente do desktop do usuário
- Aplicar: é possível carregar imagens externas copiando o link e colando no quadro URL e acionando o botão Aplicar
- Alinhamento da imagem: possível definir o local da imagem entre:
- Esquerda
- Centro
- Direita
O ícone é apresentando sempre que o componente possuir configurações pendentes. Sem as devidas configurações, não é possível salvar ou publicar o formulário em questão.
Múltiplos registros: utilizado quando se tem a necessidade de agrupar componentes com assunto em comum para que sejam apresentados de forma unificada.
- Título: título para o campo adicionado
- Cor do título: possível definir uma cor para o título do campo
- Cor fundo do título: possível definir uma cor para o fundo do título
- Botão adicionar?: (Documentar)
- Botão excluir?: (Documentar)
- Alinhar ao topo: possível alinhar o componente ao topo do formulário
O ícone é apresentado sempre que o componente possuir configurações pendentes. Sem as devidas configurações, não é possível salvar ou publicar o formulário em questão.
Divisor: utilizado para criar divisões entre os campos adicionados ao formulário.
- Espaçamento: possível definir o espaçamento do divisor entre:
- valores negativos diminuem o espaço do divisor com o conteúdo acima.
- valores positivos diminuem o espaço do divisor com o conteúdo abaixo
- Estilo: possível definir o estilo do divisor entre:
- Sólido
- Tracejado
- Pontilhado
- Cor: possível definir a cor do divisor
- Espaçamento: possível definir o espaçamento do divisor entre:
Seção: utilizado para agrupar componentes relacionados dentro do formulário. Para incluir componentes na seção, basta escolher e arrastar o componente desejado para dentro da seção.
- Título da seção: título para a seção adicionada
- Cor fundo do título: utilizado para definir a cor do texto do título da seção.
- Cor da borda: utilizado para definir a cor da borda da seção adicionada.
Abas: utilizado para adicionar abas dentro do formulário. É possível utilizar uma ou mais abas. Para incluir componentes na aba, basta selecionar a aba que deseja e arrastar o componente para dentro da aba.
- Abas: campo destinado para definição do título da aba.
Painel |
---|
Para incluir nova aba, basta selecionar Adicionar aba, localizado abaixo deste campo. |
- Cor da aba: utilizado para definir uma cor para o título das abas.
- Cor da borda: utilizado para definir uma cor para a borda das abas.
Cabeçalho: utilizado para compor o cabeçalho de um formulário
- Título: possível definir um título para o cabeçalho no formulário
- Tamanho do título: possível definir um tamanho para o título em três formas:
- Grande
- Médio
- Pequeno
- Posição do título: possível definir a posição do título do cabeçalho em três formas:
- Esquerda
- Centro
- Direita
- Cor do título: possível definir uma cor para o título do cabeçalho
- Título: possível definir um título para o cabeçalho no formulário
Texto: Utilizado para inclusão de textos no formulário
- Descrição do texto: campo para inserir a descrição para o campo adicionado
- Tamanho do texto: tamanho da fonte do texto. Pode ser definida entre:
- Extra pequeno
- Pequeno
- Médio
- Grande
- Extra grande
- Posição do texto: utilizado para definir a posição do texto entre:
- Esquerda
- Centro
- Direita
Conteúdo externo: utilizado para adicionar URLs externas ao formulário.
- URL: adicionar a URL de acesso no campo e acionar o botão Aplicar
- Carregar: Adicionar uma imagem direto do desktop do usuário
O ícone é apresentado sempre que o componente possuir configurações pendentes. Sem as devidas configurações, não é possível salvar ou publicar o formulário em questão.
Incorporar: utilizado para incorporar as informações (registro de formulário) dentro do formulário que está sendo criado.
Nota |
---|
Este campo é de preenchimento obrigatório. É possível somente incorporar um formulário dentro de outro, se o formulário a ser incorporado for selecionado na listagem. |
- Selecione um formulário para incorporar: lista os formulários que existem na plataforma para incorporar ao formulário que está sendo criado.
O ícone é apresentado sempre que o componente possuir configurações pendentes. Sem as devidas configurações, não é possível salvar ou publicar o formulário em questão.
Integrar um formulário
Integração é um recurso que permite o usuário executar uma operação pré-cadastrada na plataforma dentro do formulário. Cada formulário criado poderá ser integrado com uma operação e será necessário selecionar os parâmetros da operação selecionada para que a mesma seja executada corretamente. Para isso, siga os passos abaixo:
Nota |
---|
A integração deve ser configurada antes do formulário ser salvo ou publicado. Caso contrário ela não terá seu funcionamento esperado. |
01. Após criar o formulário acionar Configurar.
02. Acionar Integrações externas, logo depois Adicionar.
03. A tela para adicionar a integração será apresentada. Nela, as operações pré-cadastradas pelo usuário serão apresentadas em formato de lista.
Painel |
---|
Acesse aqui para mais detalhes sobre cadastrar operações no fluig. |
04. Selecionar a operação que deseja executar e acionar Próximo.
05. Os parâmetros da operação selecionada serão apresentados, definir os parâmetros para que a operação seja executada corretamente. Acionar Próximo.
06. Definir as mensagens, caso houver necessidade. Uma para alerta caso ocorra algo de errado com a integração e outra para acompanhamento pois o processo pode ter seu tempo variado conforme a integração à ser executada.
Definir as mensagens em: Definição mensagem de alerta e Definição mensagem de acompanhamento.
07. Após a operação e mensagens configurados, é possível visualizar um resumo da integração à ser realizada.
08. Acionar Confirmar.
Pré-visualizar um formulário
Ao acionar este item permite a pré-visualização do formulário criado para que o usuário consiga visualizar como ficará o formulário no momento do seu preenchimento (registro de formulário). Porém não é possível editar ou interagir com o formulário visto que o mesmo ainda precisa ser salvo e publicado para posteriormente ser preenchido.
Salvar um formulário
Para salvar o formulário siga os passos abaixo:
01. Acionar o botão Salvar ao lado direito da tela do editor.
02. Ao salvar o formulário, uma mensagem confirmando que o formulário foi salvo com sucesso será apresentada e a tela do editor continuará aberta.
Painel |
---|
O formulário salvo poderá ser acessado via Soluções no menu principal na plataforma e estará identificado na listagem dos Últimos editados e também na listagem de Em edição. |
03. O formulário poderá ser editado para posteriormente ser publicado ou também poderá ser publicado diretamente. Poderá ainda ser removido Soluções acionando o botão identificado pelo ícone.
Publicar um formulário
Siga os passos abaixo para publicar um formulário.
01. É necessário navegar até a pasta onde ele foi criado. O formulário estará destacado por um ícone alaranjado indicando que o mesmo ainda está em edição.
02. Acionar Mais opções localizado ao lado direito do nome do formulário. Logo depois acionar Editar formulário
Painel |
---|
Uma mensagem para confirmar a ação será apresentada acionar Sim, eu quero e o formulário será aberto para edição ficando disponível para publicação. |
03. O formulário salvo será aberto na tela do editor, acionar Publicar, uma mensagem confirmando a ação será apresentada. Acionar Confirmar para publicar o formulário. A tela de edição será fechada e o formulário ficará identificado por um ícone cinza indicando que o formulário está publicado.
Os registros de formulário poderão ser inseridos após o formulário ser publicado. Mais detalhes acesse a documentação Registro de Formulário.
Nota | ||
---|---|---|
| ||
As novas API's do fluig poderão ser utilizada apenas nos formulários criados a partir do Foms Beta - novo editor de formulário fluig. |
Nota | ||
---|---|---|
| ||
Não é possível preencher dados no mobile, em formulários criados no Forms Beta. |
Validações de regras ~Alterar
Esta tabela detalha as validações para cada tipo de campo do Forms beta e também como são configuradas cada uma das regras.
Validação | Descrição | Observação | Exemplo de uso |
---|---|---|---|
Validar E-mail | Verifica se o e-mail informado é um texto válido. | ||
Validar E-mail com conteúdo (alterar) | verifica se o e-mail informado é um texto válido além de verificar se possui determinado conteúdo para garantir um padrão. Exemplo: [email protected] que além de verificar o e-mail, faz-se necessário que o e-mail contenha o domínio suaempresa.com | ||
Validar CPF | Verifica se o CPF informado é um número válido. | ||
Validar CNPJ | Verifica se o CNPJ informado é um número válido. | ||
Validar data do dia atual | Verifica se a data informada corresponde ao dia atual (hoje). | ||
Validar datas iguais | Verifica se existem duas datas iguais. | ||
Validar data maior que a outra | Verifica se, entre duas datas, existe uma maior que a outra. | ||
Validar data maior ou igual a outra | Verifica se, entre duas datas, existe uma maior ou igual a outra. | ||
Validar data menor que a outra | Verifica se, entre duas datas, existe uma é menor que a outra. | ||
Validar data menor ou igual a outra | Verifica se, entre duas datas, existe uma menor ou igual a outra. | ||
Validar valores numéricos iguais | Verifica se existem dois valores numéricos iguais. | ||
Validar valor numérico maior que outro | Verifica se, entre dois valores numéricos, existe um maior que o outro. | ||
Validar valor numérico menor que outro | Verifica se, entre dois valores numéricos, existe um menor que o outro. | ||
Validar valor numérico menor ou igual a outro | Verifica se, entre dois valores numéricos, existe um menor ou igual a outro. | ||
Validar conteúdo de campo texto | Verifica se um campo de texto contém determinado conteúdo dentro dele. | ||
Validar campo texto em branco | Verifica se um campo de texto está em branco. | ||
Validar campos texto iguais | Verifica se dois campos de texto são iguais. | ||
Validar campo texto iguais ignorando maiúsculas e minúsculas | Verifica se existem dois campos de texto iguais desconsiderando diferenças entre letras maiúsculas e minúsculas. |
Nota | ||
---|---|---|
| ||
Para finalizar o formulário, é necessário verificar os campos destacados e preencher de acordo com as regras solicitadas. |
Guia de botões Forms
O guia de botões tem como objetivo mostrar ao usuário a ação que cada um dos novos botões representa na edição do formulário. ~Verificar com João
Botão | Descrição |
---|---|
É apresentado sempre que um item for definido como obrigatório. | |
É apresentado sempre que o componente possuir configurações pendentes. Com isso, não será permitido salvar ou publicar seu formulário. | |
Possível pré-visualizar o formulário. O formulário será apresentado como ficará para edição, porém não será permitido preencher ou salvar o formulário. | |
Permite redirecionar diretamente para a página de documentação, onde será possível consultar em mais detalhes como configurar o formulário corretamente. | |
Permite ao usuário alinhar os componentes ao topo. Quando selecionado, fica na cor verde e deixa os componentes todos alinhados. Basta selecionar novamente que ele ficará na cor cinza, permitindo ao usuário que realoque os componentes onde desejar. | |
Permite a ação de Fazer e Desfazer. Podendo ser útil em diversas situações, como quando o usuário adiciona um componente e precisa removê-lo. Para isso, basta acionar o desfazer. | |
Salva o formulário como rascunho. | |
Publica o formulário. |
Informações | ||
---|---|---|
| ||
Esta documentação é válida a partir da atualização 1.6.5 - Liquid. Se você utiliza uma atualização anterior, ela pode conter informações diferentes das quais você vê na sua plataforma. |