Sobre os componentes do formulário

Um componente de formulário fornece a capacidade de coletar dados do usuário. Os componentes da interface do usuário são agrupados em categorias, com base em sua funcionalidade, da seguinte maneira:

• Básica
• Avançado
• Layout
• Dados.

Componentes Básicos

Campo de Texto

Você pode usar o componente Campo de texto para inserir um texto curto.

Área de Texto

Você pode usar o componente Área de texto para inserir texto longo. O componente Área de texto oferece entrada de várias linhas.

A configuração Rows permite definir quantas linhas são visíveis no componente Text Area .

Número

Você pode usar o componente Number para inserir qualquer valor numérico.

• Use o separador de milhares - separa milhares com uma vírgula.
• Exigir Decimal - sempre mostra decimais, mesmo se for 0.
• Casas decimais - define o número máximo de decimais exibidos.

Senha

Você pode usar o componente Senha para inserir senhas. O texto é exibido como asteriscos em vez do valor real inserido para sigilo.

Caixa de seleção

Você pode usar o componente Checkbox para inserir valores booleanos (verdadeiro ou falso).

Selecionar Caixas

Você pode usar o componente Select Boxes para permitir que os usuários escolham vários valores em uma lista.

Valores - permite adicionar opções ao seu componente Select Box. A coluna Rótulo é o valor visível para os usuários. A coluna Valor é o nome armazenado nos dados.

Rótulo/Cabeçalho

Caminho do Arquivo/Pasta

Você pode usar o componente Rótulo/Cabeçalho para adicionar rótulos a outros componentes de formulário. Você também pode usá-lo para separar seções em seu formulário.

• Tamanho da etiqueta - escolha um tamanho ou tipo para o componente Etiqueta/Cabeçalho na lista suspensa.

Você pode usar o componente Caminho do arquivo/pasta para obter o caminho do arquivo ou da pasta do documento de um usuário.

Para fornecer um caminho de arquivo no Renderizador de formulário:

1. Clique no botão Selecionar do componente Caminho de arquivo/pasta . A janela Controle de arquivo é aberta.
2. Selecione um arquivo.
3. Clique em Abrir na janela Controle de arquivo .

Para fornecer um caminho de pasta no Renderizador de formulário:

1. Clique no botão Selecionar do componente Caminho de arquivo/pasta . A janela Procurar Pasta é aberta.
2. Selecione uma pasta.

3. Clique em OK na janela Procurar Pasta .

   
   

   

   
   

• Tipo de Seleção - escolha o tipo de caminho que os usuários podem selecionar: Arquivo ou Pasta.

• Mostrar todos os arquivos - quando marcado, os usuários podem selecionar qualquer tipo de arquivo no Controle de arquivos. Quando deixado desmarcado, a seção Adicionar extensões é exibida, onde você deve escolher manualmente que tipo de arquivos os usuários podem selecionar no Controle de arquivos.

  
  

  

  
  

Observação: você pode limitar ou expandir os tipos de arquivo que o usuário pode selecionar na seção Adicionar extensões da guia Exibir .

Lista Suspensa

Você pode usar o componente Lista suspensa para exibir listas em um formato suspenso.

• Tipo de widget - selecione o tipo de widget que deseja usar.

• Valores da fonte de dados - insira os valores que aparecem na lista suspensa. A coluna Rótulo é o valor visível para os usuários. A coluna Valor é o nome armazenado nos dados.

  
  

  

  
  
• Modelo de item - modelo HTML que permite controlar a maneira como os valores são exibidos na lista suspensa. Você pode acessar os valores na lista suspensa, por meio da variável item . Por exemplo, use item.label para acessar um determinado valor na lista suspensa
• Atualizar opções ativadas - atualiza os dados quando outro campo é alterado.
• Atualizar opções ao desfocar - atualiza os dados quando outro campo é desfocado.
• Limpar valor nas opções de atualização - limpa o valor dos componentes quando a opção Atualizar no campo é alterada.
• Valor Somente Leitura - mostra o valor somente quando estiver no modo Somente Leitura.
• Opções Choice.js - insira o objeto JSON bruto para usar como opções para o componente Select .
• Usar pesquisa exata - desativa o limite do algoritmo de pesquisa.
• Valor padrão personalizado - crie um valor padrão personalizado usando JavaScript ou JSONLogic.

Rádio

Você pode usar o componente Rádio para permitir que os usuários escolham apenas um valor de uma lista.

• Valores - insira os valores que aparecem na lista. A coluna Rótulo é o valor visível para os usuários. A coluna Valor é o nome armazenado no banco de dados.

Botão

