Puede integrar formularios adaptables en una página de AEM Sites o en una página web alojada fuera de AEM. El formulario adaptable incrustado es completamente funcional, y los usuarios pueden rellenarlo y enviarlo sin abandonar la página. Esto permite al usuario mantenerse en el contexto de otros elementos de la página web e interactuar simultáneamente con el formulario.
Realice los siguientes pasos antes de incrustar un formulario adaptable en un sitio web externo
Puede incrustar un formulario adaptable si inserta algunas líneas de JavaScript en la página web. La API del código envía una solicitud HTTP al servidor de AEM para obtener recursos de formularios adaptables e inserta el formulario adaptable en el contenedor de formulario especificado.
Para incrustar el formulario adaptable, haga lo siguiente:
Cree una página web en su sitio web con el siguiente código:
<!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>
En el código incrustado:
El formulario adaptable está incrustado en la página web. Observe lo siguiente en el formulario adaptable integrado:
La página web externa que incrusta el formulario adaptable envía solicitudes al servidor de AEM, que normalmente se encuentra detrás del firewall en una red privada. Para garantizar que las solicitudes se dirijan de forma segura al servidor de AEM, se recomienda configurar un servidor proxy inverso.
Veamos un ejemplo de cómo puede configurar un servidor proxy inverso Apache 2.4 sin Dispatcher. En este ejemplo, alojará el servidor de AEM con la ruta de contexto /forms
y el mapa /forms
para el proxy inverso. Garantiza que cualquier solicitud de /forms
en el servidor de Apache se dirijan a la instancia de AEM. Esta topología ayuda a reducir el número de reglas en la capa de Dispatcher, ya que todas las solicitudes con el prefijo /forms
se envían al servidor de AEM.
Abra el archivo de configuración httpd.conf
y quite el comentario de las siguientes líneas de código. Como alternativa, puede agregar estas líneas de código en el archivo.
LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule proxy_http_module modules/mod_proxy_http.so
Configure las reglas de proxy al agregar las siguientes líneas de código en el archivo de configuración httpd-proxy.conf
.
ProxyPass /forms https://[AEM_Instance]/forms
ProxyPassReverse /forms https://[AEM_Instance]/forms
Reemplace [AEM_Instance]
por la URL de publicación del servidor de AEM en las reglas.
Si no monta el servidor AEM en una ruta de contexto, las reglas de proxy en la capa de Apache serán las siguientes:
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
Si configura cualquier otra topología, asegúrese de agregar las direcciones URL de envío, de relleno previo y de otro tipo a la lista de permitidos de Dispatcher.
Al incrustar un formulario adaptable en una página web, tenga en cuenta las siguientes prácticas recomendadas:
[getData](https://helpx.adobe.com/es/experience-manager/6-3/forms/javascript-api/GuideBridge.html)
para obtener la representación XML o JSON de los datos de formulario en el cliente.[unloadAdaptiveForm](https://helpx.adobe.com/es/experience-manager/6-3/forms/javascript-api/GuideBridge.html)
para descargar el formulario adaptable desde DOM HTML.https://'[server]:[port]'/system/console/configMgr
.