다음을 수행할 수 있습니다. 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 서버로 안전하게 전달되도록 하려면 역방향 프록시 서버를 설정하는 것이 좋습니다.
Dispatcher 없이 Apache 2.4 역방향 프록시 서버를 설정하는 방법의 예를 살펴보겠습니다. 이 예에서는 AEM 서버를 /forms
컨텍스트 경로 및 맵 /forms
역방향 프록시용입니다. 에 대한 모든 요청이 /forms
apache 서버의 경우 AEM 인스턴스로 이동됩니다. 이 토폴로지는 모든 요청에 접두사가 추가되므로 Dispatcher 레이어의 규칙 수를 줄이는 데 도움이 됩니다. /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을 디스패처 계층의 허용 목록에 추가하다에 추가해야 합니다.
웹 페이지에 적응형 양식을 포함할 때에는 다음 모범 사례를 고려하십시오.
[getData](https://helpx.adobe.com/kr/experience-manager/6-3/forms/javascript-api/GuideBridge.html)
클라이언트에서 양식 데이터의 XML 또는 JSON 표현을 가져오기 위한 API입니다.[unloadAdaptiveForm](https://helpx.adobe.com/kr/experience-manager/6-3/forms/javascript-api/GuideBridge.html)
HTML DOM에서 적응형 양식을 언로드하기 위한 API.https://'[server]:[port]'/system/console/configMgr
.