Compilare i campi di data e ora con l’ora corrente utilizzando un’estensione dell’Editor frammento di contenuto in Experience Manager as a Cloud Service
In Adobe Experience Manager as a Cloud Service, il campo Data/ora standard nei modelli per frammenti di contenuto rimane vuoto quando gli autori creano o modificano un frammento di contenuto nel nuovo Editor frammenti di contenuto. Nell’editor legacy, questi campi erano precompilati con l’ora di sistema corrente, ma il nuovo editor li lascia vuoti e richiede agli autori di immettere il valore manualmente. Questa modifica influisce sull’authoring dei flussi di lavoro che dipendono dai valori di tempo predefiniti. Per compilare automaticamente il campo, implementa un campo personalizzato tramite il framework di estensibilità dell’interfaccia utente dell’Editor frammento di contenuto e imposta l’ora corrente quando il valore del campo è vuoto. Per risolvere questo problema, crea, distribuisci e verifica l’estensione del campo personalizzato.
Descrizione description
Ambiente
- Adobe Experience Manager as a Cloud Service (è supportata l’estensibilità dell’interfaccia utente dell’Editor frammento di contenuto)
Problema/Sintomi
- I campi di data e ora nei frammenti di contenuto sono vuoti per impostazione predefinita nel nuovo editor.
- Gli autori devono immettere manualmente l’ora corrente.
Causa
Per impostazione predefinita, il nuovo Editor frammento di contenuto non compila automaticamente i campi di data/ora. Per ripristinare questo comportamento, è necessario implementare un campo personalizzato utilizzando il framework di estensibilità.
Risoluzione resolution
Per popolare automaticamente l’ora corrente, effettuare le seguenti operazioni:
-
Installa e aggiorna Adobe App Builder CLI.
- Esegui
npm install -g @adobe/aio-cli. - Esegui
aio plugins:update.
- Esegui
-
Inizializza un progetto di estensione dell’Editor frammento di contenuto utilizzando il modello dell’editor:
- Esegui
aio app init --template @adobe/aem-cf-editor-ui-ext-tpl.
- Esegui
-
Implementa un componente React campo data/ora personalizzato:
- Utilizza l’API Campi personalizzati per registrare il campo personalizzato.
- Nel componente, verifica se il valore del campo è vuoto. In tal caso, impostarla sull’ora di sistema corrente.
- Esempio:
"
importa { useEffect } da ‘react’;
esporta la funzione predefinita CustomDateTimeField({ value, onChange }) {
useEffect(() => {
if (!value) {
onChange(new Date().toISOString());
}
, [ value, onChange] );
/ Esegui il rendering dell’input di data/ora qui, consentendo l’override manuale
"
-
- registra questo componente come campo personalizzato per la proprietà Data/ora utilizzando il framework di estensibilità.
4. Distribuisci l’estensione nell’ambiente AEM seguendo i passaggi di distribuzione standard per le estensioni App Builder.
5. Verifica l’estensione: - apri un frammento di contenuto nel nuovo editor.
- registra questo componente come campo personalizzato per la proprietà Data/ora utilizzando il framework di estensibilità.
- Aggiungere o modificare un campo Data/ora e verificare che sia compilato automaticamente con l’ora di sistema corrente.
- Conferma che gli autori possano comunque modificare il valore in base alle esigenze.