Sobre os componentes do formulário

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. O componente Senha tem as mesmas opções do componente Campo de texto .

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 no banco de dados.

  
  

  

  
  

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 no banco de 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.
  • Clique - executa a operação de clique.
  • 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 de botão. Agora você pode usar o nome do evento para criar uma lógica personalizada que acionará outro componente.
    Por exemplo, se você quiser que um Botão determine o valor de dois componentes e o transforme em um terceiro, você pode criar um Botão com o evento nomeado calculate e, em seguida, criar uma Lógica chamada calculate para o componente que você deseja produzir o resultado.
• 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 - abrange toda a largura do contêiner delimitador.
• Ícone Esquerdo/Direito - adicione a string completa da classe do ícone para mostrar o ícone. Por exemplo, 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: todas as tags e atributos HTML inseguros são removidos quando o formulário é renderizado, para evitar scripts entre sites. As tags e atributos que são removidos são: <script>, <embed>, <style>, onmouseovere onload.

• 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 ações de formulário, 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 novamente o componente 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. O componente Email é semelhante ao componente Campo de texto .

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 usar 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 para aumentar ou diminuir no seletor de tempo.
• Tamanho do Passo Minuto - o número de minutos para aumentar ou diminuir 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, 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.

PDF

É possível usar o componente PDF para renderizar arquivos PDF nas ações do formulário.

de transações

Você pode usar o componente Arquivo para permitir que os usuários carreguem arquivos em um formulário ou baixem arquivos de um formulário.

• Modal Edit - abre um modal para editar o valor deste componente.
• Diretório - coloca todos os arquivos carregados neste componente, no diretório especificado. A string deve terminar com /.
• Upload Only - permite que os usuários apenas carreguem arquivos. A opção donload estará indisponível, quando marcada.
• Tipos de arquivo - permite especificar os tipos de arquivo, a fim de classificar os tipos de arquivos que o usuário carrega. Recomendado quando um usuário carrega vários tipos de arquivos e você deseja que o usuário especifique o tipo de cada arquivo carregado.
• Padrão de arquivo - permite especificar as extensões de arquivo que poderão ser carregadas. Outras extensões de arquivo não especificadas não serão enviadas.
• Tamanho mínimo do arquivo - define o tamanho mínimo para o arquivo carregado.
• Tamanho máximo do arquivo - define o tamanho máximo do arquivo carregado.

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 de campo e adicioná-los em 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 está carregando.

  Tabela

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

• Número de Linhas / Colunas - insira o número de linhas e colunas que deseja exibir na tabela
• Clone Row Components - clona os componentes dentro das linhas e os adiciona nas linhas restantes. 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

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 adicionar vários componentes embutidos em uma única grade. Você pode arrastar e soltar vários componentes na grade de dados para corresponder ao seu caso de uso. O componente Data Grid permite adicionar vários campos duplicados em linha e em uma única grade.

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, 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 exibir dados em um formato de tabela. 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.
• Modelo de cabeçalho/linha/rodapé - personalize a grade usando JavaScript.
• 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 .

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: Data Grid e Edit Grid.

Legenda: = Não disponível.

Recursos	Grade de Dados	Editar Grade
Cenários recomendados	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	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	Máximo de 7 colunas para 100 linhas. Risco de redução de 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