Incorporare un modulo adattivo in una pagina dei siti AEM embed-an-adaptive-form-to-aem-sites-page

Versione
Collegamento articolo
AEM 6.5
Fai clic qui
AEM as a Cloud Service
Questo articolo

Panoramica overview

AEM Forms consente agli sviluppatori di moduli di incorporare facilmente Forms adattivo in una pagina AEM Sites o in una pagina web ospitata al di fuori dell’AEM. Il modulo adattivo incorporato è completamente funzionante e gli utenti possono compilare e inviare il modulo senza uscire dalla pagina. Consente all’utente di rimanere nel contesto di altri elementi della pagina web e interagire contemporaneamente con il modulo. Questo consente agli utenti di compilare e inviare i moduli in modo semplice e senza mai uscire dalla pagina in cui si trovano. Questa integrazione consente di riutilizzare in modo pratico i Forms adattivi già creati.

È possibile utilizzare l’Editor pagina AEM per incorporare rapidamente più moduli nelle pagine AEM Sites. L’editor di pagine AEM consente agli autori di contenuti di creare esperienze di acquisizione dati fluide all’interno di una pagina Sites, sfruttando la potenza dei componenti di Adaptive Forms, tra cui comportamento dinamico, convalide, integrazione dei dati, generazione di documenti di record e automazione dei processi aziendali. Consente inoltre di utilizzare varie funzioni delle pagine AEM Sites, come controllo delle versioni, targeting, traduzione e gestione multisito.

AEM Forms fornisce Contenitore modulo adattivo e Componenti Forms adattivo - Incorpora(v2). È possibile utilizzare il componente Forms adattivo - Incorpora(v2) per aggiungere un modulo adattivo esistente o creare un modulo utilizzando l'editor di Forms adattivo, mentre Contenitore di moduli adattivi consente di creare un nuovo modulo all'interno di un frammento di esperienza o di una pagina AEM Sites.

Esempio di modulo adattivo in una pagina AEM Sites

Come si crea o si incorpora un modulo adattivo nella pagina di AEM Sites o in un frammento di esperienza AEM? various-options-to-create-or-embed-an-adaptive-form-in-aem-sites-page-or-aem-experience-fragment

Puoi sfruttare appieno questa funzione utilizzando le seguenti opzioni:

  • Crea un modulo adattivo utilizzando modelli approvati e incorporalo in una pagina AEM Sites: Puoi utilizzare modelli preapprovati per creare e incorporare rapidamente Forms adattivo in linea con le linee guida di branding e gli standard di progettazione della tua organizzazione.

  • Incorpora i moduli esistenti in una pagina AEM Sites: Puoi integrare facilmente i moduli già creati nei tuoi siti Web, consentendo ai visitatori di interagire direttamente con essi.

  • Convertire un modulo adattivo incorporato in un frammento di esperienza: Convertire un modulo adattivo incorporato aggiunto a una pagina AEM Sites in un frammento di esperienza per riutilizzare il modulo in più pagine AEM Sites.

  • Crea e aggiungi un modulo adattivo personalizzato a una pagina di AEM Sites: Puoi utilizzare il componente Contenitore modulo adattivo per creare un nuovo modulo da zero, adattandolo in modo specifico alle tue esigenze e preferenze di progettazione.

  • Crea e aggiungi un modulo adattivo personalizzato a un frammento di esperienza: Puoi estendere la portata dei moduli aggiungendoli ai frammenti di esperienza AEM, in modo da riutilizzarli in più pagine o siti.

  • Aggiungere più moduli a una pagina AEM Sites o a un frammento di esperienza: È possibile creare o aggiungere più Forms adattivi a una pagina AEM Sites per fornire più scelte agli utenti in base alle loro preferenze e ai loro requisiti. È possibile utilizzare l’Editor pagina AEM per incorporare rapidamente più moduli nelle pagine AEM Sites. Puoi utilizzare più volte il componente Contenitore modulo adattivo per aggiungere Forms adattivo a una pagina di AEM Sites. Puoi utilizzare il componente Forms adattivo - Incorpora più volte in una pagina di AEM Sites, solo se è selezionata l'opzione Modulo occupa l'intera larghezza del frame. Se l'opzione Modulo occupa l'intera larghezza del frame non è selezionata, la pagina di AEM Sites supporta un solo modulo adattivo per esistere senza un iframe. Per aggiungere altro Forms adattivo utilizzando il componente Forms adattivo - Incorpora, seleziona Il modulo copre l'intera larghezza del frame.

