创建自定义工具栏操作 creating-a-custom-toolbar-action
先决条件 prerequisite
在创建自定义工具栏操作之前，请熟悉使用客户端库和使用CRXDE Lite进行开发。
什么是操作 what-is-an-action-br
自适应表单提供了一个工具栏，表单作者可以使用该工具栏配置一组选项。 这些选项被定义为自适应表单的操作。 单击面板工具栏中的编辑按钮以设置自适应表单支持的操作。
除了默认提供的一组操作外，您还可以在工具栏中创建自定义操作。 例如，您可以添加操作以使用户在提交表单之前查看所有自适应表单字段。
在自适应表单中创建自定义操作的步骤 steps
为了说明自定义工具栏操作的创建，以下步骤将指导您创建按钮，以便最终用户在提交填写的表单之前查看所有自适应表单字段。
-
自适应表单支持的所有默认操作都存在于
/libs/fd/af/components/actions文件夹中。 在CRXDE中，将fileattachmentlisting节点从/libs/fd/af/components/actions/fileattachmentlisting复制到/apps/customaction。 -
将节点复制到
apps/customaction文件夹后，将节点名称重命名为reviewbeforesubmit。 此外，更改节点的jcr:title和jcr:description属性。jcr:title属性包含工具栏对话框中显示的操作的名称。jcr:description属性包含当用户将指针悬停在操作上时显示的更多信息。
-
选择
reviewbeforesubmit节点中的cq:template节点。 确保guideNodeClass属性的值为guideButton并相应地更改jcr:title属性。 -
更改
cq:Template节点中的类型属性。 对于当前示例，请将type属性更改为button。类型值在为该组件生成的HTML中添加为CSS类。 用户可以使用该CSS类来设置其操作的样式。 为按钮、提交、重置和保存类型值提供了移动设备和桌面设备的默认样式。
-
从自适应表单编辑工具栏对话框中选择自定义操作。 面板的工具栏中将显示一个“审阅”按钮。
-
要为“审阅”按钮提供功能，请在
reviewbeforesubmit节点内的init.jsp文件中添加一些JavaScript和CSS代码以及服务器端代码。在
init.jsp中添加以下代码。code language-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 class="table table-bordered"> <tr class="name"> <td class="reviewlabel col-md-3 active"> <label>Your Name is: </label> </td> </tr> <tr class="pan"> <td class="reviewlabel col-md-3 active"> <label>Your Pan Number is: </label> </td> </tr> <tr class="dob"> <td class="reviewlabel col-md-3 active"> <label>Your Date Of Birth is: </label> </td> </tr> <tr class="80cdeclaration"> <td class="reviewlabel col-md-3 active"> <label>Your Total 80C Declaration Amount is: </label> </td> </tr> <tr class="rentpaid"> <td class="reviewlabel col-md-3 active"> <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文件中添加以下代码。code language-javascript /*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文件。code language-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" } -
要验证自定义操作的功能，请在预览模式下打开自适应表单，然后单击工具栏中的审核。
note note NOTE 在创作模式下未加载 GuideBridge库。 因此，此自定义操作在创作模式下不起作用。