Os componentes de formulário são utilizados para compor os campos de entrada de um formulário criado no módulo BPA. Esses componentes podem ser utilizados para captura ou exibição de dados.
Atualmente são disponíveis para uso 25 componentes. Cada componente possui uma finalidade específica e todos são customizáveis.
¶ Área de texto
O componente Área de Texto possui como finalidade atender os cenários que é necessário coletar ou exibir múltiplas linhas de texto no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Linhas: Define a quantidade de linhas que será visível na área de texto.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Caixa de texto: Define a formatação permitida no campo. As opções disponíveis são:
- Misto: Permite letras maiúsculas e minúsculas.
- Maiúsculas: Permite somente letras maiúsculas.
- Minúsculas: Permite somente letras minúsculas.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Comprimento mínimo: Define uma quantidade mínima de caracteres que deve conter no campo.
-
Comprimento máximo: Define uma quantidade máxima de caracteres que deve conter no campo.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Arquivo
O componente Arquivo possui como finalidade atender os cenários que é necessário enviar ou baixar arquivos no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Arquivo" são disponíveis as seguintes configurações:
-
Padrão de Arquivo: Define os tipos de arquivos que o campo deve permitir o envio. Por exemplo:
Somente um tipo: .pdf
Todos os tipos: * -
Tamanho mínimo do arquivo: Define um tamanho mínimo que os arquivos deve conter para que o campo permita o envio. Por exemplo: 100KB
-
Tamanho máximo do arquivo: Define um tamanho máximo que os arquivos deve conter para que o campo permita o envio. Por exemplo: 1GB
No modal de customização deste componente, através da aba "Dados" é disponível a seguinte configuração:
- Valores múltiplos: Define se será permitido enviar mais de um arquivo no mesmo campo.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
- Saída no Objeto Result:
{
"arquivo": [
{
"storage": "base64",
"name": "Exemplo de arquivo.pdf",
"url": "data:application/pdf;base64,JVBERi0xLjUNCiW1tbW1DQoxIDAgb2JqDQo8PC9UeXBl....."
}
]
}
¶ Assinatura
O componente Assinatura possui como finalidade atender os cenários que é necessário coletar ou exibir uma assinatura no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Rótulo do Rodapé: Define o texto que aparecerá abaixo da área da assinatura.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Botão
O componente Botão possui como finalidade realizar o envio do formulário. Todo formulário deve possuir este componente e ele é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá dentro do botão.
-
Desativar no formulário inválido: Define se o botão será desativado caso ocorrá algum erro na validação do formulário.
-
Desativado: Desativa o botão no formulário. O botão ficará visível mas não poderá ser clicado.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Caixas de Seleção
O componente Caixas de Seleção possui como finalidade atender os cenários que é necessário disponibilizar no formulário uma lista de opções, onde o usuário pode selecionar uma ou mais opções. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Valores: Define as opções disponíveis no campo para usuário selecionar. Para fazer isso adicione e remova as opções de acordo com sua necessidade:
- Rótulo: Define o texto que será exibido ao lado da opção.
- Valor: Define o nome da propriedade que conterá o valor da opção na saída do Objeto Result.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
-
Número mínimo verificado: Define uma quantidade mínima de opções que deve selecionada no campo antes de enviar o formulário.
-
Número máximo verificado: Define uma quantidade máxima de opções que deve selecionada no campo antes de enviar o formulário.
-
Mensagem de erro mínima verificada: Define uma mensagem de erro personalizada que será exibida caso o usuário não selecione a quantidade mínima de opções requerida.
-
Mensagem de erro máxima verificada: Define uma mensagem de erro personalizada que será exibida caso o usuário não selecione a quantidade máxima de opções requerida.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
- Saída no Objeto Result:
{
"caixaDeSelecao": {
"selecao1": true,
"selecao2": false,
"selecao3": true
}
}
¶ Câmera
O componente Câmera possui como finalidade atender os cenários que é necessário enviar ou exibir uma imagem no formulário. Respondendo o formulário através do Inbox APP a imagem enviada pode ser retirada através da câmera do smartphone.
Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" é disponível a seguinte configuração:
- Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
No modal de customização deste componente, através da aba "Dados" é disponível a seguinte configuração:
- DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
- Saída no Objeto Result:
{
"camera": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXF....."
}
¶ Campo de texto
O componente Campo de Texto possui como finalidade atender os cenários que é necessário coletar ou exibir um texto curto no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Máscara de Entrada: Define uma máscara de entrada para o campo, garantindo o preenchimento correto com um formato predefinido. Para fazer isso você deve combinar os seguintes caracteres:
Númerico: 9
Alfabético: a
Alfanumérico: *
Exemplo de máscara de telefone: (999) 999- 9999
Esta configuração é habilitada apenas se a configuração "Permitir várias máscaras" estiver desmarcada.
-
Permitir várias máscaras: Define se é permitido adicionar mais de uma máscara para o campo. A máscara aplicada no campo será selecionada pelo usuário através de uma lista de opções exibida ao lado do campo.
-
Máscaras de entrada: Define as máscaras de entrada para o campo, garantindo o preenchimento correto com mais de um formato predefinido. Para fazer isso adicione e remova as máscaras de acordo com sua necessidade, no campo da coluna "Rótulos" insira o nome do item e no campo “Máscara” defina a máscara combinando os seguintes caracteres:
Númerico: 9
Alfabético: a
Alfanumérico: *
Exemplo de máscara de telefone: (999) 999- 9999
Esta configuração é habilitada apenas se a configuração "Permitir várias máscaras" estiver marcada.
- Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Caixa de texto: Define a formatação permitida no campo. As opções disponíveis são:
- Misto: Permite letras maiúsculas e minúsculas.
- Maiúsculas: Permite somente letras maiúsculas.
- Minúsculas: Permite somente letras minúsculas.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Comprimento mínimo: Define uma quantidade mínima de caracteres que deve conter no campo.
-
Comprimento máximo: Define uma quantidade máxima de caracteres que deve conter no campo.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Checkbox
O componente Checkbox possui como finalidade atender os cenários que é necessário disponibilizar no formulário um campo de entrada de valor booleano.
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá ao lado do campo. É o "nome" do campo.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Código de Barras
O componente Código de Barras possui como finalidade atender os cenários que é necessário enviar ou exibir um código de barras no formulário. Respondendo o formulário através do Inbox APP o código de barras enviado pode ser lido através da câmera do smartphone.
Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" é disponível a seguinte configuração:
- Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
No modal de customização deste componente, através da aba "Dados" é disponível a seguinte configuração:
- DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Código de Pagamento
O componente Código de Pagamento possui como finalidade atender os cenários que é necessário enviar ou exibir no formulário um código de pagamento de boletos e/ou títulos bancários. Respondendo o formulário através do Inbox APP o código de pagamento enviado pode ser lido através da câmera do smartphone.
Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" é disponível a seguinte configuração:
- Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
No modal de customização deste componente, através da aba "Dados" é disponível a seguinte configuração:
- DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
- Saída no Objeto Result:
{
"codigoDePagamento": "826700000001340033044003003519243004004200520213"
}
¶ Dia
O componente Dia possui como finalidade atender os cenários que é necessário coletar ou exibir datas no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Ocultar rótulos de entrada: Este campo possui o rótulo geral que aparece acima do campo e também os rótulos de cada campo de entrada (dia, mês e ano). Está configuração define se deve ser ocultado os rótulos dos campos de entrada (dia, mês e ano).
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dia" são disponíveis as seguintes configurações:
-
Tipo: Define o tipo do campo de entrada "Dia". As opções disponíveis são:
- Número: O campo será do tipo texto e o usuário poderá digitar o dia.
- Selecione: O campo será uma lista de opções e o usuário poderá selecionar o dia.
-
Placeholder: Define um texto de exemplo que aparecerá quando o campo "Dia" não estiver preenchido.
-
Escondido: Define se o campo de entrada "Dia" será ocultado no formulário.
-
Primeiro dia: Define que o campo "Dia" será o primeiro campo de entrada exibido, no caso a ordem vai ficar "Dia", "Mês" e "Ano".
No modal de customização deste componente, através da aba "Mês" são disponíveis as seguintes configurações:
-
Tipo: Define o tipo do campo de entrada "Mês". As opções disponíveis são:
- Número: O campo será do tipo texto e o usuário poderá digitar o mês.
- Selecione: O campo será uma lista de opções e o usuário poderá selecionar o mês.
-
Placeholder: Define um texto de exemplo que aparecerá quando o campo "Mês" não estiver preenchido.
-
Escondido: Define se o campo de entrada "Mês" será ocultado no formulário.
No modal de customização deste componente, através da aba "Ano" são disponíveis as seguintes configurações:
-
Tipo: Define o tipo do campo de entrada "Ano". As opções disponíveis são:
- Número: O campo será do tipo texto e o usuário poderá digitar o ano.
- Selecione: O campo será uma lista de opções e o usuário poderá selecionar o ano.
-
Ano mínimo: Define um ano mínimo que deve ser inserido no campo.
-
Ano máximo: Define um ano máximo que deve ser inserido no campo.
-
Placeholder: Define um texto de exemplo que aparecerá quando o campo "Ano" não estiver preenchido.
-
Escondido: Define se o campo de entrada "Ano" será ocultado no formulário.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Dia obrigatório: Define que é obrigatório preencher o campo "Dia".
-
Mês obrigatório: Define que é obrigatório preencher o campo "Mês".
-
Ano obrigatório: Define que é obrigatório preencher o campo "Ano".
-
Dia Máximo: Define uma data máxima permitida.
-
Dia Mínimo: Define uma data mínima permitida.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Escondido
O componente Escondido possui como finalidade atender os cenários que é necessário conter um valor oculto no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" é disponível a seguinte configuração:
- Rótulo: Define um nome para o campo oculto.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
O componente E-mail possui como finalidade atender os cenários que é necessário coletar ou exibir e-mail no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Caixa de texto: Define a formatação permitida no campo. As opções disponíveis são:
- Misto: Permite letras maiúsculas e minúsculas.
- Maiúsculas: Permite somente letras maiúsculas.
- Minúsculas: Permite somente letras minúsculas.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Comprimento mínimo: Define uma quantidade mínima de caracteres que deve conter no campo.
-
Comprimento máximo: Define uma quantidade máxima de caracteres que deve conter no campo.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Grade de dados
O componente Grades de Dados possui como finalidade atender os cenários que é necessário adicionar vários componentes a uma tabela. Para cada componente adicionado na grade de dados é criada uma coluna na tabela.
Além disso, o número de linhas adicionadas na tabela pode váriar de acordo com sua necessidade, o que é especialmente útil quando é necessário adicionar ou duplicar conjuntos de campos múltiplos no formulário.
Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima da grade de dados.
-
Desativar adição / remoção de linhas: Define se o usuário terá permissão para adicionar ou remover linhas da grade de dados.
-
Adicionar outro texto: Define um texto personalizado para o botão de adicionar linhas.
-
Desativado: Desativa a grade de dados no formulário. A grade de dados ficará visível mas nenhum campo dentro dela poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor padrão para os campos que estão dentro da grade de dados, antes da interação do usuário.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Comprimento mínimo: Define um número mínimo de linhas que a grade de dados deve possuir.
-
Comprimento máximo: Define um número máximo de linhas que a grade de dados deve possuir.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
- Saída no Objeto Result:
{
"gradeDeDados": [
{
"campoDeTexto": "João Sereno",
"email": "joao.sereno@itravel.com.br"
},
{
"campoDeTexto": "Yolanda",
"email": "yolanda@gmail.com"
}
]
}
¶ Localização
O componente Localização possui como finalidade atender os cenários que é necessário enviar ou exibir no formulário uma localização. Respondendo o formulário através do Inbox APP a localização enviada é obtida através da localização do smartphone.
Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" é disponível a seguinte configuração:
- Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
No modal de customização deste componente, através da aba "Dados" é disponível a seguinte configuração:
- DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
- Saída no Objeto Result:
{
"localizacao": {
"lat": -20.80415981753989,
"log": -49.364541891638254
}
}
¶ Moeda
O componente Moeda possui como finalidade atender os cenários que é necessário coletar ou exibir valores monetários no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Moeda: Define a moeda que será utilizada para a formatação do campo. Os valores possíveis são códigos de moeda (ISO-4217).
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Número
O componente Número possui como finalidade atender os cenários que é necessário coletar ou exibir valores numéricos no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Use o separador de milhares: Define se em grandes números deve ser utilizado um separador de milhares a cada três dígitos.
-
Casas decimais: As casas decimais são os números contados após a vírgula. Está configuração define um número máximo de casas decimais que será permitido no campo.
-
Requer Decimal: Define se deve ser sempre exibido casas decimais, mesmo que seja zero a esquerda.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Comprimento mínimo: Define um valor mínimo que deve ser inserido no campo antes que o formulário possa ser enviado.
-
Comprimento máximo: Define um valor máximo que deve ser inserido no campo antes que o formulário possa ser enviado.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Número de Telefone
O componente Número de Telefone possui como finalidade atender os cenários que é necessário coletar ou exibir números de telefone no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Máscara de Entrada: Define uma máscara de entrada para o campo, garantindo o preenchimento correto com um formato predefinido. Para fazer isso você deve combinar os seguintes caracteres:
Númerico: 9
Alfabético: a
Alfanumérico: *
Exemplo de máscara de telefone: (999) 999- 9999
Esta configuração é habilitada apenas se a configuração "Permitir várias máscaras" estiver desmarcada.
-
Permitir várias máscaras: Define se é permitido adicionar mais de uma máscara para o campo. A máscara aplicada no campo será selecionada pelo usuário através de uma lista de opções exibida ao lado do campo.
-
Máscaras de entrada: Define as máscaras de entrada para o campo, garantindo o preenchimento correto com mais de um formato predefinido. Para fazer isso adicione e remova as máscaras de acordo com sua necessidade, no campo da coluna "Rótulos" insira o nome do item e no campo “Máscara” defina a máscara combinando os seguintes caracteres:
Númerico: 9
Alfabético: a
Alfanumérico: *
Exemplo de máscara de telefone: (999) 999- 9999
Esta configuração é habilitada apenas se a configuração "Permitir várias máscaras" estiver marcada.
- Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Caixa de texto: Define a formatação permitida no campo. As opções disponíveis são:
- Misto: Permite letras maiúsculas e minúsculas.
- Maiúsculas: Permite somente letras maiúsculas.
- Minúsculas: Permite somente letras minúsculas.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Pesquisa
O componente Pesquisa possui como finalidade atender os cenários em que é necessário no formulário uma enquete de perguntas e respostas. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Questões: Define as perguntas exibidas na enquete de pesquisa. Para fazer isso adicione e remova as questões de acordo com sua necessidade:
- Rótulo: Define o texto da pergunta.
- Valor: Define o nome da propriedade de saída do Objeto Result, que conterá o valor de resposta da pergunta.
-
Valores: Define as respostas que podem ser selecionadas nas perguntas. Para fazer isso adicione e remova as resposta de acordo com sua necessidade:
- Rótulo: Define o texto de resposta da pergunta.
- Valor: Define um valor para está resposta. Esse valor será inserido na propriedade de saída do Objeto Result.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
- Saída no Objeto Result:
{
"pesquisa": {
"pergunta1": "resposta1",
"pergunta2": "resposta2",
"pergunta3": "resposta3"
}
}
¶ QR Code
O componente QR Code possui como finalidade atender os cenários que é necessário inserir ou exibir o valor de um QR Code no formulário. Respondendo o formulário através do Inbox APP o Qr Code enviado pode ser lido através da câmera do smartphone.
Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" é disponível a seguinte configuração:
- Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
No modal de customização deste componente, através da aba "Dados" é disponível a seguinte configuração:
- DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Rádio
O componente Rádio possui como finalidade atender os cenários que é necessário disponibilizar no formulário uma lista de opções, onde o usuário pode selecionar apenas uma opção. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Valores: Define as opções disponíveis no campo para usuário selecionar. Para fazer isso adicione e remova as opções de acordo com sua necessidade:
- Rótulo: Define o texto que será exibido ao lado da opção.
- Valor: Define o nome da propriedade que conterá o valor da opção na saída do Objeto Result.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Selecione
O componente Selecione possui como finalidade atender os cenários que é necessário disponibilizar no formulário uma lista suspensa de opções. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Tipo de widget: Define o tipo de entrada deste campo. As opções disponíveis são:
- HTML 5: O campo será uma lista suspensa padrão do HTML 5.
- ChoicesJS: O campo será uma lista suspensa com busca dinâmica.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Opões únicas: Define se o campo permitirá listar opções repetidas. No caso, se está configuração estiver habilitada e na lista de opções tiver duas opções iguais, será disponibilizada apenas uma das opções para o usuário.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define uma opção selecionada, antes da interação do usuário.
-
Caminho do ID: Define o caminho do id.
-
Modelo do Item: Define o modelo HTML que será exibido nas opções. Por exemplo:
<span>Opção {{ item.descricao }}</span> -
Tipo de fonte de dados: Define a fonte de dados que será utilizada para carregar as opções, dependo da fonte escolhido será habilitada novas configurações. Os tipos de fonte disponíveis são:
1. Valores: Com esse tipo de fonte, os rótulos e valores da lista opções serão fixos e definidos por você. Ao utilizar este tipo de fonte será habilitado a seguinte configuração:
- Valores da fonte de dados: Define as opções disponíveis no campo para usuário selecionar. Para fazer isso adicione e remova as opções de acordo com sua necessidade, no campo da coluna "Rótulo" insira a descrição da opção e no campo da coluna "Valor" defina o valor da opção.
2. JSON: Com esse tipo de fonte, os rótulos e valores da lista opções serão fixos e definidos por um JSON. Ao utilizar este tipo de fonte será habilitado a seguinte configuração:
-
JSON bruto da fonte de dados: Define o JSON utilizado como fonte de dados. Por exemplo:
[ { "id": 0, "usuario": "Leonor" }, { "id": 1, "usuario": "Kathy" } ]Para funcionar corretamente não se esqueça de indicar na configuração "Modelo do Item" a propriedade do JSON que será a descrição da opção.
-
Propriedade de Valor: Define uma propriedade específica do JSON para usar como valor da opção selecionada. Se não for especificado, o próprio item do JSON será utilizado.
3. URL: Com esse tipo de fonte, os rótulos e valores da lista opções será dinâmico e fornecido por uma API. Ao utilizar este tipo de fonte será habilitado a seguinte configuração:
-
URL da fonte de dados: Define a URL (endpoint) que fornecerá os dados através de um JSON. Por exemplo:
URL de exemplo: {{urlExemplo}}/api/getExemplo? -
Dados de carregamento lento: Define que será solicitado os dados para a URL somente quando o usuário clicar na lista de opções. Isso pode melhorar o desempenho se você tiver muitas listas de opções.
-
Solicitar Cabeçalhos: Define todos os cabeçalhos que devem ser enviados junto com a solicitação para o url, isto geralmente é utilizado para autenticação. No campo da coluna "Chave" insira a descrição da chave e no campo da coluna "Valor" insira o valor da chave.
-
Caminho de Dados: Define o caminho que está localizada a propriedade que contém os valores que serão utilizados na lista de opções. Por exemplo: results.items ou results[0].items
-
Propriedade de Valor: Define uma propriedade específica do JSON de retorno para usar como valor da opção selecionada. Se não for especificado, o próprio item do JSON será utilizado.
-
Nome da consulta de pesquisa: Define o nome do parâmetro de consulta da solicitação. O servidor da URL deve lidar com esse parâmetro de consulta. Por exemplo:
Nome do parâmetro configurado: query Resultado na URL: {{urlExemplo}}/api/getExemplo?query=teste -
Comprimento mínimo da pesquisa: Define uma quantidade mínima de caracteres que deve ser digitado antes de realizar a solicitação na URL.
-
Consulta de filtro: Define parâmetros e valores de consulta adicional na solicitação. O servidor da URL deve lidar com esses parâmetros de consulta.
Parâmetros configurado: page=1&pageSize=10 Resultado na URL: {{urlExemplo}}/api/getExemplo?page=1&pageSize=10 -
Classificar consulta: Define um valor para o parâmetro de ordenação da solicitação. O servidor da URL deve lidar com esses parâmetros de ordenação.
Valor configurado: id Resultado na URL: {{urlExemplo}}/api/getExemplo?&sort=id
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
¶ Senha
O componente Senha possui como finalidade atender os cenários que é necessário coletar uma senha no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Placeholder: Define o texto de exemplo que aparecerá quando o campo não estiver preenchido.
-
Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Caixa de texto: Define a formatação permitida no campo. As opções disponíveis são:
- Misto: Permite letras maiúsculas e minúsculas.
- Maiúsculas: Permite somente letras maiúsculas.
- Minúsculas: Permite somente letras minúsculas.
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Comprimento mínimo: Define uma quantidade mínima de caracteres que deve conter no campo.
-
Comprimento máximo: Define uma quantidade máxima de caracteres que deve conter no campo.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Entrada no formulário:
¶ Tabela de dados
O componente Tabela de dados possui como finalidade atender os cenários que é necessário exibir uma tabela de dados com valores no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" é disponível a seguinte configuração:
- Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Propriedades da coluna: Define as colunas necessárias na tabela. Para isso adicione e remova as colunas de acordo com sua necessidade:
- Coluna: Define o nome da coluna.
- Valor: Define a propriedade do objeto Business Object (bo) que contém o valor que será exibido na coluna.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
- Propriedade no objeto Business Object (bo):
{
"listaAluno": [
{
"nome": "Wilma Fox",
"idade": 30,
"email": "wilmafox@gmail.com"
},
{
"nome": "Marilyn Foreman",
"idade": 32,
"email": "marilynforeman@gmail.com"
},
{
"nome": "Kim Byrd",
"idade": 25,
"email": "kimbyrd@gmail.com"
}
]
}
- Tabela no formulário:
¶ Tempo
O componente Tempo possui como finalidade atender os cenários que é necessário coletar ou exibir um horário/tempo no formulário. Este componente é representado pela seguinte figura:
No modal de customização deste componente, através da aba "Exibição" são disponíveis as seguintes configurações:
-
Rótulo: Define o texto que aparecerá acima do campo. É o "nome" do campo.
-
Tipo de entrada: Define o tipo do campo de entrada do campo. As opções disponíveis são:
- Entrada de tempo HTML5: O campo será do tipo "time" e o usuário poderá selecionar ou escrever tempo.
- Entrada de texto com máscara: O campo será do tipo texto com uma máscara de entrada.
-
Formato: Máscara que será utilizada para a formatação de entrada do campo. Por exemplo: HH:mm:ss
Esta configuração é habilitada apenas se na configuração "Tipo de entrada" estiver selecionada a opção "Entrada de texto com máscara".
- Desativado: Desativa o campo no formulário. O campo ficará visível mas não poderá ser editado.
No modal de customização deste componente, através da aba "Dados" são disponíveis as seguintes configurações:
-
DataBind: Define a propriedade do objeto Business Object (bo) que servirá de referência a este campo.
-
Valor Padrão: Define um valor para este campo, antes da interação do usuário.
-
Formato dos dados: Define a formatação do valor de saída deste campo no objeto Objeto Result. Por exemplo: HH:mm
No modal de customização deste componente, através da aba "Validação" são disponíveis as seguintes configurações:
-
Validar em: Define o momento que será acionado a validação front-end do campo. As opções disponíveis são:
- Mudança: A validação é acionado ao mudar o valor do campo.
- Borrão: A validação é acionada ao perder o foco do campo.
-
Obrigatório: Define se o preenchimento do campo é obrigatório.
-
Mensagem de erro personalizada: Define uma mensagem de erro personalizada que será exibida caso ocorrá algum erro na validação.
No modal de customização deste componente, através da aba "API" é disponível a seguinte configuração:
- Nome da propriedade: Define o nome da propriedade do Objeto Result que conterá o valor deste campo.
No modal de customização deste componente, através da aba "Condicional" é possível definir uma condição para que o componente seja exibido no formulário. Para definir essa condição são disponíveis as seguintes configurações:
-
Este componente deve exibir: Define o resultado da condição em que o componente deve ser exibido no formulário. As duas opções disponíveis são:
- Verdadeiro: O componente vai ser exibido caso a condição seja verdadeira.
- Falso: O componente vai ser exibido caso a condição seja falsa.
-
Quando o componente do formulário: Define o componente do formulário que será utilizado na condição.
-
Tiver o valor: Define o valor do componente que será utilizado na condição.
