建立自訂工具列動作 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程式庫未以編寫模式載入。 因此，此自訂動作無法在編寫模式下運作。