DocumentazioneAEM as a Cloud ServiceGuida utente

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

Last update: Mon Feb 26 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Admin
  • User
  • Developer
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 Forms adattivo - Incorpora(v2) componenti. È possibile utilizzare Forms adattivo - Incorpora(v2) per aggiungere un modulo adattivo esistente o creare un modulo utilizzando l’editor di Forms adattivo, mentre Contenitore modulo adattivo per creare un nuovo modulo all’interno di una pagina Frammento di esperienza o 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:

  • Creare un modulo adattivo utilizzando modelli approvati e incorporarlo 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.

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

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

  • Creare e aggiungere un modulo adattivo personalizzato a una pagina AEM Sites: È possibile utilizzare Contenitore modulo adattivo componente per creare un nuovo modulo da zero, adattandolo in modo specifico ai requisiti e alle preferenze di progettazione.

  • Creare e aggiungere un modulo adattivo personalizzato a un frammento di esperienza: Puoi estendere la portata dei moduli aggiungendoli ai Frammenti esperienza AEM per consentirne il riutilizzo su più pagine o siti.

  • Aggiungere più moduli a una pagina o a un frammento di esperienza di AEM Sites: Puoi 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. È possibile utilizzare Contenitore modulo adattivo più volte per aggiungere Forms adattivo a una pagina AEM Sites. È possibile utilizzare Forms adattivo - Incorpora componente più volte in una pagina AEM Sites, solo se La forma copre l'intera larghezza della cornice è selezionata. Se il valore La forma copre l'intera larghezza della cornice non è selezionata, la pagina AEM Sites supporta un solo modulo adattivo senza iframe. Per aggiungere altro Forms adattivo utilizzando Forms adattivo - Incorpora componente, seleziona La forma copre l'intera larghezza della cornice opzione.

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

  • Quando si crea o si aggiunge un modulo utilizzando 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. Forms adattivo - Incorpora(v2) Il componente non fornisce l’accesso a varie funzioni delle pagine AEM Sites, come controllo delle versioni, targeting, traduzione e gestione multisito.

  • Quando si utilizza 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 adattivi 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 Forms adattivi sono abilitati per l’ambiente AEM Forms as a Cloud Service.
Aggiungere librerie client Forms adattive alla pagina o al frammento di esperienza AEM Sites

Quando Quando il modulo occupa l’intera larghezza di una pagina è selezionata in Contenitori modulo finestra di dialogo per configurazione e viene utilizzato Forms adattivo che utilizza i componenti core, è necessario includere le librerie client nella pagina del sito corrispondente.

Quando si seleziona un modulo che copre l’intera larghezza di una pagina, si utilizza un modulo adattivo con componenti core

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

  1. Accedere e clonare 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. Apri ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customheaderlibs.html e aggiungi al file il seguente codice:

    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. Apri ui.apps\src\main\content\jcr_root\apps\[your-project]\components\page\customfooterlibs.html e aggiungi al file il seguente codice:

    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. Apri ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customheaderlibs.html e aggiungi al file il seguente codice:

    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. Apri ui.apps\src\main\content\jcr_root\apps\[your-project]\components\xfpage\customfooterlibs.html e aggiungi al file il seguente codice:

    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. Eseguire 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 di AEM Sites

Per abilitare Forms adattivo - Incorpora(v2) nel criterio del modello, effettuare le seguenti operazioni:

  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, passare alla Informazioni pagina Informazioni pagina > Modifica modello. Apre il modello corrispondente nell’editor modelli.
  3. Nella vista Struttura, fare clic sul pulsante Policy Policy nella barra dei menu. In Componenti consentiti e seleziona la Forms adattivo - Incorpora(v2) casella di controllo sotto [Nome progetto archetipo AEM] - Modulo adattivo.
  4. Clic 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 Forms adattivo - Incorpora(v2) per creare un modulo adattivo direttamente nell’editor di AEM Sites tramite 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.

Utilizzo di Forms adattivo - Incorpora(v2), è possibile:

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 Forms adattivo - Incorpora(v2) sulla pagina.

  3. Fai clic su Più e si viene reindirizzati alla procedura guidata di creazione del modulo.

    Forms adattivo: componente Incorpora

  4. Creare un nuovo modulo adattivo da Creazione modulo procedura guidata.
    Il Percorso risorsa include già il percorso di un modulo adattivo creato

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

