[AEM Forms]{class="badge positive" title="Si applica ad AEM Forms)."}

Incorporare un modulo adattivo basato su componenti core in una pagina web esterna embed-adaptive-form-in-external-web-page

Ultimo aggiornamento: 11 marzo 2026

Si applica a:
Experience Manager as a Cloud Service

Creato per:

Admin
Developer
User

Versione

Collegamento articolo

AEM as a Cloud Service

Questo articolo

AEM 6.5

Fai clic qui

È possibile incorporare moduli adattivi in una pagina AEM Sites o in una pagina Web ospitata al di fuori di 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.

Prerequisiti prerequisites

Prima di incorporare un modulo adattivo in un sito web esterno, effettua le seguenti operazioni

Pubblica il modulo adattivo da incorporare nell’istanza Publish del server AEM Forms.
Crea o identifica una pagina web sul tuo sito web in cui puoi ospitare il modulo adattivo. Verificare che la pagina Web possa leggere file jQuery da una rete CDN o che disponga di una copia locale di jQuery incorporata. jQuery è necessaria per eseguire il rendering di un modulo adattivo.
Quando il server AEM e la pagina Web si trovano in domini diversi, esegui i passaggi elencati nella sezione Configurare gli URL di richiesta assoluti con GuideBridge e abilitare AEM Forms a distribuire i moduli adattivi a un sito tra domini diversi.

Incorpora modulo adattivo embed-adaptive-form

Per incorporare un modulo adattivo, inserisci 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:

Creare una pagina Web nel sito Web con il codice seguente:

code language-html

     <!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/myadaptiveform.html", CSS_Selector:".customafsection"};
      alert(options.path);
      var loadAdaptiveForm = function(options){
      //alert(options.path);
         if(options.path) {
             // options.path refers to the path of the adaptive form
             // For Example: /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;
             $.ajax({
                 url  : path ,
                 type : "GET",
                 data : {
                     // wcmmode=disabled is only required for author instance
                     // wcmmode : "disabled"
                 },
                 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>

Nel codice incorporato:
- Modifica il valore della variabile options.path con il percorso dell’URL di pubblicazione del modulo adattivo. Se il server AEM è in esecuzione su un percorso di contesto, accertati che l’URL includa il percorso di contesto. Menziona sempre il nome completo del modulo adattivo, inclusa l’estensione. Ad esempio, il codice e il modulo adattivo di cui sopra risiedono sullo stesso server AEM Forms, pertanto l’esempio utilizza il percorso contestuale del modulo adattivo /content/forms/af/myadaptiveform.html.
- 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 bozze e i moduli inviati sono disponibili nella scheda Bozze e invii del portale Forms.
L’azione Invia configurata nel modulo adattivo originale viene mantenuta nel modulo incorporato.
Le regole dei moduli adattivi vengono mantenute e sono completamente funzionali 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 nel modulo originale, i dati di analisi vengono acquisiti dal server Adobe Analytics. Tuttavia, non è disponibile nel rapporto di Forms Analytics.
In Forms adattivo basato su componenti core, le librerie client (ClientLibs) sono incluse e caricate insieme ai componenti Intestazione e Piè di pagina di un modulo. Pertanto, quando incorpori un Forms adattivo basato su componenti core in una pagina web, questo include sempre Intestazione e piè di pagina del modulo.

Configurare gli URL di richiesta assoluti con GuideBridge configure-base-url

Quando il server AEM e la pagina web si trovano su domini diversi, è possibile utilizzare l’API GuideBridge per anteporre un’origine AEM Publish assoluta alle richieste generate dalle librerie guideruntime. Utilizzare la configurazione baseUrl per indicare a guideruntime di anteporre l’origine assoluta specificata alle richieste, ad esempio l’invio di moduli, il recupero dei dati di precompilazione, la generazione di documenti di record, il caricamento di file e le operazioni di invio interne.

Aggiungi il seguente frammento alla pagina Web di incorporamento, insieme all’implementazione guideBridge.connect esistente:

window.guideBridge.connect(function () {
    window.guideBridge.registerConfig("baseUrl", "https://publish.example.com");
});

Sostituisci https://publish.example.com con l’URL di pubblicazione del server AEM Forms.

Con questa configurazione, un URL di richiesta simile al seguente esempio:

/content/forms/af/my-form/jcr:content/guideContainer.af.submit.jsp

viene inviato al server AEM come:

https://publish.example.com/content/forms/af/my-form/jcr:content/guideContainer.af.submit.jsp

Quando il server AEM e la pagina web si trovano su domini diversi, è necessario configurare CORS anche nell’istanza AEM Publish. Segui i passaggi elencati nella sezione abilitare AEM Forms a distribuire moduli adattivi a un sito tra domini diversi.

Topologia di esempio sample-topology

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

Vediamo un esempio di come configurare un server proxy inverso Apache 2.4 senza Dispatcher. In questo esempio si sta ospitando il server AEM con il percorso di contesto /forms e la mappa /forms per il proxy inverso. In questo modo, qualsiasi richiesta per /forms sul server Apache viene indirizzata all’istanza di AEM. Questa topologia consente di ridurre il numero di regole a livello di Dispatcher, in quanto tutte le richieste con prefisso /forms vengono indirizzate al server AEM.

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

code language-text
`LoadModule proxy_html_module modules/mod_proxy_html.so LoadModule proxy_http_module modules/mod_proxy_http.so`

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

code language-text
`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 si monta il server AEM su un percorso contestuale, le regole proxy a livello di Apache sono 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

NOTE

Se configuri un’altra topologia, accertati di aggiungere l’URL di invio, il precaricamento e altri URL al inserisco nell'elenco Consentiti di invio a livello di dispatcher.

Best practice best-practices

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 la libreria client di AEM. Per informazioni sull’utilizzo della libreria client nei temi dei moduli adattivi, vedi Temi in AEM Forms.
Fare in modo che il contenitore del modulo nella pagina Web utilizzi l’intera larghezza della finestra. In questo modo le regole CSS configurate per i dispositivi mobili funzionano senza modifiche. Se il contenitore del modulo non occupa l’intera larghezza della finestra, è necessario scrivere file CSS personalizzati per adattare il modulo a dispositivi mobili diversi.
Utilizza l’API [getData](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) per ottenere la rappresentazione XML o JSON dei dati del modulo nel client.
Utilizza l’API [unloadAdaptiveForm](https://developer.adobe.com/experience-manager/reference-materials/6-5/forms/javascript-api/GuideBridge.html) per scaricare il modulo adattivo dal DOM di HTML.
Imposta l’intestazione access-control-origin quando invii una risposta da un server AEM.

Consentire ad AEM Forms di distribuire moduli adattivi a un sito tra più domini cross-site

Quando il server AEM e la pagina web si trovano su domini diversi, configura l’istanza AEM Publish utilizzando una delle seguenti opzioni.

NOTE

AEM as a Cloud Service non fornisce l’accesso alla console web OSGi sulle istanze di pubblicazione. Aggiungi le seguenti configurazioni al tuo archivio Git Cloud Manager in ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish e distribuisci le modifiche tramite Cloud Manager.

Utilizzo della configurazione baseUrl di GuideBridge

Quando si utilizza la configurazione GuideBridge baseUrl, configurare CORS nell’istanza AEM Publish in modo che il server AEM restituisca le intestazioni appropriate per gli endpoint di invio, precompilazione e documento di record.

Nell’archivio Git di Cloud Manager, passa a ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish.

Creare il file di configurazione OSGi com.adobe.granite.cors.impl.CORSPolicyImpl~embedded-forms.cfg.json con contenuto simile a quello dell’esempio seguente. Sostituisci https://www.example.com con l’origine della pagina Web che incorpora.

code language-json

{
  "supportscredentials": false,
  "supportedmethods": [
    "GET",
    "HEAD",
    "POST"
  ],
  "exposedheaders": [
    ""
  ],
  "alloworigin": [
    "https://www.example.com"
  ],
  "maxage:Integer": 1800,
  "alloworiginregexp": [
    ""
  ],
  "supportedheaders": [
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers"
  ],
  "allowedpaths": [
    "/content/forms/af/.*",
    "/libs/granite/csrf/token.json"
  ]
}

Esegui il commit, invia e distribuisci la configurazione tramite una pipeline Cloud Manager.

Per ulteriori informazioni, vedere Configurazione di Cross-Origin Resource Sharing (CORS).

Filtro referrer Apache Sling

Quando utilizzi un proxy inverso o incorpori il modulo adattivo senza la configurazione GuideBridge baseUrl, configura il filtro Apache Sling Referrer sull’istanza AEM Publish.

Nell’archivio Git di Cloud Manager, passa a ui.config/src/main/content/jcr_root/apps/<application-folder>/osgiconfig/config.publish.

Crea o aggiorna il file di configurazione OSGi org.apache.sling.security.impl.ReferrerFilter.cfg.json con contenuto simile a quello dell’esempio seguente. Sostituisci www.example.com con il dominio in cui si trova la pagina Web.

code language-json
`{ "allow.empty": false, "allow.hosts": [ "www.example.com" ], "allow.hosts.regexp": [ "" ], "filter.methods": [ "POST", "PUT", "DELETE", "COPY", "MOVE" ], "exclude.agents.regexp": [ "" ] }`

Esegui il commit, invia e distribuisci la configurazione tramite una pipeline Cloud Manager.

note warning
WARNING
Il filtro referrer di AEM non è un factory di configurazione OSGi, il che significa che è attiva solo una configurazione alla volta su un servizio AEM. Quando possibile, evita di aggiungere configurazioni personalizzate del filtro Referrer, in quanto sovrascriveranno le configurazioni native di AEM e potrebbero interrompere le funzionalità del prodotto.

Per ulteriori informazioni, vedere Configurazione filtro referrer.

recommendation-more-help

experience-manager-cloud-service-help-main-toc