Considerazioni per incorporare un modulo adattivo nella pagina di AEM Sites o nel frammento di esperienza AEM consideration

  • Quando crei o aggiungi un modulo utilizzando il componente Forms adattivo - Incorpora(v2), i moduli vengono tradotti e localizzati utilizzando il flusso di traduzione AEM Forms. In questo caso, viene mantenuto un singolo modulo a cui viene fatto riferimento in tutte le copie in lingua delle pagine di Sites. Il componente Forms adattivo - Incorpora(v2) non fornisce l'accesso a varie funzioni delle pagine AEM Sites, come controllo delle versioni, targeting, traduzione e gestione multisito.

  • Quando si utilizza il Contenitore modulo adattivo per creare un modulo, i moduli vengono tradotti e localizzati attraverso il flusso di traduzione AEM Sites. Per ogni lingua viene generata una copia separata (copia per lingua) della pagina del sito e dei moduli corrispondenti e, quando un autore di contenuto modifica una regola in un modulo nella pagina padre, le stesse modifiche devono essere apportate in tutte le copie per lingua del modulo. Contenitore modulo adattivo consente inoltre di utilizzare varie funzioni delle pagine AEM Sites, come controllo delle versioni, targeting, traduzione e gestione multisito.

Requisiti per incorporare un modulo adattivo nella pagina di AEM Sites o nel frammento di esperienza AEM before-you-start-embedding-an-adaptive-form

Prima di iniziare a incorporare un nuovo modulo adattivo o un modulo adattivo preesistente utilizzando Forms adattivo - Incorpora(v2), abilita Componenti core Forms adattivo e aggiungi Librerie client Forms adattive alla pagina AEM Sites:

Abilitare i componenti core Forms adattivi per il tuo ambiente AEM Cloud Service
Assicurati che i Componenti core adattivi di Forms siano abilitati per il tuo ambiente AEM Forms as a Cloud Service.
Aggiungere librerie client Forms adattive alla pagina o al frammento di esperienza AEM Sites

Quando l'opzione Quando il modulo copre l'intera larghezza di una pagina è selezionata nella finestra di dialogo di configurazione Contenitori modulo e vengono utilizzati Forms adattivi che utilizzano i componenti core, è necessario includere le librerie client nella pagina del sito corrispondente.

Se è selezionata lopzione di un modulo che copre lintera larghezza di una pagina, vengono utilizzati i moduli adattivi con i componenti core

Aggiungi le librerie client Customheaderlibs e Customfooterlibs alla pagina AEM Sites utilizzando la pipeline di distribuzione. Per aggiungere le librerie client:

  1. Accedi e clona l'archivio Git AEM Cloud Service.

  2. Apri la cartella AEM Cloud Service Git Repository in un editor di testo per piani. Ad esempio, Microsoft® Visual Code.

  3. Aprire il file ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html e aggiungere il codice seguente al file:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  4. Aprire il file ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html e aggiungere il codice seguente al file:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  5. Aprire il file ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html e aggiungere il codice seguente al file:

    code language-none
        //Customheaderlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories='core.forms.components.runtime.all'}"/>
        </sly>
    
  6. Aprire il file ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html e aggiungere il codice seguente al file:

    code language-none
        //customfooterlibs.html
        <sly data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html">
        <sly data-sly-test="${!wcmmode.edit}" data-sly-call="${clientlib.js @ categories='core.forms.components.runtime.all', async=true}"/>
        </sly>
    
  7. Esegui la pipeline di distribuzione per distribuire le librerie client nell'ambiente AEM as a Cloud Service.