https://video.tv.adobe.com/v/3419366/adaptive-form-aem-forms?quality=12&learn=on

Quindi, puoi impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato tramite 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 Forms adattivo - Incorpora(v2) sulla pagina.

  3. Fai clic su Più e si viene reindirizzati alla procedura guidata di creazione del modulo.

    Forms adattivo: componente Incorpora

  4. Creare un nuovo modulo adattivo da Creazione modulo procedura guidata.
    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.

Quindi, puoi impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato tramite 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 Forms adattivo - Incorpora(v2) componente, puoi integrare facilmente un modulo adattivo preesistente in una pagina di 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 la selezione Forms adattivo - Incorpora(v2) dal browser Componenti alla pagina Sites.
  3. Seleziona la Forms adattivo - Incorpora nella pagina Sites e seleziona Proprietà contenitore modulo adattivo sulla barra delle azioni. Il Modifica Forms adattivo - Incorpora(v2) viene visualizzata una finestra di dialogo.
  4. Sfoglia e seleziona il modulo adattivo da incorporare nel Percorso risorsa.
  5. Salva le impostazioni. Il modulo adattivo è ora incorporato nella pagina.

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

Quindi, puoi impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato tramite 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 la selezione Forms adattivo - Incorpora(v2) dal browser Componenti al frammento di esperienza.
  3. Seleziona la Forms adattivo - Incorpora nel frammento di esperienza e seleziona Proprietà contenitore modulo adattivo sulla barra delle azioni. Il Modifica Forms adattivo - Incorpora(v2) viene visualizzata una finestra di dialogo.
  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.

Quindi, puoi impostare l'azione di invio e le proprietà avanzate di un modulo adattivo incorporato tramite 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 la 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. Nella barra dei menu, seleziona Icona Converti in variante di frammento esperienza Icona Converti in variante di frammento esperienza.

    Fai clic sul logo dell’archivio file per convertire un modulo adattivo nella pagina 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. Il giorno Converti in frammento esperienza variante (variation), impostate 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: Specifica 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 Frammento esperienza, crearlo. L’opzione è disponibile solo per aggiungere un modulo adattivo a un frammento di esperienza esistente.
    • Titolo frammento: Specifica il titolo del frammento di 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 Modulo adattivo - Incorpora(v2) componente. In Modifica Forms adattivo - Incorpora , puoi specificare quanto segue:

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

  • Invio post : seleziona 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. 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 Forms adattivo - Incorpora(v2) senza aggiornare i siti sottostanti nella pagina. Questa opzione è disponibile solo quando si sceglie di visualizzare una pagina di ringraziamento.
    • Messaggio di ringraziamento: breve conferma o conferma visualizzata sullo schermo dopo l’invio corretto di un modulo.
    • Pagina di ringraziamento: dopo aver inviato correttamente un modulo, individua e seleziona la pagina da visualizzare.

  • Usa lingua della pagina: utilizza la lingua locale della pagina AEM Sites invece della lingua del modulo adattivo. Questa opzione è applicabile solo per il modulo adattivo (Foundation).

  • Imposta stato attivo sul modulo: seleziona 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 definisce 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 Usa lingua della pagina, Imposta stato attivo sul modulo e Tema solo per Modulo adattivo (Foundation).

  • La forma copre l'intera larghezza della cornice: un frame in linea (iframe) è un elemento HTML che carica un modulo adattivo in una pagina AEM Sites.

    • Se il La forma copre l'intera larghezza della cornice Se è selezionata una casella di controllo, 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, seleziona La forma copre l'intera larghezza della cornice casella di controllo.

    • Se il La forma copre l'intera larghezza della cornice non sia 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 Forms adattivo - Incorpora componente, seleziona La forma copre l'intera larghezza della cornice opzione.

  • Altezza: specifica l’altezza del contenitore. Lascia vuoto questo campo per ridimensionare automaticamente il contenitore.

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

Pubblicare un modulo adattivo incorporato 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.
  • Seleziona il modulo adattivo dalla pagina del sito in modalità di modifica, quindi seleziona 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