Numérico

Descrição

O componente Numérico permite que os usuários insiram valores numéricos em seus formulários. Ele é ideal para coletar:

  • Quantidades

  • Preços

  • Pesos

  • Medidas

Abas e Campos

1 - Aparência:

image-20240305-191051.png
  • Título: O título que será exibido acima do campo numérico.

  • Placeholder: Um texto informativo que aparece dentro do campo numérico quando ele está vazio.

  • Descrição: Uma descrição mais detalhada do que o usuário deve inserir no campo numérico.

  • Tamanho (porcentagem): Define a largura do campo numérico em porcentagem da largura total do formulário.

  • Prefixo: Um texto que será exibido antes do valor numérico.

  • Sufixo: Um texto que será exibido depois do valor numérico.

  • Tipo de teclado: Define o tipo de teclado que será exibido quando o usuário focar no campo numérico. As opções disponíveis são:

    • Numérico: Exibe um teclado numérico padrão.

    • Numérico com pontuação: Exibe um teclado numérico com pontuação (vírgula e ponto).

  • Aparece no DataGrid (booleano): Define se o componente será exibido em um DataGrid.

  • Aparece no Datalist (booleano): Define se o componente será exibido em um Datalist.

2 - Dados:

image-20240305-191120.png
  • Precisão (casas decimais): Define o número de casas decimais que serão permitidas no valor numérico.

  • Decimal (separador decimal): Define o caractere que será usado como separador decimal.

  • Milhares (separador de milhares): Define o caractere que será usado como separador de milhares.

  • Valor padrão: O valor que será preenchido automaticamente no campo numérico quando o formulário for aberto.

3 - API:

  • Nome da propriedade: O nome da propriedade que será usada para acessar o valor inserido na área de texto no código e que será enviado no json via web-hook.

  • Nome da propriedade customizada: Permite definir um nome customizado para a propriedade da área de texo.

4 - Validação:

  • Valor mínimo: Define o valor mínimo que o usuário pode inserir no campo numérico.

  • Valor máximo: Define o valor máximo que o usuário pode inserir no campo numérico.

  • Obrigatório (booleano): Define se a inserção de um valor numérico é obrigatória ou não.

  • Validação condicional: Permite definir regras de validação que dependem do valor de outros campos do formulário.

  • Mensagem de erro customizada: Permite personalizar a mensagem de erro que é exibida quando a validação falha.

Regras de Campos Condicionais:

As regras de campos condicionais permitem que você oculte ou desabilite o componente Arquivo com base no valor de outros campos do formulário.

Exemplo:

  • Se o usuário selecionar a opção "Sim" no campo "Você possui um currículo?", o componente Arquivo será exibido.

  • Se o usuário selecionar a opção "Não" no campo "Você possui um currículo?", o componente Arquivo será ocultado.

Para criar uma regra de campo condicional:

  1. Clique na aba "Regras".

  2. Clique no botão "Adicionar regra".

  3. Selecione o campo do qual você deseja que a regra dependa.

  4. Selecione o operador de comparação (igual a, diferente de, etc.).

  5. Selecione o valor que o campo deve ter para que o componente seja exibido.

  6. Clique no botão "Salvar".

5 - Regras:

  • Ocultar (booleano): Permite ocultar o componente Botão de Opção com base em regras de validação condicional.

  • Desabilitar (booleano): Permite desabilitar o componente Botão de Opção com base em regras de validação condicional.

Regras de Campos Condicionais:

As regras de campos condicionais permitem que você oculte ou desabilite o componente Arquivo com base no valor de outros campos do formulário.

Exemplo:

  • Se o usuário selecionar a opção "Sim" no campo "Você possui um currículo?", o componente Arquivo será exibido.

  • Se o usuário selecionar a opção "Não" no campo "Você possui um currículo?", o componente Arquivo será ocultado.

Para criar uma regra de campo condicional:

  1. Clique na aba "Regras".

  2. Clique no botão "Adicionar regra".

  3. Selecione o campo do qual você deseja que a regra dependa.

  4. Selecione o operador de comparação (igual a, diferente de, etc.).

  5. Selecione o valor que o campo deve ter para que o componente seja exibido.

  6. Clique no botão "Salvar".

6 - Eventos:

Utilize o exemplo de API utilitário que possuímos para entender o funcionamento clique aqui

  • Possui evento (sim ou não): Define se a área de texto dispara eventos quando o usuário interage com ela.

  • URL: Define a URL para a qual os dados da área de texto serão enviados quando um evento for disparado.

  • Dados para requisição: Define os dados que serão enviados junto com a requisição para a URL.

  • Trigger: Define o evento que dispara a ação.

 

Mobile Saúde - Mosia Omnichannel