您可以在AEM Sites頁面或外部代管的網頁中內嵌最適化表單AEM。 內嵌的最適化表單功能完整,使用者可填寫並提交表單,而不需離開頁面。 它可協助使用者在網頁上保留其他元素的內容,並同時與表單互動。
在將最適化表單內嵌至外部網站之前,請執行下列步驟
您可以在網頁中插入幾行JavaScript,以嵌入最適化表單。 程式碼中的API會傳送HTTP要求至伺服器,以取得最AEM適化表單資源,並在指定的表單容器中插入最適化表單。
要嵌入最適化表單:
使用下列程式碼在您的網站上建立網頁:
<!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>
在內嵌的程式碼中:
最適化表單內嵌在網頁中。 在嵌入式自適應表單中觀察以下內容:
嵌入自適應表單的外部網頁會向伺服器發送請求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
如果設定了任何其他拓撲,請確保將submit、prefill和其他URL添加到調度程式層的allowlist中。
在網頁中內嵌最適化表單時,請考慮下列最佳實務:
[getData](https://helpx.adobe.com/experience-manager/6-3/forms/javascript-api/GuideBridge.html)
API,在用戶端中取得表單資料的XML或JSON表示法。[unloadAdaptiveForm](https://helpx.adobe.com/experience-manager/6-3/forms/javascript-api/GuideBridge.html)
API從HTML DOM卸載最適化表單。https://'[server]:[port]'/system/console/configMgr
的Web控制台配置管理器。