Incorporare un modulo adattivo o una comunicazione interattiva nell’applicazione a pagina singola AEM Sites embed-an-adaptive-form-or-interactive-communication-in-aem-sites-single-page-application
Adobe consiglia di utilizzare l'acquisizione dati moderna ed estensibile Componenti coreper la creazione di un nuovo Forms adattivoo l'aggiunta di Forms adattivo alle pagine AEM Sites. Questi componenti rappresentano un progresso significativo nella creazione di Forms adattivi, garantendo esperienze utente straordinarie. Questo articolo descrive un approccio precedente all’authoring di Forms adattivi utilizzando i componenti di base.
Panoramica overview
AEM Forms consente agli sviluppatori di moduli di incorporare facilmente moduli adattivi e comunicazioni interattive in un’applicazione AEM Sites a pagina singola (SPA). Il modulo adattivo incorporato e la comunicazione interattiva sono completamente funzionali e gli utenti possono compilare e inviare il modulo senza uscire dalla pagina. Aiuta l’utente a rimanere nel contesto di altri elementi della pagina web e a interagire contemporaneamente con il modulo adattivo o la comunicazione interattiva.
Nell'applicazione AEM Sites a pagina singola è possibile aggiungere un modulo adattivo o una comunicazione interattiva utilizzando il componente Contenitore SPA di AEM Forms . È un componente di AEM Forms per AEM Sites SPA che puoi aggiungere alla pagina Sites.
Per informazioni sull'incorporamento di un modulo adattivo in un AEM Sites non SPA, consulta Incorporare un modulo adattivo o una comunicazione interattiva nella pagina AEM Sites.
Prerequisiti prerequisites
Per incorporare un modulo adattivo o una comunicazione interattiva in un SPA dei siti AEM utilizzando il componente Contenitore SPA di AEM Forms, assicurati di aver installato:
- Java SE Development Kit 8 o successivo
- Apache Maven 3.3.1 o successivo
- Istanza di authoring AEM
- Pacchetto del componente aggiuntivo AEM Forms 6.4.2 nell'istanza di authoring
Installare il componente Contenitore SPA di AEM Forms install-aem-forms-spa-container-component
Esegui la procedura seguente per installare il componente Contenitore SPA di AEM Forms:
-
Installa il componente AEM Forms per l’SPA. Le istruzioni per installare il componente sono disponibili nel file README.md.
Il componente include un componente React di esempio che può essere utilizzato per integrare il componente contenitore SPA con un progetto SPA basato su React.
-
Integra 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 SPA di AEM Forms e aver integrato il componente con un progetto SPA basato su React, puoi incorporare moduli adattivi e comunicazioni interattive nella pagina di AEM Sites.
Incorporare un modulo adattivo o una comunicazione interattiva af-component
Per incorporare un modulo adattivo o una comunicazione interattiva utilizzando il componente Contenitore di AEM Forms per SPA:
-
Apri la pagina dei siti AEM, in modalità di modifica, in cui desideri incorporare un modulo adattivo o una comunicazione interattiva.
-
Inserire il modulo AEM per il componente SPA nella pagina utilizzando una delle opzioni seguenti:
-
Selezionare il contenitore di layout nella pagina Sites, selezionare + e selezionare il modulo AEM per il componente SPA.
-
Dal pannello del browser Componenti, trascina il modulo AEM per il componente SPA sulla pagina.
-
Cerca un modulo adattivo o una comunicazione interattiva nel browser Assets e trascinalo sulla pagina Sites. Incorpora il modulo in un contenitore di componenti AEM Forms for SPA.
note note NOTE Il rendering di più componenti AEM Forms SPA Container in una pagina non è supportato. Puoi avere più Contenitori SPA di AEM Forms su una pagina, ma viene eseguito il rendering di un solo componente alla volta. Assicurati che in una pagina sia visibile un solo componente per evitare discrepanze. -
-
Seleziona il componente Contenitore SPA di AEM Forms incorporato nella pagina Sites, quindi seleziona
-
Nella finestra di dialogo Modifica contenitore AEM Forms, specifica quanto segue:
-
Tipo risorsa: Seleziona il tipo di risorsa da incorporare. Le opzioni sono Modulo adattivo e Comunicazione interattiva
-
Percorso risorsa: sfoglia e seleziona il modulo adattivo o la comunicazione interattiva da incorporare. Il campo viene compilato automaticamente se viene inserito un modulo adattivo o una comunicazione interattiva tramite il browser Assets.
-
Canale (solo comunicazione interattiva): seleziona il tipo di canale interattivo da incorporare. Le opzioni sono Canale Web e Canale di stampa.
-
Tema: seleziona 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 carattere, il colore di sfondo, le dimensioni e l'allineamento.
-
-
Seleziona
Modulo adattivo integrato e comunicazione interattiva Publish publish-embedded-adaptive-form-and-interactive-communication
Considera i seguenti scenari per la pubblicazione di una risorsa incorporata (modulo adattivo o comunicazione interattiva) sulla pagina di AEM Sites:
- Se pubblichi la pagina AEM Sites per la prima volta e include un modulo adattivo incorporato o una comunicazione interattiva, pubblica la pagina Sites e la risorsa incorporata.
- Se hai modificato solo il modulo adattivo incorporato o la comunicazione interattiva in una pagina Sites pubblicata, pubblica la risorsa originale e le modifiche si riflettono nella pagina Sites pubblicata. La pagina Sites pubblicata include un riferimento alla risorsa e non richiede la ripubblicazione della pagina.
- Se hai modificato la pagina Sites e il modulo adattivo incorporato o la comunicazione interattiva, ripubblica la pagina Sites e la risorsa incorporata.
Modifica modulo adattivo incorporato e comunicazione interattiva modify-embedded-adaptive-form-and-interactive-communication
La pagina dei siti AEM mantiene un riferimento al modulo adattivo e alla comunicazione interattiva nel contenitore di AEM Forms. Pertanto, tutte le configurazioni e le proprietà, come il tema, gli stili e l’azione di invio, configurate nel modulo adattivo originale e nella comunicazione interattiva vengono mantenute nel modulo adattivo incorporato e nella comunicazione interattiva.
Per modificare la configurazione o la proprietà del modulo adattivo incorporato e della comunicazione interattiva, effettua una delle seguenti operazioni.
- Apri il modulo originale nei moduli adattivi o nella comunicazione interattiva nei rispettivi editor e modificali.
- Selezionare il modulo adattivo o la comunicazione interattiva dalla pagina Sites in modalità di modifica, quindi selezionare Modifica in una nuova finestra. Il modulo originale si apre in modalità di modifica.
Considerazioni e best practice considerations-and-best-practices
Quando incorpori moduli adattivi 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 dei moduli.
- L’azione di invio configurata nel modulo originale viene mantenuta nel modulo incorporato.
- Il targeting delle esperienze e i test A/B configurati nel modulo originale non funzionano nel modulo incorporato. Tuttavia, puoi utilizzare il targeting dell’esperienza nella pagina Sites per presentare diversi moduli in base ai profili utente.
- 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.