DocumentazioneAEM as a Cloud ServiceGuida utente

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

Last update: Tue May 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Amministratore
  • Sviluppatore
Versione
Collegamento articolo
Authoring basato sull’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 {width="auto"}

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

  1. Crea un archivio GitHub per il progetto AEM. Per creare l’archivio:

    1. Passa a https://github.com/adobe-rnd/aem-boilerplate-forms.

      AEM Forms standard

    2. Fai clic su Usa questo modello e seleziona l’opzione Crea un nuovo archivio.

      Creare un nuovo archivio con il modello standard per AEM Forms

      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.

      Impostare l’archivio su pubblico

  2. 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.

    Impostare l’archivio su pubblico

  3. 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.

      apri file fstab.yaml

    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

      modifica file fstab.yaml

    4. Dopo aver aggiornato il riferimento e una volta che tutto sembra corretto, conferma l’aggiornamento del file fstab.yaml.

      conferma le modifiche

      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.

  1. Per creare un nuovo progetto AEM:

    1. Accedi all’istanza di authoring di AEM as a Cloud Service e seleziona Sites.

      seleziona Sites

    2. Fai clic su Crea > Sito da modello.

      create-sites

    3. Seleziona il modello Sito Edge Delivery Services e fai clic su Avanti.

      select-site-template

      note note
      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.

      crea sito AEM

    5. Viene visualizzata la finestra di dialogo Crea sito. Fai clic su OK.

      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.

      modifica sito AEM

      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.

      Il sito si apre nell’editor universale

  2. 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.

      pubblicare il progetto AEM Sites

    2. Viene visualizzata la finestra di dialogo di conferma Pubblicazione rapida. Fai clic su Pubblica per avviare il processo di pubblicazione.

      Finestra di dialogo di conferma per Pubblicazione rapida

      In alternativa, è possibile pubblicare le pagine dei progetti AEM direttamente dall’interfaccia utente dell’editor universale.

      Finestra di dialogo di conferma per Pubblicazione rapida

    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 note
    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:

  1. Aggiungere file e cartelle richiesti

    1. Copia e incolla le cartelle e i file seguenti da AEM Forms standard nel tuo progetto AEM:

  2. 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

  3. 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

  4. 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:

      code language-none 
          blocks/form/rules/formula/*
    blocks/form/rules/model/*

  5. 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 moduli utilizzando 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.

  1. 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.

    struttura contenuto

    La sezione Modulo adattivo è stata aggiunta. È ora possibile iniziare ad aggiungere i componenti del modulo alla pagina Progetto AEM.

  2. Aggiungi componenti del modulo alla sezione Modulo adattivo aggiunta. Per aggiungere componenti del modulo:

    1. Passa alla sezione Modulo adattivo aggiunto nella Struttura contenuto.

      blocco modulo adattivo aggiunto

    2. Fai clic sull’icona Aggiungi e aggiungi i componenti desiderati dall’elenco Componenti modulo adattivo.

      aggiungi componente

      È 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à.

      apri proprietà

    4. Visualizza l’anteprima del modulo.
      La schermata seguente mostra il modulo creato nel progetto AEM utilizzando l’authoring WYSIWYG:

      modulo aggiunto

      Quando l’anteprima risulta soddisfacente, l’utente può procedere alla pubblicazione della pagina.

      note note
      NOTE
      È importante pubblicare nuovamente la pagina del progetto AEM dopo aver apportato modifiche; in caso contrario, gli aggiornamenti non saranno visibili nel browser.

  3. 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.

      pubblica modulo

    2. Viene visualizzata la finestra di dialogo di conferma di Pubblicazione. Fai clic su Pubblica per avviare la pubblicazione.

      pubblica modulo1

      Dopo aver fatto clic sul pulsante Pubblica, viene visualizzato il messaggio Publish started successfully.

      pubblica modulo2

    È 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/

    indice pagina

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:

  1. Installa AEM CLI: AEM CLI semplifica le attività di sviluppo. Installalo a livello globale utilizzando npm:

    code language-bash 
        npm install -g @adobe/aem-cli

  2. Clona il progetto GitHub: clona l’archivio del progetto da GitHub utilizzando il seguente comando, sostituendolo con il proprietario dell’archivio e con il nome dell’archivio:

    code language-none 
    git clone https://github.com/<owner>/<repo>

  3. Avvia l’ambiente locale: passa alla directory del progetto e attiva l’istanza AEM locale con un singolo comando:

    code language-none 
    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
fbcff2a9-b6fe-4574-b04a-21e75df764ab