L’Adobe consiglia di utilizzare l’acquisizione dati moderna ed estensibile Componenti core per creazione di un nuovo Forms adattivo o 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.
È possibile incorporare moduli adattivi in una pagina AEM Sites o una pagina web ospitata al di fuori dell’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.
Prima di incorporare un modulo adattivo in un sito web esterno, effettua le seguenti operazioni
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:
<!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 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;
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:
/content/forms/af/locbasic.html
.Il modulo adattivo è incorporato nella pagina web. Osserva quanto segue nel modulo adattivo incorporato:
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, ospiti il server AEM con /forms
percorso e mappa contestuali /forms
proxy inverso. In questo modo, ogni richiesta di /forms
sul server Apache sono indirizzati all’istanza AEM. Questa topologia consente di ridurre il numero di regole a livello di Dispatcher, in quanto tutte le richieste hanno il prefisso /forms
indirizzare al server AEM.
Apri httpd.conf
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 si monta il server AEM su un percorso di contesto, 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
Se imposti un’altra topologia, accertati di aggiungere l’URL di invio, il precaricamento e altri URL al inserisco nell'elenco Consentiti di Dispatcher a livello di 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 HTML.https://'[server]:[port]'/system/console/configMgr
.