Incorporare un modulo adattivo o una comunicazione interattiva in applicazione AEM Sites a pagina singola

Panoramica

AEM Forms consente agli sviluppatori di moduli di incorporare facilmente moduli adattivi e comunicazioni interattive in un'applicazione AEM Sites Single Page (SPA) . Il modulo adattivo incorporato e la comunicazione interattiva sono completamente funzionanti e gli utenti possono compilare e inviare il modulo senza uscire dalla pagina. Consente agli utenti di restare nel contesto di altri elementi della pagina Web e di interagire contemporaneamente con il modulo adattivo o la comunicazione interattiva.

applicazione AEM Sites per pagina singola, è possibile aggiungere un modulo adattivo o una comunicazione interattiva utilizzando il componente contenitore AEM Forms SPA . È un componente AEM Forms per SPA AEM Sites che potete aggiungere alla pagina Siti.

Per informazioni sull'incorporamento di un modulo adattivo in un AEM Sites non SPA, vedere Incorporare un modulo adattivo o comunicazione interattiva paginaAEM Sites.

Prerequisiti

Per incorporare un modulo adattivo o una comunicazione interattiva in un sito AEM SPA utilizzando il componente contenitore AEM Forms SPA , accertatevi di aver installato:

  • Java SE Development Kit 8 o successivo
  • Apache Maven 3.3.1 o successivo
  • istanza di AEM
  • pacchetto aggiuntivo AEM Forms 6.4.2 sull’istanza di creazione

Installare componente Contenitore SPA di AEM Forms

Effettuate i seguenti passaggi per installare il componente Contenitore AEM Forms SPA:

  1. Clona o scarica il componente AEM Forms per SPA.

  2. Installate il componente AEM Forms per SPA. Le istruzioni per installare il componente sono disponibili nel file README.md .

    Il componente include un esempio di componente React che può essere utilizzato per integrare il componente contenitore SPA con un progetto SPA basato su React.

  3. Clona o scarica un progettoSPA basato su React.

  4. Integrare il componente contenitore SPA con un progetto SPA basato su React utilizzando le istruzioni disponibili nel file README.md .

    Dopo aver installato il componente Contenitore AEM Forms SPA e integrato il componente con un progetto SPA basato su React, è possibile incorporare moduli adattivi e comunicazioni interattive nella pagina AEM Sites.

Incorporare un modulo adattivo o una comunicazione interattiva

Per incorporare un modulo adattivo o una comunicazione interattiva utilizzando AEM Forms per il componente Contenitore SPA:

  1. Aprire la pagina AEM siti, in modalità di modifica, in cui si desidera incorporare un modulo adattivo o una comunicazione interattiva.

  2. Inserite nella pagina il componente Modulo AEM per SPA utilizzando una delle seguenti opzioni:

    • Toccate il Contenitore di layout nella pagina Siti, toccate + e selezionate il componente AEM Modulo per SPA .

    • Dal pannello del browser Componenti, trascinare sulla pagina il componente AEM Modulo per SPA .

    • Cercate un modulo adattivo o una comunicazione interattiva nel browser Risorse e trascinatelo nella pagina Siti. Incorpora il modulo in un AEM Forms per il contenitore di componenti SPA.

    Nota

    Il rendering di più componenti contenitore AEM Forms SPA su una pagina non è supportato. Potete avere più contenitori AEM Forms SPA su una pagina, ma viene eseguito il rendering di un solo componente alla volta. Per evitare discrepanze, accertatevi che sulla pagina sia visibile un solo componente.

  3. Toccate il componente incorporato AEM Forms SPA Container nella pagina dei siti, quindi toccate settings_icon nella barra delle azioni. Viene visualizzata la finestra di dialogo Modifica contenitore AEM Forms SPA.

  4. Nella finestra di dialogo Modifica contenitore AEM Forms, specificate quanto segue:

    • Tipo risorsa: Selezionate il tipo di risorsa da incorporare. Le opzioni sono Modulo ​adattivo e Comunicazione interattiva

    • Percorso risorsa: Individuate e selezionate il modulo adattivo o la comunicazione interattiva da incorporare. Il campo viene popolato automaticamente se viene inserito un modulo adattivo o una comunicazione interattiva tramite il browser Risorse.

    • Canale (Solo Comunicazione Interattiva): Selezionate il tipo di canale interattivo da incorporare. Le opzioni sono Canale ​Web e Canale ​di stampa.

    • Tema: Selezionate un tema che definisca lo stile dei componenti del modulo adattivo o della comunicazione interattiva. Lo stile include proprietà di aspetto quali lo stile del font, il colore di sfondo, le dimensioni e l'allineamento.

  5. Toccate done_icon per salvare le impostazioni. Il modulo adattivo o la comunicazione interattiva ora è incorporato nella pagina.

Pubblicare un modulo adattivo incorporato e Comunicazione interattiva

Considerate i seguenti scenari per pubblicare una risorsa incorporata (modulo adattivo o comunicazione interattiva) pagina AEM Sites:

  • Se pubblicate per la prima volta la pagina AEM Sites e include un modulo adattivo incorporato o una comunicazione interattiva, pubblicate la pagina Siti e la risorsa incorporata.
  • Se avete modificato solo il modulo adattivo incorporato o la comunicazione interattiva in una pagina Siti pubblicati, pubblicate la risorsa originale e le modifiche si riflettono nella pagina Siti pubblicati. La pagina Siti pubblicati include un riferimento alla risorsa e non richiede la ripubblicazione della pagina.
  • Se avete modificato la pagina Siti e il modulo adattivo incorporato o la comunicazione interattiva, ripubblicate la pagina Siti e la risorsa incorporata.

Modifica di moduli adattivi incorporati e comunicazione interattiva

AEM pagina dei siti contiene un riferimento al modulo adattivo e alla comunicazione interattiva nel AEM Forms Container. Pertanto, tutte le configurazioni e proprietà, come il tema, gli stili e l'azione Invia, configurate nel modulo adattivo originale e nella comunicazione interattiva vengono mantenute nel modulo adattivo incorporato e nella comunicazione interattiva.

Per modificare qualsiasi configurazione o proprietà del modulo adattivo incorporato e della comunicazione interattiva, effettuare una delle seguenti operazioni.

  • Aprire il modulo originale nei moduli adattivi o nelle comunicazioni interattive nei rispettivi editor e modificarlo.
  • Toccate il modulo adattivo o la comunicazione interattiva dalla pagina Siti in modalità di modifica, quindi toccate Modifica in una nuova finestra. Il modulo originale viene aperto in modalità di modifica.

Considerations and best practices

Quando si incorporano moduli adattivi nelle AEM pagine dei siti, tenere presente quanto segue:

  • L'intestazione e il piè di pagina del modulo originale non sono inclusi nel modulo incorporato.
  • Le bozze degli utenti e gli invii dei moduli incorporati sono supportati e visibili nelle schede Bozze e Forms inviate nel portale dei moduli.
  • L'azione di invio configurata sul modulo originale viene mantenuta nel modulo incorporato.
  • Il targeting delle esperienze e i test A/B configurati sul modulo originale non funzionano nel modulo incorporato. Tuttavia, potete utilizzare il targeting delle esperienze nella pagina Siti per presentare moduli diversi basati sui profili utente.
  • Se Adobe Analytics è stato configurato per il modulo originale, i dati di analisi del modulo incorporato vengono acquisiti in Adobe Analytics. Tuttavia, non è disponibile nel report di analisi dei moduli.

In questa pagina