文档AEM 6.5用户指南

创建自定义工具栏操作 creating-a-custom-toolbar-action

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

先决条件 prerequisite

在创建自定义工具栏操作之前，请熟悉 使用客户端库 和 使用CRXDE Lite进行开发.

什么是操作 what-is-an-action-br

自适应表单提供了一个工具栏，表单作者可以使用该工具栏配置一组选项。 这些选项被定义为自适应表单的操作。 单击面板工具栏中的编辑按钮以设置自适应表单支持的操作。

默认工具栏操作

除了默认提供的一组操作外，您还可以在工具栏中创建自定义操作。 例如，您可以添加操作以使用户在提交表单之前查看所有自适应表单字段。

在自适应表单中创建自定义操作的步骤 steps

为了说明自定义工具栏操作的创建，以下步骤将指导您创建按钮，以便最终用户在提交填写的表单之前查看所有自适应表单字段。

  1. 自适应表单支持的所有默认操作都存在于 /libs/fd/af/components/actions 文件夹。 在CRXDE中，复制 fileattachmentlisting 节点来源 /libs/fd/af/components/actions/fileattachmentlisting 到 /apps/customaction.

  2. 将节点复制到之后 apps/customaction 文件夹，将节点名称重命名为 reviewbeforesubmit. 此外，更改 jcr:title 和 jcr:description 节点的属性。

    此 jcr:title 属性包含工具栏对话框中显示的操作的名称。 此 jcr:description 属性包含当用户将鼠标指针悬停在操作上时显示的更多信息。

    用于自定义工具栏的节点层次结构

  3. 选择 cq:template 中的节点 reviewbeforesubmit 节点。 确保 guideNodeClass 属性为 guideButton 和更改 jcr:title 产之权益。

  4. 在中更改type属性 cq:Template 节点。 对于当前示例，请将type属性更改为button。

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

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

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

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

    在中添加以下代码 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"
}

  7. 要验证自定义操作的功能，请在预览模式下打开自适应表单，然后单击工具栏中的审核。

    note note
    NOTE
    此 GuideBridge 在创作模式下未加载库。 因此，此自定义操作在创作模式下不起作用。

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

示例 samples

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

获取文件

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2