Você pode usar o componente Button para permitir que os usuários executem várias ações no formulário.

• Ação - selecione a ação que deseja que o botão execute:

  • Enviar - envia o formulário e executa o bloco Do.
  • Clique - executa a operação de clique e executa o bloco Do.
  • Redefinir formulário - redefine os campos do formulário.
  • Evento - quando um usuário clica no botão, um determinado evento começa a ser executado. Ao selecionar Evento, você precisa inserir o evento no campo Evento do botão .
• Redefinir dados do bloco DO - quando marcado para os botões do tipo Click , define os dados que são recebidos do bloco Do. Ajuda a aumentar o desempenho quando os dados encontrados em outras páginas não estão na página atual.
• Tema - escolha o tema de cores do botão na lista suspensa.
• Tamanho - escolha o tamanho do botão na lista suspensa.
• Botão Bloco - se estende até a largura total do contêiner delimitador.
• Ícone Esquerdo/Direito - adicione a string de classe de ícone completa, para mostrar um ícone específico. Por exemplo, você pode adicionar fa fa-plus.

Componentes Avançados

Elemento HTML

Você pode usar o Elemento HTML para exibir um único elemento HTML em seu formulário e configurá-lo com base em seu caso de uso.

Observação: habilite a propriedade Desabilitar limpeza dentro da atividade Create Form para mostrar todo o conteúdo não seguro dentro de um elemento HTML.

• Tag HTML - A tag do Elemento HTML.
• Classe CSS —A classe CSS que pode ser adicionada para este elemento HTML. Você pode inserir várias classes, separando-as com espaços simples.
• Atributos - Os atributos para o Elemento HTML. Somente atributos seguros são permitidos, como: src, hrefe title.
• Conteúdo - o conteúdo do Elemento HTML.
• Atualizar ao alterar - renderiza novamente o elemento HTML sempre que um valor é alterado no formulário.

Para exibir imagens e arquivos PDF dentro de formulários, você precisa usar o componente HTML Element . Confira os seguintes tutoriais:

• Exibição de imagens.
• Exibição de arquivos PDF.

Content

Você pode usar o componente Content para adicionar informações em seu formulário, que é somente exibição. O valor do componente não é enviado de volta ao servidor.

• Atualizar ao alterar - renderiza o componente de conteúdo sempre que um valor no formulário é alterado.

Email

Você pode usar o componente E-mail para adicionar um campo para inserir endereços de e-mail.

Número de telefone

Você pode usar o componente Phone Number para adicionar um campo para inserir números de telefone.

• Máscara de entrada - Fornece um formato predefinido para o número de telefone. Para o campo de número de telefone, o formato padrão é [phone].
• 9 - numérico
• a - alfabética
• \* - alfanumérico
• Input Mask Placeholder Char - Você pode usar um caractere como um espaço reservado no campo.

Observação: o caractere de espaço reservado é substituído por um espaço se for usado dentro da máscara.

Data/Hora

Você pode usar o componente Date/Time para inserir datas, horas ou ambos.

• Formato - o formato usado para exibir o valor de data e hora.
• Ativar entrada de data - permite que os usuários insiram datas para este campo.
• Use a entrada para adicionar moment.js para minDate - permite que o usuário use uma entrada para a função de momento minDate , em vez de um calendário.
• Usar calendário para definir minDate - permite que o usuário use um calendário para definir o minDate.
• Use a entrada para adicionar moment.js para maxDate - permite que o usuário use uma entrada para a função de momento maxDate , em vez de um calendário.
• Usar calendário para definir maxDate - permite que o usuário use um calendário para definir o maxDate.
• Desative datas específicas ou datas por intervalo - adicione as datas que deseja banir. Por exemplo, 2027-08-11.
• Datas desativadas personalizadas - permite banir determinadas datas usando uma função personalizada.
• Desativar fins de semana - permite proibir os fins de semana.
• Desativar dias da semana - permite banir os dias da semana.
• Ativar entrada de hora - permite que os usuários insiram a hora neste campo.
• Hour Step Size - o número de horas que devem ser incrementadas ou diminuídas no seletor de tempo.
• Minute Step Size - o número de minutos que devem ser incrementados ou diminuídos no seletor de tempo.
• Horário de 12 horas (AM/PM) - exibe o horário em períodos de 12 horas, usando AM ou PM.
• Data padrão - define o valor padrão para uma data específica usando as funções Moment.js . Por exemplo, você pode usar a seguinte função: moment().substract(10, 'days').
  
  

  

  
  

Dia

Você pode usar o componente Day para solicitar entrada para Day, Monthe Year, por meio de um campo de tipo numérico ou de um campo de tipo selecionado.

