사용자 정의 도구 모음 액션을 만들기 전에 클라이언트측 라이브러리 사용 및 CRXDE Lite으로 개발을 참조하십시오.
적응형 양식에서는 양식 작성자가 옵션 집합을 구성할 수 있는 도구 모음을 제공합니다. 이러한 옵션은 적응형 양식에 대한 작업으로 정의됩니다. [패널에 대한 도구 모음]에서 [편집] 단추를 클릭하여 적응형 양식에서 지원하는 동작을 설정합니다.
기본적으로 제공되는 작업 세트 외에도 도구 모음에서 사용자 정의 작업을 만들 수 있습니다. 예를 들어 양식을 제출하기 전에 사용자가 모든 적응형 양식 필드를 검토하도록 하는 작업을 추가할 수 있습니다.
사용자 정의 도구 모음 작업 생성을 설명하기 위해 다음 단계를 통해 최종 사용자가 채워진 양식을 제출하기 전에 모든 적응형 양식 필드를 검토할 수 있는 단추를 만들 수 있습니다.
적응형 양식에서 지원하는 모든 기본 작업이 /libs/fd/af/components/actions
폴더에 있습니다. CRXDE에서 /libs/fd/af/components/actions/fileattachmentlisting
의 fileattachmentlisting
노드를 /apps/customaction
로 복사합니다.
노드를 apps/customaction
폴더에 복사한 후 노드 이름을 reviewbeforesubmit
(으)로 변경하십시오. 또한 노드의 jcr:title
및 jcr:description
속성을 변경합니다.
jcr:title
속성에는 도구 모음 대화 상자에 표시되는 작업의 이름이 포함되어 있습니다. jcr:description
속성에는 사용자가 포인터를 동작 위로 가져가면 표시되는 추가 정보가 포함되어 있습니다.
reviewbeforesubmit
노드에서 cq:template
노드를 선택합니다. guideNodeClass
속성 값이 guideButton
인지 확인하고 그에 따라 jcr:title
속성을 변경합니다.
cq:Template
노드에서 type 속성을 변경합니다. 현재 예제의 경우 type 속성을 button으로 변경합니다.
유형 값은 구성 요소에 대해 생성된 HTML에서 CSS 클래스로 추가됩니다. 사용자는 해당 CSS 클래스를 사용하여 동작의 스타일을 지정할 수 있습니다. 모바일 및 데스크톱 장치 모두에 대한 기본 스타일이 단추, 전송, 재설정 및 저장 유형 값에 대해 제공됩니다.
적응형 양식 편집 도구 모음 대화 상자에서 사용자 정의 작업을 선택합니다. [검토] 단추가 패널의 도구 모음에 표시됩니다.
[검토] 단추에 기능을 제공하려면 reviewbeforesubmit
노드 내에 있는 init.jsp 파일에 일부 JavaScript 및 CSS 코드와 서버측 코드를 추가합니다.
init.jsp
에 다음 코드를 추가합니다.
<%@include file="/libs/fd/af/components/guidesglobal.jsp" %>
<guide:initializeBean name="guideField" className="com.adobe.aemds.guide.common.GuideButton"/>
<c:if test="${not isEditMode}">
<cq:includeClientLib categories="reviewsubmitclientlibruntime" />
</c:if>
<%--- BootStrap Modal Dialog --------------%>
<div class="modal fade" id="reviewSubmit" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Review the Form Fields</h3>
</div>
<div class="modal-body">
<div class="modal-list">
<table>
<tr>
<td>
<label>Your Name is: </label>
</td>
</tr>
<tr>
<td>
<label>Your Pan Number is: </label>
</td>
</tr>
<tr>
<td>
<label>Your Date Of Birth is: </label>
</td>
</tr>
<tr>
<td>
<label>Your Total 80C Declaration Amount is: </label>
</td>
</tr>
<tr>
<td>
<label>Your Total HRA Amount is: </label>
</td>
</tr>
</table>
</div>
</div><!-- /.modal-body -->
<div class="modal-footer">
<div class="fileAttachmentListingCloseButton col-md-2 col-xs-2 col-sm-2">
<button data-dismiss="modal">Close</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
ReviewBeforeSubmit.js
파일에 다음 코드를 추가합니다.
/*anonymous function to handle show of review before submit view */
$(function () {
if($("div.reviewbeforesubmit button[id*=reviewbeforesubmit]").length > 0) {
$("div.reviewbeforesubmit button[id*=reviewbeforesubmit]").click(function(){
// Create the options object to be passed to the getElementProperty API
var options = {},
result = [];
options.somExpressions = [];
options.propertyName = "value";
guideBridge.visit(function(model){
if(model.name === "name" || model.name === "pan" || model.name === "dateofbirth" || model.name === "total" || model.name === "totalmonthlyrent"){
options.somExpressions.push(model.somExpression);
}
}, this);
result = guideBridge.getElementProperty(options);
$('#reviewSubmit .reviewlabel').each(function(index, item){
var data = ((result.data[index] == null) ? "No Data Filled" : result.data[index]);
if($(this).next().hasClass("reviewlabelvalue")){
$(this).next().html(data);
} else {
$(this).after($("<td></td>").addClass("reviewlabelvalue col-md-6 active").html(data));
}
});
// added because in mobile devices it was causing problem of backdrop
$("#reviewSubmit").appendTo('body');
$("#reviewSubmit").modal("show");
});
}
});
다음 코드를 ReviewBeforeSubmit.css
파일에 추가합니다.
.modal-list .reviewlabel {
white-space: normal;
text-align: right;
padding:2px;
}
.modal-list .reviewlabelvalue {
border: #cde0ec 1px solid;
padding:2px;
}
/* Adding icon for this action in mobile devices */
/* This is the glyphicon provided by bootstrap eye-open */
/* .<type> .iconButton-icon */
.reviewbeforesubmit .iconButton-icon {
position: relative;
top: -8px;
font-family: 'Glyphicons Halflings';
font-style: normal;
}
.reviewbeforesubmit .iconButton-icon:before {
content: "\e105"
}
사용자 정의 작업의 기능을 확인하려면 미리 보기 모드에서 적응형 양식을 열고 도구 모음에서 검토를 클릭합니다.
GuideBridge
라이브러리가 제작 모드에서 로드되지 않았습니다. 따라서 이 사용자 지정 작업은 작성 모드에서 작동하지 않습니다.
다음 아카이브는 컨텐츠 패키지를 포함합니다. 이 패키지에는 사용자 지정 도구 모음 동작의 위 데모와 관련된 응용 양식이 포함됩니다.