AEM6 - 如何在没有对话框的情况下就地编辑组件？

Question

我一直在尝试就地编辑 Table 组件（无需打开对话框），例如：添加新行或新列。

该组件的对话框已正确配置，因此您可以从那里 select 列数和行数，尽管为了改善用户体验，我在 table 旁边添加了一个按钮仅在编辑模式下可见，以编程方式从 clientlib.edit javascript 添加新行。但是不知道实际持久化数据（保存更改）的方法是什么。

任何能让我走上正确道路的想法都将不胜感激！

Answer 1

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

Table 容器组件（允许仅添加行组件，或者您可以允许拖放以简化操作）
行组件（另一个简单的容器组件）遵循特定于行的样式（允许添加列组件，使用组件编辑栏引入允许添加列组件的自定义“+”符号）
Column component with parsys（包含文本组件，使用模板实现，参考博客here）

要实现“+”号功能和持久性，请执行以下操作 -

创建一个 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);

});

接下来是在 editConfig 中为各个组件设置 actionConfigs，并将其指向上述脚本的处理程序。

<?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>

在您的组件编辑栏上，您将开始看到“+”号，它允许您添加已配置的组件并保留其节点。

如果您需要更多详细信息，请参考 here 将自定义操作添加到编辑栏。

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

AEM6 - 如何在没有对话框的情况下就地编辑组件？

AEM6 - How can I edit a component in place without a dialog?

adobe

aem

aem-6