• Tipo / Tipo de entrada - escolha fornecer entrada para Dia, Mês ou Ano digitando um número ou selecionando opções em uma lista suspensa.

Ano Mínimo/Máximo - escolha o ano mínimo/máximo que pode ser inserido.

• Exigir dia - o campo Dia deve ser preenchido antes da renderização do formulário.
• Exigir Mês - o campo Mês deve ser preenchido antes da renderização do formulário.
• Exigir ano - o campo Ano deve ser preenchido antes da renderização do formulário.
• Dia máximo/mínimo - escolha um dia mínimo/máximo que pode ser inserido. Você também pode usar as funções do Moment.js . Por exemplo, você pode usar moment().add(10, 'days').
  
  

  

  
  

Hora

Você pode usar o componente Time para inserir a hora em diferentes formatos.

• Tipo de entrada - selecione o tipo de widget que você gostaria de usar para inserir a hora: Entrada de hora HTML5 (os usuários podem escolher a hora em um determinado painel) ou Entrada de texto com máscara (os usuários podem inserir a hora manualmente).

Moeda

Você pode usar o componente Moeda para exibir valores financeiros usando uma determinada moeda. O componente possui uma máscara de entrada que exibe o ícone de moeda e adiciona vírgulas automaticamente com base no número inserido pelo usuário. O componente permite dois valores decimais.

• Moeda - escolha uma determinada moeda na lista suspensa.

Pesquisa

Você pode usar o componente Pesquisa para permitir que os usuários respondam a várias perguntas, escolhendo apenas um valor de uma lista.

• Perguntas - adicione as perguntas que os usuários devem responder.
• Valores - adicione as opções que o usuário pode selecionar por questão.

Componentes de layout

Colunas

Você pode usar o componente Colunas para exibir outros componentes em linha, agrupando-os como colunas.

• Propriedades da coluna - adicione colunas ao componente e configure-as, ajustando suas propriedades de Largura, Deslocamento, Empurrar e Puxar. Após configurar o layout das colunas, você pode arrastar e soltar outros componentes no componente Colunas .
• Colunas de ajuste automático - ajusta automaticamente as colunas, se houver componentes aninhados ocultos.

Painel

Você pode usar o componente Panel para agrupar componentes e adicioná-los dentro de um painel nomeado.

• Tema - escolha o tema do painel na lista suspensa. A classe Bootstrap é adicionada ao wrapper div.
• Recolhível - permite recolher o painel.
• Inicialmente recolhido - a propriedade está disponível somente quando Recolhível está marcado. Recolhe o painel quando o formulário é carregado.

Tabela

Você pode usar o componente Tabela para criar uma tabela que contenha outros componentes de formulário dentro das colunas e linhas da tabela.

• Número de Linhas / Colunas - insira o número de linhas ou colunas que deseja exibir na tabela.
• Clonar componentes de linha - clona os componentes dentro das linhas e os adiciona nas linhas restantes também. Você pode usá-lo ao criar tabelas com várias linhas, que contêm o mesmo conteúdo.
• Alinhamento da Célula- escolha o alinhamento horizontal das células na tabela.
• Listrado - adiciona sombreamento listrado às linhas.
• Bordered - adiciona bordas visíveis à tabela.
• Passar o mouse - destaca a linha ao passar o mouse sobre ela.
• Condensado - condensa o tamanho da tabela.

Guias

Você pode usar o componente Guias para agrupar componentes em guias. Quando o formulário é renderizado, você pode visualizar uma guia por vez.

A configuração Guias permite adicionar, configurar, reordenar e remover guias.

Dados

Oculto

Você pode usar o componente Hidden para criar uma propriedade de recurso que pode ser personalizada dentro de um formulário. Ele não é exibido em formulários renderizados.

Contêiner

Você pode usar o componente Container para agrupar um conjunto de campos em um objeto com uma chave de contêiner. Um contêiner com a chave financialPerformance é enviado como:

{
    data: {
      financialPerformance {
        grossProfitMargin: "0.83",
      netProfitMargin: "0.43"
      }
   }
}

Grade de Dados

Você pode usar o componente Data Grid para renderizar várias linhas de dados, semelhante a uma tabela de dados. Você pode arrastar e soltar vários componentes na grade de dados para corresponder ao seu caso de uso.

Na janela Form Renderer , as linhas dentro do componente Data Grid podem ser adicionadas ou removidas.

