Exibir origem

Falando de Forms Beta...

Este documento visa orientar usuários na construção de novo formulários utilizando o Forms Beta. O novo editor de formulários está mais prático e dinâmico, agora basta arrastar os elementos para a tela e começar a construção do seu formulário.

(IMAGEM TEMPORÁRIA)

TOTVS Fluig > Plataforma ❙ Forms Beta > forms temporario.png

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.

Construindo um formulário

Siga os passos abaixo para a construir um formulário.

01. Acessar o item Apps no menu principal da plataforma e acessar Forms logo em seguida.

02. Acionar Sim, eu quero para abrir a tela de criação do formulário.

03. Uma nova guia será aberta apresentando a tela do editor. Para começar a construção do formulário, é necessário arrastar e soltar (drag and drop) os elementos para a tela.

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.

O título possui limitação de 70 caracteres.

Abaixo do título está o quadro com os componentes de campo e layout disponíveis para a construção do formulário.

05. Arrastar e soltar os elementos na área que desejar. Uma área pontilhada é exibida para definir o espaço do campo adicionado. O usuário poderá definir a localização do campo conforme a necessidade. Ao adicionar um campo é possível editá-lo ou excluí-lo.

Para abrir a edição um campo acionar o ícone representado por um lápis no canto direito do campo.
Para excluir um campo adicionado, acionar o ícone representado por uma lixeira no canto direito do campo.

06. Os elementos de campo que estão disponíveis para a construção do formulário são:

Campo texto: permite 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: permite 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: permite adicionar um campo com múltipla opções, 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: permite criar formulário com seleção múltipla tornando possível selecionar uma ou mais opções.

Salientamos que os campos de Seleção Múltipla e Lista do Forms BETA, são salvos na tabela de forma diferenciada à antiga técnica de construção de formulários. Agora, ao incluir valores selecionados nesses campos, estes registros serão salvos na mesma coluna e na mesma linha do dataset. E cada valor ficará identificado por um pipe separador (|). Sendo assim, esse caracter é agora reservado para esta funçã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.

Lista: permite adicionar listas ao formulário

Salientamos que os campos de Seleção Múltipla e Lista do Forms BETA, são salvos na tabela de forma diferenciada à antiga técnica de construção de formulários. Agora, ao incluir valores selecionados nesses campos, estes registros serão salvos na mesma coluna e na mesma linha do dataset. E cada valor ficará identificado por um pipe separador (|). Sendo assim, esse caracter é agora reservado para esta funçã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.
- 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.

Lista suspensa: permite acionar listas onde as opções podem ser 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.
- 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: possível 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: possível utilizar calendário para definição de datas 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: possível criar formulários utilizando 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 avaliçã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 seu RG
- 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: Digite seu RG

07. Os elementos de layout que estão disponíveis para a construção do formulário são:

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

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

Divisor: possível criar formulários utilizando linhas horizontais a fim de criar divisões no formulário. O espaçamento de valor 10 vem por padrão da plataforma.

- 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

Seção: utilizado para agrupar elementos relacionados dentro do formulário. Para incluir elementos na seção, basta escolher e arrastar os elementos desejados 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 agrupar abas dentro do formulário. É possível utilizar uma ou mais abas. Para incluir elementos na aba, basta selecionar a aba que deseja e arrastar os elementos para dentro da aba.

- Abas: campo destinado para definição do título da aba.
  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

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

Incorporar: utilizado para incorporar as informações (registro de formulário) dentro do formulário que está sendo criado

Este campo é de preenchimento obrigatório, visto que somente é possível incorporar um formulário dentro de outro, se o formulário em questão 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.

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 a ação será apresentada e a tela do editor continuará aberta. O formulário salvo poderá ser acessado via Central de 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 removido da Central de soluções acionando o botão identificado por uma lixeira.

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

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.

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.

Não é possível preencher dados no mobile, em formulários criados no Forms Beta.

Através do Fluig app, é possível apenas preencher informações de formulários vinculados a um processo, porém o Forms beta ainda não possui esse vinculo, tornando impossível editar registros no aplicativo mobile.

Validações de regras

Esta tabela detalha as validações para cada tipo de campo do Forms beta.

Validação	Descrição
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.

Para finalizar o formulário, é necessário verificar os campos destacados e preencher de acordo com as regras solicitadas.

Guia de botões de 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.

É 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.

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.