Corfix Form Builder: Utilização do componente «Data e hora».

1. Separador «Exibição»

O separador «Exibição» controla a aparência geral do componente «Data/Hora».

• Rótulo:

  • Este é o título visível do seu campo de data/hora que os utilizadores irão ver. É um campo obrigatório.

  • Exemplo: «Data do Incidente», «Hora de Início», «Data e Hora de Conclusão».

• Posição do rótulo:

  • Determina onde o rótulo é apresentado em relação ao campo de introdução de dados (por exemplo, em cima, à esquerda, à direita, em baixo).

  • Predefinição: Topo.

• Permitir introdução manual:

  • Se esta opção estiver marcada, os utilizadores podem introduzir a data/hora diretamente no campo, para além de utilizarem o calendário ou o seletor de hora.

• Texto de preenchimento:

  • Texto que aparece no interior do campo de introdução antes de o utilizador escrever qualquer coisa. Trata-se de uma sugestão para o utilizador sobre o formato esperado.

  • Exemplo: «MM/DD/AAAA HH:MM AM/PM».

• Descrição:

  • Fornece texto explicativo adicional para o campo, normalmente apresentado abaixo da caixa de introdução de dados.

  • Exemplo: «Introduza a data e a hora exatas em que o evento ocorreu.»

• Dica de ferramenta:

  • Texto que aparece quando o utilizador passa o cursor do rato sobre o campo. Útil para fornecer ajuda rápida ou contexto.

• Classe CSS personalizada:

  • Permite que utilizadores avançados apliquem estilos personalizados ao componente utilizando classes CSS.

• Ocultar rótulo:

  • Se esta opção estiver marcada, o rótulo do componente não será apresentado.

• Edição modal:

  • (Os detalhes não estão totalmente visíveis na captura de ecrã, mas, normalmente, referem-se à edição numa janela modal pop-up).

• Incluir no relatório:

  • Se esta opção estiver marcada, os dados deste campo serão incluídos nos relatórios.

2. Separador «Data»

Este separador contém definições específicas relacionadas com a introdução da data.

• Ativar introdução de data:

  • Se esta opção estiver marcada, a funcionalidade de seleção de data (seletor de calendário) estará disponível.

• Desativar fins de semana:

  • Se esta opção estiver marcada, os utilizadores não poderão selecionar sábado ou domingo no calendário.

• Desativar dias da semana:

  • Se esta opção estiver marcada, os utilizadores não poderão selecionar dias de segunda a sexta-feira no calendário.

3. Separador «Hora»

Este separador contém definições específicas relacionadas com a introdução da hora.

• Ativar introdução da hora:

  • Se esta opção estiver marcada, a funcionalidade de seleção da hora (seletor de hora) estará disponível.

• Incrimento de horas:

  • Determina o incremento para a seleção de horas (por exemplo, «1» para incrementos de uma hora, «2» para cada duas horas).

  • Predefinição: 1.

• Intervalo de minutos:

  • Determina o incremento para a seleção de minutos (por exemplo, «1» para cada minuto, «15» para incrementos de um quarto de hora).

  • Predefinição: 1.

• Formato de 12 horas (AM/PM):

  • Se esta opção estiver marcada, o seletor de hora utilizará um formato de 12 horas com seletores AM/PM. Se não estiver marcada, utilizará um formato de 24 horas.

4. Separador «Dados»

O separador «Dados» gere as propriedades dos dados subjacentes ao campo de data/hora.

• Valores múltiplos:

  • Se marcada, permite ao utilizador introduzir vários valores de data/hora para este campo.

• Valor predefinido:

  • A data/hora preenchida automaticamente que aparece no campo de introdução quando o formulário é carregado. Os utilizadores podem substituir este valor. Trata-se de um valor estático.

• Data predefinida:

  • Permite definir uma data predefinida dinâmica, frequentemente utilizando uma função como moment() para definir a data e hora atuais.

5. Separador «Validação»

O separador «Validação» define regras para garantir que a data e hora introduzidas pelo utilizador cumprem requisitos específicos.

• Obrigatório:

  • Se esta opção estiver marcada, o utilizador deve introduzir uma data/hora neste campo antes de enviar o formulário.

• Utilizar o calendário para definir a data mínima:

  • Permite-lhe selecionar uma data mínima a partir de um calendário, impedindo que os utilizadores selecionem datas anteriores a essa data.

• Utilizar o calendário para definir a data máxima (maxDate):

  • Permite-lhe selecionar uma data máxima a partir de um calendário, impedindo que os utilizadores selecionem datas posteriores a essa data.

6. Separador «Condicional»

O separador «Condicional» permite-lhe definir regras para determinar quando este componente de data/hora deve ser apresentado ou ocultado, com base nos valores de outros componentes do formulário.

• Simples:

  • Trata-se normalmente de um botão de alternância ou de um menu suspenso para escolher entre lógica condicional simples e avançada.

• Este componente deve «Mostrar»:

  • Escolha se o componente deve «Mostrar» ou «Ocultar» (opções implícitas) com base na condição.

• Quando o componente do formulário:

  • Selecione outro componente no seu formulário cujo valor irá acionar a condição.

• Tiver o valor:

  • Especifique o valor exato que o componente do formulário selecionado deve ter para que a condição seja cumprida.

  Exemplo: Pode configurar uma regra para que o campo «Data de regresso» só seja apresentado quando a caixa de seleção «Trata-se de uma viagem de ida e volta?» estiver marcada.

Painel de Pré-visualização

O painel de pré-visualização, no lado direito da caixa de diálogo, mostra-lhe como o campo de introdução «Data/Hora» aparecerá visualmente no seu formulário. Normalmente, inclui um campo de introdução de texto e um ícone de calendário, proporcionando-lhe uma perceção em tempo real da interação do utilizador.

Ações na parte inferior da caixa de diálogo:

• Guardar: Guarda todas as alterações efetuadas nas definições do Componente Data/Hora.

• Cancelar: descarta quaisquer alterações não guardadas e fecha a caixa de diálogo.

• Remover: Elimina o componente «Data/Hora» do formulário.

Boas práticas para o componente «Data/Hora»:

• Seja específico com o rótulo: Indique claramente que data/hora é necessária (por exemplo, «Data de inspeção», «Hora de início»).

• Ative a introdução de data/hora de forma adequada: Só ative «Introdução de data» ou «Introdução de hora» se ambas forem realmente necessárias. Se apenas for necessária a data, desative a hora e vice-versa.

• Defina datas mínimas/máximas para o controlo: Utilize minDate e maxDate em «Validação» para impedir entradas ilógicas (por exemplo, datas futuras para eventos passados ou datas fora do período do projeto).

• Considere a «Data Padrão»: Para eventos atuais, defina «Data Padrão» como moment() para preencher automaticamente a data/hora atual, poupando tempo aos utilizadores.

• Utilize a exibição condicional: oculte os campos de data/hora até que sejam relevantes, simplificando o formulário (por exemplo, mostre a «Data de fim» apenas após a introdução de uma «Data de início»).