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添加自定義操作，如果你需要更多的細節編輯欄。

---

在你不想遵循此辦法的情況下，第一個腳本有讓你堅持的組件節點的邏輯，你可以重複使用它，並把它嵌入在您自己的實現。