Documentazione AEM as a Cloud Service Guida utente

Guida introduttiva a Edge Delivery Services per AEM Forms utilizzando l’editor universale (WYSIWYG)

Last update: Fri Mar 21 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Argomenti:

Creato per:

Amministratore
Sviluppatore

Versione

Collegamento articolo

Authoring basato su editor universale

Questo articolo

Authoring basato su documenti

Fai clic qui

Questa funzione è disponibile tramite il programma per i primi utilizzatori. Per richiedere l’accesso, invia un’e-mail dal tuo indirizzo ufficiale a aem-forms-ea@adobe.com con il nome dell’organizzazione GitHub e il nome dell’archivio. Ad esempio, se l’URL dell’archivio è https://github.com/adobe/abc, il nome dell’organizzazione è adobe e il nome dell’archivio è abc.

Nell’era digitale di oggi, i moduli facili da usare sono essenziali per qualsiasi organizzazione. I moduli di Edge Delivery Services vengono creati utilizzando l’Editor universale, che offre funzionalità WYSIWYG (what-you-see-is-what-you-get). Fornisce un’interfaccia moderna e intuitiva per l’authoring efficiente dei moduli.

AEM Forms fornisce un blocco, noto come Blocco di moduli adattivi, per facilitare la creazione di moduli di Edge Delivery Services per l’acquisizione e l’archiviazione dei dati. È possibile creare un nuovo progetto AEM preconfigurato con Blocco moduli adattivi oppure aggiungere il Blocco moduli adattivi a un progetto AEM esistente.

Flusso di lavoro archivio Github

Questo tutorial ti consente di creare, visualizzare in anteprima e pubblicare un modulo personalizzato con un progetto di sito Adobe Experience Manager nuovo o esistente mediante l’authoring WYSIWYG dell’editor universale.

Prerequisiti

Hai un account GitHub e conosci le nozioni di base su Git.
Comprendi le nozioni di base di HTML, CSS e JavaScript.
Hai Node/npm installato per lo sviluppo locale.

Crea un nuovo progetto AEM preconfigurato con Blocco moduli adattivi

Il modello standard di AEM Forms consente di iniziare rapidamente un progetto AEM preconfigurato con il Blocco moduli adattivi. È il modo più rapido e semplice per seguire le best practice di AEM e passare direttamente alla creazione dei moduli.

Introduzione al modello di archivio standard di AEM Forms

Crea un archivio GitHub per il progetto AEM. Per creare l’archivio:
1. Passa a https://github.com/adobe-rnd/aem-boilerplate-forms.
2. Fai clic su Usa questo modello e seleziona l’opzione Crea un nuovo archivio.
  
  Viene visualizzata la schermata Crea nuovo archivio.
3. Nella schermata Crea nuovo archivio, seleziona il proprietario e specifica Nome archivio. Adobe consiglia di impostare l’archivio su Pubblico. Quindi, seleziona l’opzione pubblico e fai clic su Crea archivio.
Installa l’app GitHub della sincronizzazione del codice AEM nell’archivio. Per installare:
1. Passa a https://github.com/apps/aem-code-sync/installations/new.
2. Nella schermata Installa sincronizzazione codice AEM, seleziona Seleziona solo archivi e seleziona quello appena creato. Fai clic su Salva.
Ora collega l’archivio GitHub creato utilizzando il Modello di archivio standard per AEM Forms al tuo ambiente di authoring di progetti AEM. Per connettersi:
1. vai all’archivio GitHub che hai creato in precedenza utilizzando moduli AEM ricorrenti.
2. Apri il file fstab.yaml per la modifica.
3. Modifica il file fstab.yaml per aggiornare il punto di montaggio del progetto. Sostituisci l’URL con l’URL dell’istanza di authoring di AEM as a Cloud Service.
  
  https://<aem-author>/bin/franklin.delivery/<owner>/<repository>/main
4. Dopo aver aggiornato il riferimento e una volta che tutto sembra corretto, conferma l’aggiornamento del file fstab.yaml.
  
  Se riscontri problemi di build, consulta Risoluzione dei problemi di build di GitHub.

Creare un nuovo progetto AEM

Ora che disponi di un progetto GitHub, puoi procedere con la creazione e la pubblicazione di un nuovo progetto AEM nell’istanza di authoring di AEM as a Cloud Service.

Per creare un nuovo progetto AEM:
1. Accedi all’istanza di authoring di AEM as a Cloud Service e seleziona Sites.
2. Fai clic su Crea > Sito da modello.
3. Seleziona il modello Sito Edge Delivery Services e fai clic su Avanti.
  NOTE
  Se il modello Sito Edge Delivery Services non è disponibile nell’istanza di authoring, fai clic sul pulsante Importa per caricare il modello.
  
  È possibile scaricare i modelli per siti Edge Delivery Services da GitHub.
