[AEM Forms]{class="badge positive" title="Aplicável ao AEM Forms)."}
Componente de Campo de data/hora no Editor de comunicação interativa
1. Introdução
O componente Campo de Data/Hora no editor de IC (Comunicação Interativa) permite que os autores insiram campos em que os usuários podem selecionar ou inserir valores de data e/ou hora. Esse componente é normalmente usado para capturar informações como data de nascimento, horários de compromisso, slots de reserva ou datas de emissão/expiração de documentos.
O campo oferece suporte a várias opções de formatação (por exemplo, formatos DD/MM/AAAA, 24 horas ou 12 horas), restrições de validação e personalização da aparência para corresponder ao design da comunicação. Ele melhora a experiência do usuário ao reduzir erros manuais de entrada e promover consistência na coleta de dados.
2. Padrão de exibição
Você pode atribuir um padrão de exibição a um campo de Data/Hora do painel Propriedades — por exemplo: 04/01/2007 2:30 PM.
O padrão configurado é refletido imediatamente na pré-visualização da tela de desenho e é preservado nos ciclos de salvamento e recarregamento. Para casos de uso avançados, é possível definir uma cláusula de imagem XFA personalizada para obter qualquer formato de saída desejado.
Configurar um padrão de exibição
- Selecione o componente Campo de data/hora na tela de design.
- Abra o painel Propriedades.
- Na seção Padrão de Exibição, escolha um padrão predefinido ou insira uma cláusula de imagem personalizada.
- Visualize o valor formatado na tela.
Exemplo de padrão personalizado (Data/Hora)
date{MM/DD/YYYY} time{HH:MM}Tokens de tempo comuns:
2007-04-01T14:30). Os valores que não seguem esse formato são exibidos como estão, sem a formatação padrão aplicada.3. Propriedades
O componente Campo de data/hora inclui várias propriedades configuráveis:
2.1. Campo básico
-
Nome: um identificador exclusivo para o campo. Usado para referência em regras, expressões e associações de dados.
-
Legenda: o rótulo exibido ao lado do campo para indicar sua finalidade (por exemplo, “Data de Nascimento”).
-
Data: permite que os usuários escolham ou insiram uma data de calendário.
-
Hora: Habilita a entrada ou a seleção de valores de hora específicos, se configurada.
-
Reserva: um valor de fallback exibido quando nenhuma entrada é fornecida; útil para cenários somente leitura ou de impressão.
-
Aparência: selecione um estilo visual, como sublinhado, bordado ou plano, para renderização consistente da interface do usuário.
2.2. Tipografia
Controla o estilo do texto dentro do campo de data/hora:
-
Variação de fonte: As opções incluem Regular, Negrito, Itálico, dependendo dos requisitos do tema.
-
Tamanho da fonte: Padrão definido como 10 pt para manter a consistência com o layout do formulário.
2.3. Posição
-
Descrição: Define o posicionamento do campo de data/hora no layout do formulário.
-
Configurações:
-
Coordenadas X e Y
-
Altura e largura (medidas em mm ou pixels) para dimensionar o campo com precisão.
-
2.4. Margem
Define o espaçamento em torno do campo para obter alinhamento limpo e flexibilidade de layout:
-
Superior (Acima)
-
Inferior (Abaixo)
-
Esquerda
-
Direita
2.5. Aparência
Define o estilo do contêiner para manter a consistência visual e a clareza:
-
Preenchimento: Cor de fundo do campo.
-
Traço: Cor da borda ao redor do campo.
-
Largura: Espessura da borda.
-
Estilo: tipos de borda como sólida, tracejada ou nenhuma.
-
Arestas: escolha entre cantos arredondados ou afiados, dependendo do tema do formulário.
2.6. Presença
Determina como o campo se comporta no tempo de execução:
-
Visível: o campo é mostrado aos usuários e ocupa espaço de layout.
-
Oculto (mantém espaço): O campo não está visível, mas o espaço reservado ainda está no layout.
2.7. Vinculação de dados
Vincula o campo a uma fonte de dados para armazenar ou recuperar valores.
-
Tipo de Associação de Dados: Especifica como o campo se conecta aos dados.
-
Nome de Uso: Associa o campo usando o nome de campo definido no esquema.
-
Usar dados globais: Conecta o campo aos dados de nível global compartilhados na comunicação.
-
Sem Associação de Dados: O campo não está conectado a nenhum dado de back-end (usado apenas para valores visuais ou calculados).
4. Uso
O Campo de data/hora é ideal em cenários nos quais dados temporais consistentes são necessários. Casos de uso comuns incluem:
-
Capturando Data de Nascimento, Data do Compromisso ou Hora do Evento
-
Registrando em Log Datas de Emissão/Expiração de Documentos
-
Selecionando Slots de Entrega ou Retirada
-
Registrando Carimbos de Data/Hora de Transação
Os autores podem combinar o campo com contêineres de layout, validações ou regras condicionais para controlar o formato, os campos obrigatórios e a visibilidade contextual.
5. Práticas recomendadas
-
Use legendas ocultas, como “Selecionar uma data” ou “Hora do compromisso” para orientar os usuários.
-
Habilite o seletor de data/hora para melhorar o UX e reduzir os erros de entrada.
-
Aplicar restrições de formato (por exemplo, somente datas futuras) quando necessário.
-
Forneça um valor de reserva para acessibilidade ou fallback de impressão.
-
Mantenha a tipografia e a aparência consistentes com o design geral do formulário.
-
Vincule o campo a um caminho de esquema válido para garantir a captura e o processamento adequados dos dados.
O componente Campo de data/hora no editor de comunicação interativa é um componente eficiente e fácil de usar que simplifica a entrada com base no tempo. Com a configuração correta de estilo, manuseio de dados e controles de layout, ele permite experiências de formulário limpas, confiáveis e intuitivas para usuários e sistemas de back-end.