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

Question

我一直在试着编辑表格组件（不需要打开对话框），例如：添加新的行或列。

该组件的对话框已正确配置，因此您可以从中选择列数和行数，但为了改进UX，我在表格旁边添加了一个按钮，该按钮仅在编辑模式下可见，以添加新的从客户端lib.edit JavaScript编程的行。但不知道如何实际保留数据（保存更改）。

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

Answer 1

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

1. 表容器组件（允许添加仅行组件或者你可以允许拖放让事情变得更简单）
2. 行组件（另一种简单的容器组件）遵循行特定的样式（允许添加列组件，使用组件编辑栏引入允许添加列组件的自定义'+'标记）
3. 带解析器的列组件（包含文本组件，使用基于模板的实现来实现此目的，以博客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添加自定义操作，如果你需要更多的细节编辑栏。

---

在你不想遵循此办法的情况下，第一个脚本有让你坚持的组件节点的逻辑，你可以重复使用它，并把它嵌入在您自己的实现。