È 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.
Esegui i seguenti passaggi prima di incorporare un modulo adattivo in un sito Web esterno
È 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:
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>
Nel codice incorporato:
Il modulo adattivo è incorporato nella pagina web. Osserva quanto segue nel modulo adattivo incorporato:
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.
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
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
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.
Quando incorpori un modulo adattivo in una pagina web, considera le seguenti best practice:
[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.[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.https://'[server]:[port]'/system/console/configMgr
.