Creare e pubblicare moduli adattivi con Edge Delivery Services
Questo documento fornisce istruzioni dettagliate per la creazione, la configurazione e la pubblicazione di moduli adattivi utilizzando i modelli di Edge Delivery Services in AEM. Copre l’intero flusso di lavoro, dalla creazione dei moduli all’implementazione nella produzione.
Al termine di questa guida, imparerai come:
- Creare moduli utilizzando i modelli di Edge Delivery Services
- Authoring dei moduli utilizzando l’editor universale
- Configurare e pubblicare moduli in Edge Delivery Services
- Accedere ai moduli pubblicati e verificare la distribuzione
Prerequisiti
Prima di procedere, assicurati che siano soddisfatti i seguenti prerequisiti:
-
AEM Forms as a Cloud Service: istanza di authoring attiva con una licenza per Moduli.
-
Account GitHub: account personale o organizzativo per la gestione dell’archivio.
-
Configurazione archivio: scegli una delle opzioni seguenti:
- Nuovo progetto: crea un nuovo progetto AEM con il Blocco moduli adattivi. L’archivio è preconfigurato per Edge Delivery Services.
- Progetto esistente: aggiungi il Blocco moduli adattivi a un archivio esistente e aggiorna la configurazione.
-
Connessione AEM-GitHub: stabilisci una connessione tra l’istanza AEM e l’archivio GitHub.
-
Edge Delivery Services: verifica che l’archivio sia configurato per la distribuzione automatica.
-
Autorizzazioni: verifica di disporre dei diritti di accesso necessari per la creazione e la pubblicazione dei moduli.
-
Conferma che l’archivio GitHub contenga il blocco dei moduli adattivi.
Flusso di lavoro di creazione e pubblicazione di moduli
Il processo è composto da tre fasi principali:
- Fase 1: creazione del modulo
- Fase 2: authoring e progettazione dei moduli
- Fase 3: configurazione e pubblicazione
Ogni fase include passaggi di convalida per confermare la corretta configurazione.
Fase 1: creazione de modulo
-
Creazione del modulo di accesso
- Accedi all’istanza di authoring di AEM Forms as a Cloud Service.
- Passa ad Adobe Experience Manager > Moduli > Moduli e documenti.
- Seleziona Crea > Moduli adattivi.
-
Seleziona modello
-
Nella scheda Origine, seleziona un modello basato su Edge Delivery Services.
-
Il pulsante Crea viene attivato.
-
-
Configurare opzioni (facoltativo)
- Scheda Origine dati: se necessario, seleziona l’integrazione dei dati.
- Scheda invio: scegli un’azione di invio (configurabile in seguito).
- Scheda consegna: imposta la pianificazione della pubblicazione/annullamento della pubblicazione.
-
Completa la configurazione del modulo
-
Fai clic su Crea per aprire la procedura guidata per la creazione di moduli.
-
Immetti le seguenti informazioni:
- Nome: identificatore interno (senza spazi, usa i trattini).
- Titolo: nome visualizzato per il modulo.
- URL di GitHub: URL dell’archivio (ad esempio,
https://github.com/your-org/your-repo).
-
-
Convalida
-
Dopo aver fatto clic su Crea, verifica che:
- Il modulo venga aperto nell’editor universale.
- L’URL di GitHub sia collegato correttamente.
- La palette dei componenti sia disponibile.
- L’area di lavoro del modulo sia visibile.
-
Risultato: il modulo è pronto per l’authoring nell’editor universale.
Passaggio 2: authoring e progettazione dei moduli
-
Accedere alla libreria dei componenti
- Apri il browser Contenuto nell’editor universale.
- Passa al componente Modulo adattivo nella struttura contenuto.
-
Aggiungere i campi modulo
- Fai clic sull’icona Aggiungi per aprire la libreria dei componenti.
- Seleziona i componenti dall’elenco Componenti del modulo adattivo.
- Trascina i componenti nell’area di lavoro del modulo.
-
Progettare il modulo
- Configurare le proprietà del campo nel pannello delle proprietà.
- Imposta regole e comportamenti di convalida.
- Regola lo stile e il layout in base alle esigenze.
Convalida
- Tutti i campi obbligatori sono presenti.
- Le proprietà del campo sono configurate correttamente.
- Il layout è dinamico e accessibile.
- Le regole di convalida funzionano come previsto.
Passaggi successivi
- Configura le azioni di invio per la gestione dei dati.
- Guida all’editor universale per le funzioni avanzate.
Passaggio 3: configurazione e pubblicazione
Configura Edge Delivery Services e pubblica il modulo.
Configurazione: automatica (non è richiesta alcuna configurazione manuale).
- La connessione all’archivio GitHub e la configurazione di Edge Delivery Services vengono create durante la creazione del modulo.
- Gli endpoint di pubblicazione vengono configurati automaticamente.
Verifica:
- Conferma che la configurazione venga visualizzata nelle impostazioni del modulo.
- Assicurati che l’URL GitHub sia collegato correttamente.
Pubblicazione del modulo
-
Nell’editor universale, fai clic sul pulsante Pubblica (nell’angolo in alto a destra).
-
Conferma la pubblicazione riuscita nella finestra di dialogo.
-
Prendi nota degli URL generati per le versioni in prova e live.
URL del modulo
I moduli pubblicati sono accessibili tramite gli URL di Edge Delivery Services.
Struttura dell’URL
-
In staging (anteprima/test):
code language-none https://<branch>--<repo>--<owner>.aem.page/content/forms/af/<form_name> -
Live (produzione):
code language-none https://<branch>--<repo>--<owner>.aem.live/content/forms/af/<form_name>
Parametri URL
<branch>: nome ramo GitHub (ad esempio,main,develop)<repo>: nome archivio GitHub (ad esempio,my-forms-project)<owner>: organizzazione GitHub o nome utente (ad esempio,company-name)<form_name>: identificatore del modulo definito in AEM (ad esempio,contact-us)
Esempio
Esempio per il modulo contact-us nell’archivio forms-project nell’organizzazione acme-corp:
- In staging:
https://main--forms-project--acme-corp.aem.page/content/forms/af/contact-us - Live:
https://main--forms-project--acme-corp.aem.live/content/forms/af/contact-us
Differenze di ambiente
- Staging (.page): ultime modifiche per il test.
- Live (.live): contenuto pubblicato per la produzione.
raggruppamento della struttura URL per modulo Edge Delivery Services
Esempi visivi
Modello di Edge Delivery Services:
- Staging:
- Live:
Risoluzione di problemi
Di seguito sono riportati i problemi comuni e le soluzioni di AEM Forms con Edge Delivery Services.
Problema: l’URL del modulo restituisce una pagina vuota o l’errore 404.
Risoluzione:
- Rimuovi l’estensione
.htmldagli URL. - Verifica che il modulo sia pubblicato.
- Controlla l’archivio GitHub per il blocco dei moduli adattivi.
- Assicurati che il nome del modulo corrisponda all’URL (distinzione maiuscole/minuscole).
Problema: la configurazione di Edge Delivery Services non funziona.
Risoluzione:
- Assicurati che l’URL GitHub sia nel formato
https://github.com/owner/repository. - Utilizza il nome del ramo corretto nella configurazione.
- Verifica l’accesso all’archivio (pubblico o autenticato).
- Controlla
fstab.yamlper i dettagli GitHub corretti.
Problema: le modifiche non vengono visualizzate nel sito attivo.
Risoluzione:
- Attendi 2-3 minuti per l’aggiornamento della cache CDN.
- Conferma il completamento del flusso di lavoro di pubblicazione.
- Esegui prima il test nell’ambiente di staging (.page).
- Assicurati che l’archivio GitHub sia aggiornato.
Problema: impossibile modificare il modulo o i componenti senza caricarli.
Risoluzione:
- Utilizza un browser supportato (Chrome, Firefox, Safari).
- Cancella la cache del browser e i cookie.
- Verifica la connettività di rete.
- Conferma le autorizzazioni di creazione.
Problema: invii modulo non funzionanti.
Risoluzione:
- Configura l’azione di invio nelle proprietà del modulo.
- Testa gli endpoint per l’invio in modo manuale.
- Se incorpori moduli, seleziona le impostazioni CORS.
- Verifica che i campi obbligatori siano configurati.
Problema: caricamento del modulo lento o prestazioni scarse.
Risoluzione:
- Ottimizza le immagini.
- Rimuovi i componenti non necessari.
- Sfrutta la CDN Edge Delivery Services.
- Riduci a icona JavaScript/CSS personalizzato.
Se i problemi persistono:
- Verifica lo stato del servizio Adobe Experience Cloud.
- Rivedi la documentazione di Edge Delivery Services.
- Visita la community Adobe Experience League.
- Contatta l’Assistenza clienti Adobe.
Passaggi successivi
Dopo aver completato la creazione e la pubblicazione del modulo, considera quanto segue:
- Configura le azioni di invio: configura la gestione dei dati e le integrazioni.
- Modelli dati modulo: connetti i moduli a origini dati back-end.
- Best practice per Edge Delivery Services: massimizza le prestazioni.
- Analisi modulo: tieni traccia delle prestazioni del modulo e del comportamento degli utenti.