建立自定義工具欄操作

必備條件

建立自訂工具列動作之前,請先熟悉使用用戶端程式庫使用CRXDE Lite開發。

什麼是動作

適用性表單提供工具列,可讓表單作者設定一組選項。 這些選項定義為最適化表單的動作。 按一下「面板」工具列中的「編輯」按鈕,設定最適化表單支援的動作。

預設工具欄操作

除了預設提供的動作集之外,您還可以在工具列中建立自訂動作。 例如,您可以新增動作,讓使用者在提交表單之前檢閱所有最適化表單欄位。

在最適化表單中建立自訂動作的步驟

為了說明如何建立自訂工具列動作,下列步驟將引導您建立按鈕,讓使用者在提交已填寫的表單前,先檢閱所有最適化表單欄位。

  1. 適用性表單支援的所有預設動作都顯示在/libs/fd/af/components/actions資料夾中。 在CRXDE中,將fileattachmentlisting節點從/libs/fd/af/components/actions/fileattachmentlisting複製到/apps/customaction

  2. 將節點複製到apps/customaction資料夾後,將節點名稱更名為reviewbeforesubmit。 此外,還更改節點的jcr:titlejcr:description屬性。

    jcr:title屬性包含工具欄對話框中顯示的操作的名稱。 jcr:description屬性包含當使用者將指標暫留在動作上時,所顯示的詳細資訊。

    用於工具欄定製的節點層次

  3. reviewbeforesubmit節點中選擇cq:template節點。 請確定guideNodeClass屬性的值為guideButton,並相應地變更jcr:title屬性。

  4. 更改cq:Template節點中的type屬性。 在目前範例中,將type屬性變更為按鈕。

    類型值會在元件產生的HTML中新增為CSS類別。 使用者可以使用該CSS類別來設定其動作的樣式。 行動裝置和案頭裝置的預設樣式是針對按鈕、提交、重設和儲存類型值而提供。

  5. 從最適化表單編輯工具列對話方塊中選取自訂動作。 面板的工具欄中將顯示「審閱」按鈕。

    工具欄中提供自定義操 作顯示自定義建立的工具欄操作

  6. 要為「查看」按鈕提供功能,請在init.jsp檔案中添加一些JavaScript和CSS代碼以及伺服器端代碼,該代碼出現在reviewbeforesubmit節點內。

    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"
    }
    
  7. 若要驗證自訂動作的功能,請在「預覽」模式中開啟最適化表單,然後按一下工具列中的「檢閱」 。

    注意

    GuideBridge程式庫未在製作模式中載入。 因此,此自訂動作在製作模式中無法運作。

    自訂檢閱按鈕的動作展示

範例

以下歸檔包含內容包。 套件包含與上述自訂工具列動作示範相關的最適化表單。

取得檔案

本頁內容