Sobre os componentes do formulário

Componentes Básicos

Campo de Texto

You can use the Text Field component to input short text.

Área de Texto

You can use the Text Area component to input long text. The Text Area component offers multi-line input.

The Rows setting allows you to set how many rows are visible in the Text Area component.

Número

You can use the Number component to input any number value.

• Use Thousands Separator - separates thousands with a comma.
• Require Decimal - always shows decimals, even if 0.
• Decimal Places - sets the maximum number of decimals displaying.

Senha

Você pode usar o componente Senha para inserir senhas. O texto é exibido como asteriscos em vez do valor real inserido para segredo. O componente Senha tem as mesmas opções que o componente Campo de texto .

Caixa de seleção

You can use the Checkbox component to input boolean values (true or false).

Selecionar Caixas

You can use the Select Boxes component to allow users to choose multiple values from a list.

• Valores — permite que você adicione opções a 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

You can use the Drop-down List component to display lists in a dropdown format.

• Widget Type - select the type of widget you want to use.

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

  

• Item Template - HTML template that allows you to control the way values are displayed in the dropdown list. You can access the values in the dropdown list, through the item variable. For example, use item.label to access a certain value in the dropdown list

• Refresh Options On - refreshes data when another field changes.

• Refresh Options On Blur - refreshes data when another field is blurred.

• Clear Value on Refresh Options - clears the components value when the Refresh On Field option is changed.

• Read Only Value - only show the value when in Read-Only mode.

• Choice.js options - input raw JSON object to use as options for the Select component.

• Use exact search - disables search algorithm threshold.

• Custom Default Value - create a custom default value using JavaScript or JSONLogic.

Rádio

You can use the Radio component to allow users to choose only one value from a list.

• Values - input the values that appear in the list. The Label column is the value visible to users. The Value column is the name stored in the database.

Botão

You can use the Button component to allow users to perform various actions in the form.

• Action - select the action you want the button to perform:
  • Enviar - envia o formulário.
  • Clicar - executa a operação de clique.
  • Reset Form - resets the form fields.
  • 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 em que você deseja para gerar o resultado.

• Redefinir dados do bloco DO - quando marcada para botões do tipo Clique, 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 cor do botão na lista suspensa.
• Tamanho - escolha o tamanho do botão na lista suspensa.
• Botão de Bloco — abrange a largura total do contêiner delimitador.
• Ícone à esquerda/direita - adicione a string de classe completa do ícone para mostrar o ícone. Por exemplo, fa fa-plus.

Componentes Avançados

Elemento HTML

You can use the HTML Element to display a single HTML element in your form and configure it based on your use-case.

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>, onmouseover e onload.

• HTML Tag - The tag of the HTML Element.
• CSS Class - The CSS Class that can be added for this HTML Element. You can input multiple classes, by separating them with single spaces.
• Atributos - Os atributos para o elemento HTML. São permitidos apenas atributos seguros, como: src, href, e title.
• Conteúdo - o conteúdo do Elemento HTML.
• Atualizar ao alterar - Renderiza o elemento HTML sempre que um valor for alterado no formulário.

Para exibir imagens e arquivos PDF dentro de Ações de formulário, você precisa usar o componente do Elemento HTML . Confira os seguintes tutoriais:

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

Content

You can use the Content component to add information in your form, that is display-only. The value of the component is not submitted back to the server.

• Atualizar ao alterar — renderiza novamente o componente de conteúdo cada vez que um valor no formulário for alterado.

Email

Você pode usar o componente de E-mail para adicionar um campo para inserir endereços de e-mail. O componente E-mail é semelhante ao componente Campo de texto .

Número de telefone

You can use the Phone Number component to add a field for inputting phone numbers.

• Input Mask - Provides a predefined format for the phone number. For the phone number field, the default format is [phone].
  • 9 - numeric
  • a - alphabetical
  • * - alfanumérico
• Input Mask Placeholder Char - You can use a character as a placeholder in the field.
  Observação:

  O caractere placeholder é substituído por um espaço se for usado dentro da máscara.

Data/Hora

You can use the Date/Time component to input dates, times, or input both.

• Format - the format used for displaying the datetime value.

• Enable Date Input - allows users to input dates for this field.

• Use Input to add moment.js for minDate - enables the user to use an input for minDate moment function, instead of a calendar.

• Use calendar to set minDate - enables the user to use a calendar to set the minDate.

• Use Input to add moment.js for maxDate - enables the user to use an input for maxDate moment function, instead of a calendar.

• Usar calendário para definir maxDate - permite usar um calendário para definir a maxDate.

• Disable specific dates or dates by range - add dates that you want to ban. For example, 2027-08-11.

• Custom Disabled Dates - allows you to ban certain dates using a customized function.

• Disable weekends - allows you to ban weekends.

• Disable weekdays - allows you to ban weekdays.

• Enable Time Input - allows users to input time for this field.

• Tamanho da etapa na hora — o número de horas para aumentar ou diminuir o seletor de hora.

• Tamanho da etapa em minutos — o número de minutos para aumentar ou diminuir o seletor de hora.

• 12 Hour Time (AM/PM) - displays time in 12 hour periods, using AM or PM.

• Data padrão - define o valor padrão como uma data específica usando as funções Moment.js . Por exemplo, moment().substract(10, 'days').

  

Dia

You can use the Day component to ask for input for Day, Month, and Year, either through a number-type field or a select-type field.

