Incorporare un modulo adattivo in una pagina web esterna

È possibile Incorporare moduli adattivi in una pagina AEM Sites o una pagina web ospitata all’esterno di AEM. Il modulo adattivo incorporato è completamente funzionale 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 di interagire contemporaneamente con il modulo.

Prerequisiti

Esegui i seguenti passaggi prima di incorporare un modulo adattivo in un sito Web esterno

Incorpora modulo adattivo

È possibile incorporare un modulo adattivo inserendo alcune righe di JavaScript nella pagina web. L’API nel codice invia una richiesta HTTP al server AEM per le risorse dei moduli adattivi e inserisce il modulo adattivo nel contenitore di moduli specificato.

Per incorporare il modulo adattivo:

  1. Crea una pagina web sul tuo sito web con il seguente codice:

    <!doctype html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
  <div class="customafsection"/>
    <p>This section is replaced with the adaptive form.</p>

 <script>
 var options = {path:"/content/forms/af/locbasic.html", dataRef:"", themepath:"", CSS_Selector:".customafsection"};
 alert(options.path);
 var loadAdaptiveForm = function(options){
 //alert(options.path);
    if(options.path) {
        // options.path refers to the publish URL of the adaptive form
        // For Example: https:myserver:4503/content/forms/af/ABC, where ABC is the adaptive form
        // Note: If AEM server is running on a context path, the adaptive form URL must contain the context path
        var path = options.path;
        path += "/jcr:content/guideContainer.html";
        $.ajax({
            url  : path ,
            type : "GET",
            data : {
                // Set the wcmmode to be disabled
                wcmmode : "disabled"
                // Set the data reference, if any
               // "dataRef": options.dataRef
                // Specify a different theme for the form object
              //  "themeOverride" : options.themepath
            },
            async: false,
            success: function (data) {
                // If jquery is loaded, set the inner html of the container
                // If jquery is not loaded, use APIs provided by document to set the inner HTML but these APIs would not evaluate the script tag in HTML as per the HTML5 spec
                // For example: document.getElementById().innerHTML
                if(window.$ && options.CSS_Selector){
                    // HTML API of jquery extracts the tags, updates the DOM, and evaluates the code embedded in the script tag.
                    $(options.CSS_Selector).html(data);
                }
            },
            error: function (data) {
                // any error handler
            }
        });
    } else {
        if (typeof(console) !== "undefined") {
            console.log("Path of Adaptive Form not specified to loadAdaptiveForm");
        }
    }
 }(options);

 </script>
  </body>
</html>

  2. Nel codice incorporato:

    • Modifica del valore del options.path con il percorso dell’URL di pubblicazione del modulo adattivo. Se il server AEM è in esecuzione su un percorso contestuale, assicurati che l’URL includa il percorso contestuale. menziona sempre il nome completo del modulo adattivo, inclusa l’estensione. Ad esempio, il codice e l’adattivo di cui sopra risiedono sullo stesso server di moduli AEM in modo che l’esempio utilizzi il percorso contestuale del modulo adattivo /content/forms/af/locbasic.html.
    • Sostituisci options.dataRef con gli attributi da passare con l’URL. Puoi utilizzare la variabile dataref in precompilare un modulo adattivo.
    • Sostituisci options.themePath con il percorso di un tema diverso dal tema configurato nel modulo adattivo. In alternativa, puoi specificare il percorso del tema utilizzando l’attributo di richiesta.
    • CSS_Selector è il selettore CSS del contenitore di moduli in cui è incorporato il modulo adattivo. Ad esempio, la classe css .customafsection è il selettore CSS nell'esempio precedente.

Il modulo adattivo è incorporato nella pagina web. Osserva quanto segue nel modulo adattivo incorporato:

  • Le intestazioni e i piè di pagina nel modulo adattivo originale non sono inclusi nel modulo incorporato.
  • Le bozze e i moduli inviati sono disponibili nella scheda Bozze e invii del portale Forms.
  • L’azione di invio configurata sul modulo adattivo originale viene mantenuta nel modulo incorporato.
  • Le regole del modulo adattivo vengono mantenute e completamente funzionanti nel modulo incorporato.
  • Il targeting delle esperienze e i test A/B configurati nel modulo adattivo originale non funzionano nel modulo incorporato.
  • Se Adobe Analytics è configurato sul modulo originale, i dati di analisi vengono acquisiti nel server Adobe Analytics. Tuttavia, non è disponibile nel rapporto di Forms Analytics.

