Preencher campos de Data e hora com a hora atual usando uma extensão do Editor de fragmento de conteúdo no Experience Manager as a Cloud Service
No Adobe Experience Manager as a Cloud Service, o campo padrão Data/Hora nos modelos de fragmento de conteúdo permanece vazio quando os autores criam ou editam um fragmento de conteúdo no novo Editor de fragmento de conteúdo. No editor herdado, esses campos foram pré-preenchidos com a hora atual do sistema, mas o novo editor os deixa vazios e requer que os autores insiram o valor manualmente. Essa alteração afeta os workflows de criação que dependem dos valores de tempo padrão. Para preencher o campo automaticamente, implemente um campo personalizado por meio da estrutura de extensibilidade da interface do editor de fragmentos de conteúdo e defina a hora atual quando o valor do campo estiver vazio. Para corrigir isso, crie, implante e teste a extensão de campo personalizado.
Descrição description
Ambiente
- Adobe Experience Manager as a Cloud Service (a extensibilidade da interface do usuário do Editor de fragmento de conteúdo é compatível)
Problema/Sintomas
- Os campos de Data/Hora nos fragmentos de conteúdo estão vazios por padrão no novo editor.
- Os autores devem inserir manualmente a hora atual.
Causa
O novo Editor de fragmento de conteúdo não preenche automaticamente campos de Data/Hora por padrão. Para restaurar esse comportamento, um campo personalizado deve ser implementado usando a estrutura de extensibilidade.
Resolução resolution
Para preencher a hora atual automaticamente, siga estas etapas:
-
Instale e atualize a CLI do Adobe App Builder.
- Executar
npm install -g @adobe/aio-cli. - Executar
aio plugins:update.
- Executar
-
Inicialize um projeto de extensão do Editor de fragmento de conteúdo usando o modelo do editor:
- Executar
aio app init --template @adobe/aem-cf-editor-ui-ext-tpl.
- Executar
-
Implementar um campo personalizado Data/hora Reagir componente:
- Use a API Campos personalizados para registrar seu campo personalizado.
- No componente, verifique se o valor do campo está vazio. Em caso afirmativo, defina-o para a hora atual do sistema.
- Exemplo:
"
importar { useEffect } de ‘react’;
exportar função padrão CustomDateTimeField({ value, onChange }) {
useEffect(() => {
if (!value) {
onChange(new Date().toISOString());
}
}, [ value, onChange] );
// Renderize sua entrada de data/hora aqui, permitindo substituição manual
}
"
- Registre esse componente como um campo personalizado para sua propriedade de Data/Hora usando a estrutura de extensibilidade.
4. Implante sua extensão no ambiente do AEM seguindo as etapas de implantação padrão para extensões do App Builder.
5. Teste a extensão: - Abrir um fragmento de conteúdo no novo editor.
- Adicione ou edite um campo de Data/Hora e verifique se ele é preenchido automaticamente com a hora atual do sistema.
- Confirmar os autores ainda pode modificar o valor, conforme necessário.