4. Immetti i seguenti dettagli per creare un nuovo progetto AEM:
  - Titolo sito: aggiungi un titolo descrittivo per il sito.
  - Titolo sito: utilizza il site-name che hai definito nel passaggio precedente.
  - URL GitHub: utilizza l’URL del progetto GitHub creato nel passaggio precedente.
5. Viene visualizzata la finestra di dialogo Crea sito. Fai clic su OK.
  
  In pochi minuti viene creato il nuovo progetto AEM.
6. Passa al progetto AEM appena creato nella console Sites e fai clic su Modifica.
  In questo caso, la pagina index.html viene utilizzata a scopo illustrativo.
  
  Il progetto AEM si apre nell’editor universale in una nuova scheda, che abilita l’authoring in modalità WYSIWYG. È ora possibile modificare il progetto AEM.
Pubblicare il progetto AEM creato

Una volta terminata la modifica del progetto AEM, è il momento di pubblicarlo. Per pubblicarlo:
1. Nella console Sites, seleziona tutte le pagine del progetto AEM e fai clic su Pubblicazione rapida.
2. Viene visualizzata la finestra di dialogo di conferma Pubblicazione rapida. Fai clic su Pubblica per avviare il processo di pubblicazione.
  
  In alternativa, è possibile pubblicare le pagine dei progetti AEM direttamente dall’interfaccia utente dell’editor universale.
Congratulazioni Hai un nuovo sito web in esecuzione su https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/.
- <branch> fa riferimento al ramo dell’archivio GitHub.
- <repository> denota l’archivio GitHub.
- <owner> fa riferimento al nome utente dell’account GitHub che ospita l’archivio GitHub.
- <site-name> fa riferimento al nome del sito creato.
Ad esempio, se il nome del ramo è main, l’archivio è edsforms, il proprietario è wkndforms e site-name è eds-forms, il sito web sarà operativo e funzionante all’indirizzo https://main--edsforms--wkndforms.aem.page/content/eds-forms/
NOTE
Per visualizzare la pagina index.html del progetto AEM, utilizza l’URL: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/

Per visualizzare pagine diverse da index page del progetto AEM, utilizza l’URL: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/<site-page-name>

Puoi iniziare a creare e aggiungere moduli al progetto AEM.

Aggiungere un blocco per moduli adattivi al progetto AEM esistente

Se disponi di un progetto AEM esistente, puoi integrare il blocco di moduli adattivi nel progetto corrente per iniziare a creare i moduli.

NOTE

Questo passaggio si applica ai progetti generati con AEM ricorrenti. Se hai creato il progetto AEM utilizzando AEM Forms standard, puoi saltare questo passaggio.

Per integrare:

Aggiungere file e cartelle richiesti
1. Copia e incolla le cartelle e i file seguenti da AEM Forms standard nel tuo progetto AEM:
  - Cartella form block
  - Cartella form-common
  - Cartella form-components
  - File form-editor-support.js
  - File form-editor-support.css
