Adobe AEM6-如何在没有对话框的情况下就地编辑零部件?

Adobe AEM6-如何在没有对话框的情况下就地编辑零部件?,adobe,aem,aem-6,Adobe,Aem,Aem 6,我一直在尝试就地编辑表组件(无需打开对话框),例如:添加新行或列 该组件的对话框已正确配置,因此您可以从中选择列数和行数,尽管为了改进UX,我在表旁边添加了一个按钮,该按钮仅在编辑模式下可见,以编程方式从clientlib.edit javascript添加新行。但不知道实际保存数据(保存更改)的方法是什么 任何能让我走上正确道路的想法都将受到极大的赞赏 一种可能的解决方案是基于3个组件- 表容器组件(只允许添加行组件,也可以允许拖放以简化操作) 行组件(另一个简单的容器组件)遵循特定于行的样式

我一直在尝试就地编辑表组件(无需打开对话框),例如:添加新行或列

该组件的对话框已正确配置,因此您可以从中选择列数和行数,尽管为了改进UX,我在表旁边添加了一个按钮,该按钮仅在编辑模式下可见,以编程方式从clientlib.edit javascript添加新行。但不知道实际保存数据(保存更改)的方法是什么


任何能让我走上正确道路的想法都将受到极大的赞赏

一种可能的解决方案是基于3个组件-

  • 表容器组件(只允许添加行组件,也可以允许拖放以简化操作)
  • 行组件(另一个简单的容器组件)遵循特定于行的样式(允许添加列组件,使用组件编辑栏引入允许添加列组件的自定义“+”符号)
  • 带有parsys的列组件(包含文本组件,使用基于模板的实现来实现,参考blog)
  • 要实现“+”符号功能和持久性,请执行以下操作-

    创建一个
    cq:ClientLibraryFolder
    并指定其属性
    categories=“cq.authoring.dialog”
    ,将JS添加到此客户端库中,作为-

    /* global Granite, $ */
    $(document).on('cq-page-info-loaded', function() {
        'use strict';
    
        // initialisation for Mysite
        window.mysite = window.mysite || {};
        window.mysite.app = window.mysite.app || {};
        window.mysite.app.auth = window.mysite.app.auth || {};
    
        (function(window, ns, undefined) {
            /**
             * Adds a child component of a specified type to a parent editable component.
             * (event handler for clicking the 'add' button in the edit interface on the sections or questions component)
             *
             * @param {Granite.author.Editable}     parentEditable      The editable parent component
             * @param {string}                      componentName       Name of the child component to add e.g. 'mysite-app/ui/components/content/link'
             * @param {boolean}                     componentTemplate   If true, call the low level interface directly. If false, call higher level Granite.author.edit methods.
             */
            var createChildComponent = function(parentEditable, componentName, componentTemplate) {
                return (
                    new ns.persistence.PostRequest()
                        .prepareCreateParagraph({
                            resourceType: componentName,
                            parentPath: parentEditable.path,
                            relativePosition: 'last',
                            templatePath: componentTemplate
                        })
                        .send()
                ).done(function() {
                    parentEditable.refresh();
                });
            };
    
            window.mysite.app.auth.component = (function() {
                return {
                    tablerow: {
                        add: function(editable) {
                            createChildComponent(editable, '/apps/mysite-app/ui/components/<path to row component>', false);
                        }
                    },
                    rowcell: {
                        add: function(editable) {
                            createChildComponent(editable, '/apps/mysite-app/ui/components/<path to column cell>', false);
                        }
                    }
                };
            })();
        })(window, Granite.author);
    
    });
    
    在组件编辑栏上,您将开始看到“+”符号,它允许您添加已配置的组件并保留其节点

    如果需要更多详细信息,请参阅将自定义操作添加到编辑栏



    如果您不想采用这种方法,第一个脚本具有允许您持久化组件节点的逻辑,您可以重用它并将其嵌入到您自己的实现中。

    这里我们可以使用自定义图标代替icon=“coral icon--add”?请参阅
    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
        cq:actions="[edit,delete]"
        jcr:primaryType="cq:EditConfig">
        <cq:actionConfigs jcr:primaryType="nt:unstructured">
            <addCell
                jcr:primaryType="nt:unstructured"
                handler="mysite.app.auth.component.rowcell.add"
                icon="coral-Icon--add"
                text="Add column to table row"/>
        </cq:actionConfigs>
    </jcr:root>