Histórico da Página

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)

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.

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.

• • 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

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

    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

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

• • 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

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.

Validações de regras ~Alterar

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

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.