• Type / Type of input - choose to give input for Day, Month, or Year either by typing in a number or by selecting options from a dropdown list.

Minimum / Maximum Year - choose the minimum / maximum year that can be entered.

• Require Day - the Day field must be filled in before the form renders.

• Require Month - the Month field must be filled in before the form renders.

• Require Year - the Year field must be filled in before the form renders.

• Maximum / Minimum Day - choose a minimum / maximum day that can be entered. You can also use Moment.js functions. For example, you can use moment().add(10, 'days').

  

Hora

You can use the Time component to input time in different formats.

• Input Type - select the type of widget you would like to use for inputting time: HTML5 Time Input (users can choose the time from a given panel) or Text Input with Mask (users can manually input the time).

Moeda

You can use the Currency component to display financial amounts using a certain currency. The component has an input mask that displays the currency icon and automatically adds commas based on the number that the user inputs. The component allows two decimal values.

• Moeda - escolha uma determinada moeda na lista suspensa.

PDF

Você pode usar o componente PDF para renderizar arquivos PDF dentro de suas ações de formulário.

de transações

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

• Modal Edit - abre um modal para editar o valor desse componente.
• Diretório — coloca todos os arquivos carregados neste componente, no diretório especificado. A string deve terminar com /.
• Somente para upload – permite que os usuários apenas carreguem arquivos. A opção de download estará indisponível quando marcada.
• Tipos de arquivo - permite que você especifique os tipos de arquivos, para classificar os tipos de arquivos que o usuário carrega. Recomendado quando um usuário carrega vários tipos de arquivos e você quer que o usuário especifique o tipo de cada arquivo carregado.
• Padrão de arquivo — permite especificar extensões de arquivo que terão permissão para carregar. Outras extensões de arquivo que não estiverem especificadas não serão carregadas.
• Tamanho mínimo do arquivo — define o tamanho mínimo do arquivo carregado.
• Tamanho máximo do arquivo — define o tamanho máximo do arquivo carregado.

Pesquisa

You can use the Survey component to allow users to answer multiple questions, by choosing only one value from a list.

• Questions - add the questions that the users should answer.
• Values - add the options that the user can select per question.

Componentes de layout

Colunas

You can use the Columns component to display other components in line, grouping them as columns.

• Column Properties - add columns to the component and configure them, by adjusting their Width, Offset, Push and Pull properties. After configuring the columns' layout, you can drag and drop other components into the Columns component.
• Ajustar colunas automaticamente - ajusta automaticamente as colunas se houver componentes aninhados ocultos.

Painel

Você pode usar o componente Painel para agrupar componentes do campo e adicioná-los em um painel nomeado.

• Theme - choose the theme of the panel from the dropdown list. The Bootstrap class is added to the wrapper div.

• Collapsible - allows you to collapse the panel.

• Inicialmente Recolhido - a propriedade está disponível apenas quando Recolhível estiver marcado. Recolha o painel quando o formulário está carregando.

  Tabela

É possível usar o componente Tabela para criar uma tabela que contenha outros componentes de forma dentro das colunas e linhas.

• Número de Linhas/Colunas — insira o número de linhas e colunas que deseja que sejam exibidos na tabela
• Clonar componentes de linha - 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.
• Cell Alignment- choose the horizontal alignment of the cells in the table.
• Striped - adds striped shading to rows.
• Bordered - adds visible borders to the table.
• Hover - highlights row when hovering the mouse over it.
• Condensed - condenses the size of the table.

Guias

You can use the Tabs component to group components into tabs. When the form renders, you can view one tab at a time.

The Tabs setting allows you to add, configure, reorder, and remove tabs.

Dados

Contêiner

You can use the Container component to wrap a set of fields into an object with a container key. A Container with the key financialPerformance submits as:

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

Grade de Dados

É possível usar o componente de Grade de dados para adicionar vários componentes em linha 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 de Grade de dados permite que você adicione vários campos duplicados em linha e em uma única grade.

In the Form Renderer window, the rows inside the Data Grid component can be added or removed.

• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Allow Reorder - reorder rows by dragging and dropping them.
• Equal Column Width - makes the widths of columns equal.
• Habilitar grupos de linhas - permite separar linhas em grupos. Adicione grupos, rotule-os e selecione as linhas para cada grupo.
• Inicializar vazio - a Grade de dados não terá linhas visíveis ao ser inicializada.

Editar Grade

Você pode usar o componente Editar grade para exibir dados em um formato de tabela. Você pode arrastar e soltar vários componentes de formulário em Editar grade para capturar carregamento de dados.

When the form renders, you can add a duplicate of the Edit Grid, by clicking Add Another.

• Abrir Primeira Linha quando estiver Vazio
  • abre a primeira linha quando Editar grade estiver vazia.
• Disable Adding / Removing Rows - hides the buttons that allow adding or removing rows when the form renders.
• Modelo de Cabeçalho/Linha/Rodapé — personalize a grade usando JavaScript.
• Add Another Text - changes the name of the Add Another button.
• Save Row Text - changes the text of the Save Row button.
• Remove Row Text - changes the text of the Remove Row button.

Comparação entre componentes do controle de grade

A tabela abaixo compara as capacidades dos controles de grade disponíveis no Form Designer. A tabela também descreve os cenários recomendados para usar cada componente do controle de grade: Grade de dados e Editar grade.

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