Abilita Forms adattivo - Incorpora(v2) per la pagina o il frammento di esperienza AEM Sites

Per abilitare il componente Forms adattivo - Incorpora(v2) nel criterio del modello, eseguire la procedura seguente:

  1. Apri la pagina AEM Sites o il frammento di esperienza per la modifica. Per aprire la pagina per la modifica, selezionarla e fare clic su Modifica.
  2. Apri il modello della pagina Sites o Frammento esperienza. Per aprire il modello, vai a Informazioni pagina Informazioni pagina > Modifica modello. Apre il modello corrispondente nell’editor modelli.
  3. Nella visualizzazione Struttura fare clic sull'icona Criteri Criteri nella barra dei menu. Nell'elenco Componenti consentiti e selezionare la casella di controllo Forms adattivo - Incorpora(v2) in [Nome progetto archetipo AEM] - Modulo adattivo.
  4. Fai clic su Fine.
embed

https://video.tv.adobe.com/v/3419369?quality=12&learn=on

Incorporare un modulo adattivo utilizzando il componente Forms adattivo - Incorpora(v2) embed-an-adaptive-form-in-sites-editor-or-experience-fragment

Utilizza il componente Forms adattivo - Incorpora(v2) per creare un modulo adattivo direttamente nell'editor di AEM Sites utilizzando la procedura guidata per la creazione di moduli. Il modulo risultante viene salvato come entità esterna, consentendo il suo riutilizzo in altre pagine Sites e moduli autonomi. Puoi incorporare un modulo nuovo di zecca da zero, personalizzandolo in base a specifici requisiti e preferenze di progettazione, direttamente in una pagina AEM Sites o in Frammento esperienza. Per i moduli monouso, si consiglia di eseguire l’authoring diretto su una pagina AEM Sites, mentre i frammenti di esperienza sono ideali per i moduli che devono essere riutilizzati su più pagine del sito web.

Puoi incorporare facilmente un nuovo modulo utilizzando Forms adattivo - Incorpora(v2). Ad esempio, immagina di incorporare un nuovo modulo per i contatti in una pagina AEM Sites o in un frammento di esperienza AEM. Eventuali aggiornamenti o modifiche apportate al modulo di contatto all’interno della pagina AEM Sites o al frammento di esperienza si applicano automaticamente a tutte le pagine in cui viene distribuito. Questo semplifica la gestione dei moduli del sito web, garantendo un’esperienza utente fluida e semplificando al contempo il processo complessivo.

Utilizzando Forms adattivo - Incorpora(v2), puoi:

Incorporare un nuovo modulo utilizzando la procedura guidata Forms adattivo nella pagina AEM Sites embed-form-using-adaptive-form-wizzard-aem-sites

I passaggi per incorporare un nuovo modulo in una pagina AEM Sites sono i seguenti:

  1. Apri la pagina AEM Sites in modalità di modifica.

  2. Dal pannello del browser Componenti, trascina il componente Forms adattivo - Incorpora(v2) sulla pagina.

  3. Fai clic sull'icona Plus per reindirizzarti alla procedura guidata di creazione del modulo.

    Forms adattivo - Componente di incorporamento

  4. Crea un nuovo modulo adattivo dalla procedura guidata Creazione modulo.
    Il percorso risorsa include già il percorso di un modulo adattivo creato

  5. Salva le impostazioni. Il modulo adattivo è ora incorporato nella pagina.

Successivamente, è possibile impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato utilizzando la procedura guidata di creazione del modulo.

Incorporare un nuovo modulo utilizzando la procedura guidata Forms adattivo in un frammento di esperienza embed-form-using-adaptive-form-wizzard-experience-fragment