• Desativar adicionar/remover linhas - oculta os botões que permitem adicionar ou remover linhas quando o formulário é renderizado.
• Permitir reordenar - reordene as linhas arrastando e soltando-as.
• Equal Column Width - torna as larguras das colunas iguais.
• Habilitar Grupos de Linhas - permite separar linhas em grupos. Adicione grupos, rotule-os e selecione as linhas para cada grupo.
• Initialize Empty - a grade de dados não terá linhas visíveis quando inicializada.

Editar Grade

Você pode usar o componente Edit Grid para renderizar várias linhas de dados, semelhante a uma tabela de dados. Você pode arrastar e soltar vários componentes de formulário na grade de ediçãopara capturar muitos dados.

Quando o formulário for renderizado, você poderá adicionar uma duplicata do Edit Grid, clicando em Add Another.

• Abrir primeira linha quando vazia - abre a primeira linha quando a grade de edição está vazia.
• Desativar adicionar/remover linhas - oculta os botões que permitem adicionar ou remover linhas quando o formulário é renderizado.
• Adicionar outro texto - altera o nome do botão Adicionar outro .
• Salvar texto da linha - altera o texto do botão Salvar linha .
• Remover texto da linha - altera o texto do botão Remover linha .

A guia Modelos é específica apenas para o componente Editar grade . Os modelos de cabeçalho, linhae rodapé permitem que você personalize a grade usando JavaScript. Você pode modificar o tipo de componentes exibidos nas linhas dentro de uma grade ou a aparência do cabeçalho/rodapé.

Modelo de Cabeçalho

Este é o modelo Lodash usado para renderizar o cabeçalho do componente Edit Grid .

Importante: o Modelo de Cabeçalho não funciona com Actionsde Formulário.

Existem duas variáveis disponíveis:

• valor - a matriz de dados da linha.
• componentes - a matriz de componentes na grade.

Modelo de Linha

Este é o modelo Lodash usado para renderizar cada linha do componente Edit Grid .

Importante: o Modelo de Linha não funciona com Actionsde Formulário.

Existem três variáveis disponíveis:

• linha - objeto dos dados de uma linha.
• componentes - a matriz de componentes na grade.
• estado - estado da linha atual (rascunho/salvo).

Para adicionar eventos do tipo Click , adicione as seguintes classes aos elementos: editRow e removeRow.

Modelo de Rodapé

Este é o modelo Lodash usado para renderizar o rodapé do componente Edit Grid .

Existem duas variáveis disponíveis:

• valor - a matriz de dados da linha.
• componentes - a matriz de componentes na grade.

Grade

Você pode usar o componente Grid para renderizar várias linhas de dados, semelhante a uma tabela de dados. Grid é um componente somente leitura que você pode usar para exibir grandes quantidades de dados. Você pode arrastar e soltar vários componentes de formulário no componente Grid .

• Classificável - classifique os dados dentro das colunas em ordem crescente ou decrescente. Você classifica os dados em tempo de execução, no Form Renderer.
• Filtrável - filtre os dados dentro de cada coluna. Filtre os dados em tempo de execução, no Form Renderer.
• Coluna(s) redimensionável(is) - altere a largura das colunas em tempo de execução, no Form Renderer. O recurso Column(s) Resizable permite que você veja melhor os dados dentro das colunas.

• Paginação - exibe os dados do componente Grid (Visualização) em páginas numeradas. A capacidade de paginação também inclui a configuração do número de itens por página.

  
  

  

  
  

Para saber mais sobre como usar o componente de Grade , consulte Uso da grade.

Comparação entre componentes do controle de grade

A tabela abaixo compara os recursos dos controles de grade disponíveis no Form Designer. A tabela também descreve os cenários recomendados para usar cada componente de controle de grade: Grid, Data Gride Edit Grid.

Legenda: = Não disponível.

Recursos	Grade	Grade de Dados	Editar Grade
Cenários recomendados	Exibição de grande número de dados para fins somente leitura (capacidade somente leitura).	Exibição de um pequeno conjunto de dados que precisam ser editados pelo usuário (recurso de edição em linha).	Exibição de um pequeno conjunto de dados que precisam ser editados pelo usuário (recurso de edição em linha do subformulário).
Número de linhas recomendado	Ilimitado (suporte de paginação de 100 linhas).	Não mais de 100 linhas. Risco de redução de desempenho além dos números recomendados.	Não mais de 100 linhas. Risco de redução de desempenho além dos números recomendados.
Número de colunas recomendado	Ilimitado.	Máximo de sete colunas para 100 linhas. Risco de redução do desempenho	Máximo de 7 colunas para 100 linhas. Risco de redução de desempenho.
Editável
Paginação
Classificável
Filtrável
Coluna redimensionável no runtime
Agrupamento de linhas
Lógica e condições
Personalização extensa usando modelos
Pesquisa global