Aggiornare le definizioni dei componenti e i file dei modelli
1. Passa al file ../models/_component-definition.json nel progetto AEM e aggiornalo con le modifiche apportate al file _component-definition.json in AEM Forms standard.
2. Passa al file ../models/_component-models.json nel progetto AEM e aggiornalo con le modifiche apportate al file _component-models.json in AEM Forms standard
Aggiungere l’editor di moduli nello script dell’editor
1. Passa al file ../scripts/editor-support.js nel progetto AEM e aggiornalo con le modifiche apportate al file editor-support.js in AEM Forms standard
Aggiornare il file di configurazione ESLint
1. Passa al file ../.eslintignore nel progetto AEM e aggiungi la seguente riga di codici per evitare errori relativi al motore di regole del blocco moduli:
  blocks/form/rules/formula/* blocks/form/rules/model/*
Conferma e implementa queste modifiche al progetto AEM su GitHub.

Tutto qui. Il blocco di moduli adattivi fa ora parte del progetto AEM. Puoi iniziare a creare e aggiungere moduli al progetto AEM.

Creare Forms con WYSIWYG

Puoi aprire il progetto AEM nell’editor universale per l’authoring WYSIWYG, dove puoi modificare il progetto e aggiungere la sezione Modulo adattivo per includere i moduli Edge Delivery Services nelle pagine del progetto AEM.

Aggiungi la sezione Modulo adattivo alla pagina del progetto AEM. Per aggiungere:
1. Passa al progetto AEM nella console Sites, seleziona la pagina del sito da modificare e fai clic su Modifica. La pagina del progetto AEM viene aperta nell’editor universale per la modifica.
  In questo caso, la pagina index.html viene utilizzata a scopo illustrativo.
2. Apri la Struttura contenuto e passa alla sezione in cui desideri aggiungere la sezione Modulo adattivo.
3. Fai clic sull’icona Aggiungi e seleziona il componente Modulo adattivo dall’elenco dei componenti.
La sezione Modulo adattivo è stata aggiunta. È ora possibile iniziare ad aggiungere i componenti del modulo alla pagina Progetto AEM.
Aggiungi componenti del modulo alla sezione Modulo adattivo aggiunta. Per aggiungere componenti del modulo:
1. Passa alla sezione Modulo adattivo aggiunto nella Struttura contenuto.
2. Fai clic sull’icona Aggiungi e aggiungi i componenti desiderati dall’elenco Componenti modulo adattivo.
  
  È inoltre possibile trascinare i componenti dei Moduli adattivi richiesti, in quanto l’editor universale offre una funzione di trascinamento intuitiva.
3. Seleziona il componente Modulo adattivo aggiunto e aggiornane le proprietà utilizzando Proprietà.
4. Visualizza l’anteprima del modulo.
  La schermata seguente mostra il modulo creato nel progetto AEM utilizzando l’authoring WYSIWYG:
  
  Quando l’anteprima risulta soddisfacente, l’utente può procedere alla pubblicazione della pagina.
  
  NOTE
  È importante pubblicare nuovamente la pagina del progetto AEM dopo aver apportato modifiche; in caso contrario, gli aggiornamenti non saranno visibili nel browser.
Pubblicare nuovamente la pagina del progetto AEM.
1. Fai clic su Pubblica per pubblicare nuovamente la pagina del progetto AEM dopo aver aggiunto il modulo.
2. Viene visualizzata la finestra di dialogo di conferma di Pubblicazione. Fai clic su Pubblica per avviare la pubblicazione.
  
  Dopo aver fatto clic sul pulsante Pubblica, viene visualizzato il messaggio Publish started successfully.
È ora possibile visualizzare la pagina del progetto AEM con il modulo Edge Delivery Services aggiunto al seguente URL:
https://<branch>--<repo>--<owner>.aem.page/content/<site-name>/.

Ad esempio, se il nome del ramo è main, l’archivio è edsforms, il proprietario è wkndforms e il nome del sito è eds-forms, l’URL sarà:
https://main--edsforms--wkndforms.aem.page/content/eds-forms/

Puoi assegnare uno stile ai moduli di Edge Delivery Services modificando i file .css e .js nel blocco moduli adattivi e configurando un ambiente di sviluppo AEM locale per visualizzare le modifiche istantaneamente nel browser.

NOTE

È inoltre possibile creare un modulo autonomo nell’editor universale e pubblicarlo in Edge Delivery Services.

Configurare un ambiente di sviluppo AEM locale

Puoi configurare un ambiente di sviluppo AEM locale per sviluppare stili e componenti personalizzati a livello locale. Per essere operativi con un ambiente di sviluppo AEM locale:

Installa AEM CLI: AEM CLI semplifica le attività di sviluppo. Installalo a livello globale utilizzando npm:
npm install -g @adobe/aem-cli
Clona il progetto GitHub: clona l’archivio del progetto da GitHub utilizzando il seguente comando, sostituendolo <owner> con il proprietario dell’archivio e <repo> con il nome dell’archivio:
git clone https://github.com/<owner>/<repo>
Avvia l’ambiente locale: passa alla directory del progetto e attiva l’istanza AEM locale con un singolo comando:
cd <repo> aem up

È possibile apportare modifiche locali nella cartella Blocco moduli adattivi blocks/form per la formattazione e la codifica dei moduli. Modifica i file .css o .js all’interno di questa directory e le modifiche saranno immediatamente applicate nel browser.

Una volta completate le modifiche, utilizza i comandi Git per confermarle e inviarle. Questo aggiorna gli ambienti di anteprima e di produzione accessibili tramite questi URL (sostituisci i segnaposto con i dettagli del progetto):

Anteprima: https://<branch>--<repo>--<owner>.aem.page/content/<site-name>

Produzione: https://<branch>--<repo>--<owner>.aem.live/content/<site-name>

Risoluzione dei problemi di compilazione di GitHub

Assicurati un processo di compilazione di GitHub senza intoppi affrontando potenziali problemi:

Gestire errori di stampa:
in caso di errori di stampa, è possibile ignorarli. Apri il file [Progetto EDS]/package.json e modifica lo script “lint” da "lint": "npm run lint:js && npm run lint:css" a "lint": "echo 'skipping linting for now'". Salva il file e conferma le modifiche nel progetto GitHub.
Errore del percorso del modulo di risoluzione:
Se riscontri l’errore “Impossibile risolvere il percorso del modulo ”‘…/…/scripts/lib-franklin.js’, passa al file [Progetto EDS]/blocks/forms/form.js. Aggiorna l’istruzione di importazione sostituendo il file lib-franklin.js con il file aem.js.

Consulta anche

recommendation-more-help