I passaggi per incorporare un nuovo modulo in un frammento di esperienza sono i seguenti:

  1. Apri il frammento di esperienza in modalità di modifica.

  2. Dal pannello del browser Componenti, trascina il componente Forms adattivo - Incorpora(v2) sulla pagina.

  3. Fai clic sull'icona Plus per reindirizzarti alla procedura guidata di creazione del modulo.

    Forms adattivo - Componente di incorporamento

  4. Crea un nuovo modulo adattivo dalla procedura guidata Creazione modulo.
    Il percorso risorsa include già il percorso di un modulo adattivo creato

  5. Salva le impostazioni. Il modulo adattivo è ora incorporato nel frammento di esperienza.

Successivamente, è possibile impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato utilizzando la procedura guidata di creazione del modulo.

Incorporare un modulo adattivo esistente in una pagina AEM Sites embed-an-adaptive-form-in-sites-editor

Con il componente Forms adattivo - Incorpora(v2) puoi integrare facilmente un modulo adattivo preesistente in una pagina in AEM Sites. Questa funzione migliora in modo significativo l’adattabilità e la riutilizzabilità di Adaptive Forms, offrendo ai clienti un modo pratico per riutilizzare i moduli già creati. Immagina ad esempio di incorporare un modulo per i contatti in una pagina di AEM Sites, eliminando la necessità di ricreare il modulo più volte.

Per incorporare un modulo adattivo esistente in una pagina Sites:

  1. Apri la pagina AEM Sites in modalità di modifica.
  2. Trascina il componente Forms adattivo - Incorpora(v2) dal browser Componenti alla pagina Sites.
  3. Seleziona il componente Forms adattivo - Incorpora nella pagina Sites e seleziona Proprietà contenitore modulo adattivo nella barra delle azioni. Viene visualizzata la finestra di dialogo Modifica Forms adattivo - Incorpora(v2).
  4. Sfoglia e seleziona il modulo adattivo da incorporare nel percorso risorsa.
  5. Salva le impostazioni. Il modulo adattivo è ora incorporato nella pagina.

Successivamente, è possibile impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato utilizzando la procedura guidata di creazione del modulo.

Incorporare un modulo adattivo esistente in un frammento di esperienza embed-an-adaptive-form-in-experience-fragment

Puoi anche estendere l’accessibilità dei moduli incorporandoli in Frammento esperienza AEM. Per incorporare un modulo adattivo in un frammento di esperienza:

  1. Apri un frammento di esperienza in modalità di modifica.
  2. Trascina il componente Forms adattivo - Incorpora(v2) dal browser Componenti al frammento di esperienza.
  3. Seleziona il componente Forms adattivo - Incorpora nel frammento di esperienza e seleziona Proprietà contenitore modulo adattivo nella barra delle azioni. Viene visualizzata la finestra di dialogo Modifica Forms adattivo - Incorpora(v2).
  4. Sfoglia e seleziona il modulo adattivo da incorporare nel percorso risorsa.
  5. Salva le impostazioni. Il modulo adattivo è ora incorporato nel frammento di esperienza.

Successivamente, è possibile impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato utilizzando la procedura guidata di creazione del modulo.

Convertire un modulo in una pagina di AEM Sites in un frammento di esperienza convert-an-adaptive-form-in-sites-page-to-an-experience-fragment

È possibile convertire un modulo adattivo esistente in un editor di pagine Sites in un frammento di esperienza per riutilizzare il modulo in più pagine o siti.

