了解如何在外部网页中嵌入自适应表单
您可以在AEM Sites页面或AEM外托管的网页中嵌入自适应表单。 嵌入的自适应表单功能齐全,用户无需离开页面即可填写和提交表单。 它帮助用户保持在网页上其他元素的上下文中并同时与表单交互。
在将自适应表单嵌入到外部网站之前,请执行以下步骤:
通过在网页中插入几行JavaScript,可以嵌入自适应表单。 代码中的API向AEM服务器发送HTTP请求以获得自适应表单资源,并在指定的表单容器中插入自适应表单。 以下是将自适应表单嵌入到外部页面的示例代码。 不要使用代码,因为它位于生产环境。 自定义代码以适合您的网站,如为使用自己版本的jQuery的网站使用iFrame。 使用iFrame有助于避免jQuery版本中的冲突:
将以下代码嵌入到您网站的网页中:
<!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: http: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>
在嵌入代码中:
options.path
变量的值。 如果AEM服务器在上下文路径上运行,请确保URL包含上下文路径。 例如,上述代码和adaptive from驻留在同一aem forms服务器上,因此该示例使用adaptive form /content/forms/af/locbasic.html的上下文路径。options.dataRef
替换为要随URL传递的属性。 您可以使用dataref变量预填自适应表单。options.themePath
替换为除自适应表单中配置的主题之外的主题的路径。 或者,也可以使用request属性指定主题路径。CSS_Selector
是嵌入自适应表单的表单容器的CSS选择器。例如,.customafsection css类是上例中的CSS选择器。自适应表单嵌入到网页中。 在嵌入的自适应表单中观察以下内容:
嵌入自适应表单的外部网页会向AEM服务器发送请求,服务器通常位于专用网络中的防火墙后。 为确保请求被安全地定向到AEM服务器,建议设置反向代理服务器。
让我们看一个示例,如何设置不带调度程序的Apache 2.4反向代理服务器。 在此示例中,您将承载具有/forms
上下文路径的AEM服务器,并映射/forms
作为反向代理。 它确保Apache服务器上对/forms
的任何请求都定向到AEM实例。 此拓扑有助于减少调度程序层的规则数,因为所有预装了/forms
的请求都会路由到AEM服务器。
打开httpd.conf
配置文件并取消以下代码行的注释。 或者,也可以在文件中添加这些代码行。
LoadModule proxy_html_module modules/mod_proxy_html.so
LoadModule proxy_http_module modules/mod_proxy_http.so
通过在httpd-proxy.conf
配置文件中添加以下几行代码来设置代理规则。
ProxyPass /forms https://[AEM_Instance]/forms
ProxyPassReverse /forms https://[AEM_Instance]/forms
将规则中的[AEM_Instance]
替换为AEM服务器发布URL。
如果不在上下文路径上装载AEM服务器,Apache层的代理规则将如下:
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
如果设置了任何其他拓扑,请确保将提交、预填和其他URL添加允许列表到调度程序层的。
在网页中嵌入自适应表单时,请考虑以下最佳实践:
http://[server]:[port]/system/console/configMgr
的AEM Web Console Configuration Manager。