Topologia di esempio

La pagina web esterna che incorpora il modulo adattivo invia richieste al server AEM, che in genere si trova dietro il firewall in una rete privata. Per garantire che le richieste siano indirizzate in modo sicuro al server AEM, si consiglia di impostare un server reverse proxy.

Diamo un esempio di come impostare un server proxy inverso Apache 2.4 senza dispatcher. In questo esempio, ospiterai il server AEM con /forms percorso e mappa del contesto /forms per il proxy inverso. Garantisce che ogni richiesta di /forms sul server Apache vengono indirizzati all'istanza AEM. Questa topologia consente di ridurre il numero di regole al livello del dispatcher, in quanto tutte le richieste hanno il prefisso /forms indirizzare al server AEM.

  1. Apri httpd.conf file di configurazione e rimuovi il commento dalle seguenti righe di codice. In alternativa, è possibile aggiungere queste righe di codice nel file .

    LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule proxy_http_module modules/mod_proxy_http.so

  2. Imposta le regole proxy aggiungendo le seguenti righe di codice nel httpd-proxy.conf file di configurazione.

    ProxyPass /forms https://[AEM_Instance]/forms
ProxyPassReverse /forms https://[AEM_Instance]/forms

    Sostituisci [AEM_Instance] con l'URL di pubblicazione del server AEM nelle regole.

Se non installi il server AEM su un percorso contestuale, le regole proxy su Apache layer saranno le seguenti:

ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter
ProxyPass /libs/granite/csrf/token.json https://<AEM_Instance>/libs/granite/csrf/token.json

ProxyPassReverse /etc https://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect
ProxyPassReverse /content https://<AEM_Instance>/content
NOTA

Se imposti un’altra topologia, accertati di aggiungere gli URL di invio, precompilazione e altri URL all’inserire nell'elenco Consentiti del livello del dispatcher.

Best practice

Quando incorpori un modulo adattivo in una pagina web, considera le seguenti best practice:

  • Assicurati che le regole di stile definite nel CSS della pagina web non siano in conflitto con il CSS dell’oggetto modulo. Per evitare i conflitti, puoi riutilizzare il CSS della pagina web nel tema del modulo adattivo utilizzando AEM libreria client. Per informazioni sull'utilizzo della libreria client nei temi dei moduli adattivi, consulta Temi in AEM Forms.
  • Fare in modo che il contenitore del modulo nella pagina Web utilizzi l’intera larghezza della finestra. Garantisce che le regole CSS configurate per i dispositivi mobili funzionino senza alcuna modifica. Se il contenitore modulo non ha l’intera larghezza della finestra, è necessario scrivere CSS personalizzati per adattare il modulo a diversi dispositivi mobili.
  • Utilizzo [getData](https://helpx.adobe.com/it/experience-manager/6-3/forms/javascript-api/GuideBridge.html) API per ottenere la rappresentazione XML o JSON dei dati del modulo nel client.
  • Utilizzo [unloadAdaptiveForm](https://helpx.adobe.com/it/experience-manager/6-3/forms/javascript-api/GuideBridge.html) API per scaricare il modulo adattivo dal DOM di HTML.
  • Imposta l'intestazione access-control-origin durante l'invio della risposta da AEM server.

Abilitare AEM Forms a distribuire moduli adattivi a siti con più domini

  1. In AEM’istanza di pubblicazione, vai a AEM Web Console Configuration Manager all’indirizzo https://'[server]:[port]'/system/console/configMgr.
  2. Individua e apri la Filtro di riferimento Apache Sling configurazione.
  3. Nel campo Host consentiti , specifica il dominio in cui si trova la pagina web. Consente all’host di effettuare richieste POST al server AEM. Puoi inoltre utilizzare l’espressione regolare per specificare una serie di domini di applicazione esterni.

In questa pagina