Per convertire un modulo adattivo nella pagina di AEM Sites in un frammento di esperienza:

  1. Apri la pagina AEM Sites contenente il modulo adattivo (nel componente Contenitore Forms adattivo) in modalità di modifica.

  2. Apri la Struttura contenuto e seleziona il Contenitore Forms adattivo che ospita il modulo adattivo. Una pagina AEM Sites può ospitare più Forms adattivi. Quindi, seleziona con attenzione il contenitore Forms adattivo corretto.

  3. Sulla barra dei menu, seleziona l'icona Converti in variante di frammento di esperienza Converti in variante di frammento di esperienza.

    Fai clic sul logo dellarchivio file per convertire un modulo adattivo nella pagina di AEM Sites in un frammento di esperienza

    Viene visualizzata una finestra di dialogo per convertire il contenitore Moduli adattivi in un nuovo frammento di esperienza o aggiungerlo a un frammento di esperienza esistente.

  4. Nella finestra di dialogo Converti in variante di esperienza, imposta i valori per le seguenti opzioni:

    • Azione: Seleziona questa opzione per creare un frammento di esperienza o Aggiungi a un frammento di esperienza esistente.
    • Percorso principale: Specificare il percorso della cartella in cui ospitare il frammento di esperienza. L’opzione è disponibile solo per la creazione di un nuovo frammento di esperienza.
    • Modello: Specifica il percorso del modello Frammento esperienza. Se non disponi di un modello di Frammento esperienza, crealo. L’opzione è disponibile solo per aggiungere un modulo adattivo a un frammento di esperienza esistente.
    • Titolo frammento: Specifica il titolo del frammento esperienza. Il titolo identifica in modo univoco un frammento esperienza.
    • Tag frammento: Specifica il tag del frammento di esperienza. Il tag identifica in modo univoco la categoria di un frammento di esperienza.

Configurare le proprietà di Adaptive Form-Embed(v2)

È possibile personalizzare le impostazioni avanzate del componente Modulo adattivo - Incorpora(v2). Nella finestra di dialogo Modifica Forms adattivo - Incorpora puoi specificare quanto segue:

  • Percorso risorsa: seleziona un modulo adattivo da incorporare. Viene compilato automaticamente se viene rilasciato dal browser Assets.

  • Invio Post: selezionare l'azione da attivare all'invio del modulo. Puoi scegliere di visualizzare un messaggio di ringraziamento o una pagina di ringraziamento.

    • Mostra messaggio di ringraziamento: scrivi un messaggio utilizzando l'editor Rich Text per visualizzarlo all'invio del modulo. Questa opzione è disponibile solo quando si sceglie di visualizzare un messaggio di ringraziamento.
    • Mostra pagina di ringraziamento: sfoglia e seleziona la pagina da visualizzare all'invio del modulo. Questa opzione è disponibile solo quando si sceglie di visualizzare una pagina di ringraziamento.
    • Reindirizza alla pagina di ringraziamento: abilita l'opzione per sostituire la pagina contenente il modulo adattivo incorporato con la pagina di ringraziamento. In caso contrario, la pagina di ringraziamento sostituisce il modulo adattivo nel componente Forms adattivo - Incorpora(v2), senza aggiornare i siti sottostanti alla pagina. Questa opzione è disponibile solo quando si sceglie di visualizzare una pagina di ringraziamento.
    • Messaggio di ringraziamento: breve conferma o riconoscimento visualizzato sullo schermo dopo l'invio di un modulo.
    • Pagina ringraziamento: sfoglia e seleziona la pagina da visualizzare dopo aver inviato correttamente un modulo.
  • Usa lingua della pagina: usa locale della pagina AEM Sites invece delle impostazioni locali del modulo adattivo. Questa opzione è applicabile solo per il modulo adattivo (Foundation).

  • Imposta stato attivo sul modulo: selezionare questa opzione per impostare lo stato attivo sul primo campo del modulo adattivo. Questa opzione è applicabile solo per il modulo adattivo (Foundation).

  • Tema: seleziona un tema che definisca lo stile dei componenti del modulo adattivo. Lo stile include proprietà di aspetto quali lo stile del carattere, il colore di sfondo, le dimensioni e l'allineamento. Questa opzione è applicabile solo per il modulo adattivo (Foundation).

    note note
    NOTE
    È possibile utilizzare le opzioni Usa lingua pagina, Imposta stato attivo su modulo e Tema solo per modulo adattivo (Foundation).
  • Il modulo occupa l'intera larghezza del frame:
    Un frame in linea (iframe) è un elemento HTML che carica un modulo adattivo in una pagina AEM Sites.

    • Se la casella di controllo Modulo occupa l'intera larghezza della cornice è selezionata, un modulo adattivo occupa l'intera larghezza del contenitore in cui viene inserito. In questo caso, non viene utilizzato un iframe per eseguire il rendering del modulo. Il layout e il design di un modulo adattivo si adattano a coprire l’intera larghezza del contenitore, rendendolo reattivo e in grado di adattarsi a diverse dimensioni dello schermo. Questa opzione consente di incorporare più Forms adattivi all’interno di una pagina AEM Sites.

      note note
      NOTE
      Per incorporare più moduli in una pagina AEM Sites, selezionare La casella di controllo Campo modulo copre l'intera larghezza del frame.
    • Se la casella di controllo Modulo copre l'intera larghezza del frame non è selezionata, un modulo adattivo non copre l'intera larghezza del contenitore. Viene invece utilizzato un iframe per eseguire il rendering del modulo, che non può essere esteso oltre una larghezza specifica. Questo approccio è utile quando un modulo adattivo ha confini definiti e deve coesistere con altri componenti AEM adiacenti all’interno del contenitore. Se questa opzione non è selezionata, è possibile incorporare un solo Forms adattivo nella pagina AEM Sites senza un iframe.

      note note
      NOTE
      La pagina di AEM Sites supporta un solo modulo adattivo per esistere senza un iframe. Per aggiungere altro Forms adattivo utilizzando il componente Forms adattivo - Incorpora, seleziona Il modulo copre l'intera larghezza del frame.
  • Altezza: specificare l'altezza del contenitore. Lascia vuoto questo campo per ridimensionare automaticamente il contenitore.

  • Libreria client CSS: specificare il percorso di una libreria client CSS.

