Rellenar los campos Fecha y Hora con la hora actual mediante una extensión del Editor de fragmentos de contenido en Experience Manager as a Cloud Service
En Adobe Experience Manager as a Cloud Service, el campo Fecha/Hora estándar en los modelos de fragmento de contenido permanece vacío cuando los autores crean o editan un fragmento de contenido en el nuevo Editor de fragmentos de contenido. En el editor anterior, estos campos se rellenaban previamente con la hora del sistema actual, pero el nuevo editor los deja vacíos y requiere que los autores introduzcan el valor manualmente. Este cambio afecta a los flujos de trabajo de creación que dependen de los valores de tiempo predeterminados. Para rellenar el campo automáticamente, implemente un campo personalizado a través del marco de trabajo de extensibilidad de la interfaz de usuario del Editor de fragmentos de contenido y establezca la hora actual cuando el valor del campo esté vacío. Para solucionarlo, cree, implemente y pruebe la extensión de campo personalizado.
Descripción description
Entorno
- Adobe Experience Manager as a Cloud Service (se admite la extensibilidad de la IU del Editor de fragmentos de contenido)
Problema/Síntomas
- Los campos de fecha y hora de los fragmentos de contenido están vacíos de forma predeterminada en el nuevo editor.
- Los autores deben introducir manualmente la hora actual.
Causa
El nuevo Editor de fragmentos de contenido no rellena automáticamente los campos de fecha y hora de forma predeterminada. Para restaurar este comportamiento, se debe implementar un campo personalizado mediante el marco de trabajo de extensibilidad.
Resolución resolution
Para rellenar automáticamente la hora actual, siga estos pasos:
-
Instale y actualice la CLI de Adobe App Builder.
- Ejecutar
npm install -g @adobe/aio-cli. - Ejecutar
aio plugins:update.
- Ejecutar
-
Inicialice un proyecto de extensión del Editor de fragmentos de contenido con la plantilla de editor:
- Ejecutar
aio app init --template @adobe/aem-cf-editor-ui-ext-tpl.
- Ejecutar
-
Implemente un componente React del campo Fecha/hora personalizado:
- Utilice la API de campos personalizados para registrar el campo personalizado.
- En el componente, compruebe si el valor del campo está vacío. Si es así, configúrelo en la hora actual del sistema.
- Ejemplo:
"
importar { useEffect } de ‘react’;
exportar función predeterminada CustomDateTimeField({ value, onChange }) {
useEffect() => {
if (!value) {
onChange(new Date().toISOString());
}
, [ value, onChange] );
/ Procesar aquí la entrada de fecha y hora, lo que permite el reemplazo manual
"
-
- registre este componente como un campo personalizado para la propiedad Fecha/Hora mediante el marco de trabajo de extensibilidad.
4. Implemente la extensión en el entorno de AEM siguiendo los pasos de implementación estándar para las extensiones de App Builder.
5. Pruebe la extensión: - abra un fragmento de contenido en el nuevo editor.
- agregue o edite un campo de fecha y hora y verifique que se rellene automáticamente con la hora actual del sistema.
- registre este componente como un campo personalizado para la propiedad Fecha/Hora mediante el marco de trabajo de extensibilidad.
- Confirmar que los autores aún pueden modificar el valor según sea necesario.