创建自定义工具栏操作

前提条件

在创建自定义工具栏操作之前,请熟悉使用客户端库使用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属性更改为按钮。

    类型值将作为CSS类添加到为组件生成的HTML中。 用户可以使用该CSS类来设置其动作的样式。 为按钮、提交、重置和保存类型值提供了移动和桌面设备的默认样式。

  5. 从自适应表单编辑工具栏对话框中选择自定义操作。 面板的工具栏中会显示“审阅”按钮。

    自定义操作在工具栏中可 用显示自定义创建的工具栏操作

  6. 要为“审阅”按钮提供功能,请在init.jsp文件中添加一些JavaScript和CSS代码以及服务器端代码,它们位于reviewbeforesubmit节点中。

    init.jsp中添加以下代码。

    <%@include file="/libs/fd/af/components/guidesglobal.jsp?lang=zh-Hans" %>
    <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文件中添加以下代码。

    /*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库。 因此,此自定义操作在创作模式下不工作。

    演示自定义审阅按钮的操作

示例

以下存档包含内容包。 该包包含一个与自定义工具栏操作的上述演示相关的自适应表单。

获取文件

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now