Modulo adattivo incorporato Publish publishing-embedded-adaptive-form

Prendiamo in considerazione i seguenti scenari per la pubblicazione di un modulo adattivo incorporato nella pagina dei siti AEM:

  • Se pubblichi la pagina dei siti AEM per la prima volta e include un modulo adattivo incorporato, pubblica la pagina dei siti e la risorsa incorporata.
  • Se hai modificato solo il modulo adattivo incorporato in una pagina del sito pubblicata, pubblica la risorsa originale e le modifiche si riflettono nella pagina del sito pubblicata. La pagina del sito pubblicata include un riferimento alla risorsa e non richiede la ripubblicazione della pagina.
  • Se hai modificato la pagina Sites e il modulo adattivo incorporato, ripubblica la pagina Sites e la risorsa incorporata.

Modifica modulo adattivo incorporato modifying-embedded-adaptive-form

Per modificare una configurazione o una proprietà del modulo adattivo incorporato, effettuate una delle seguenti operazioni.

  • Apri il modulo originale in un modulo adattivo nel rispettivo editor e modificalo.
  • Selezionare il modulo adattivo nella pagina del sito in modalità di modifica, quindi selezionare Modifica in una nuova finestra. Il modulo originale viene aperto in modalità di modifica modificabile.
NOTE
Le modifiche apportate nel modulo adattivo originale si riflettono automaticamente nel modulo incorporato. Tuttavia, ripubblica il modulo adattivo o la pagina del sito per riflettere le modifiche nella pagina pubblicata.

Best practice best-practices

Quando incorpori Forms adattivo nelle pagine dei siti AEM, considera gli aspetti seguenti:

  • Intestazione e piè di pagina nel modulo originale non sono inclusi nel modulo incorporato.
  • Le bozze utente e gli invii di moduli incorporati sono supportati e visibili nelle schede Bozze e Forms inviate nel portale Forms.
  • L’azione di invio configurata nel modulo originale viene mantenuta nel modulo incorporato.
  • Se hai configurato Adobe Analytics per il modulo originale, i dati di analisi del modulo incorporato vengono acquisiti in Adobe Analytics. Tuttavia, non è disponibile nel rapporto di analisi di Forms.

Consulta anche see-also

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab