AEM6 - ダイアログなしでコンポーネントを編集するにはどうすればよいですか？

Question

私は、（ダイアログを開く必要なしに）テーブルコンポーネントを編集して、新しい行や列を追加しようとしました。

コンポーネントのダイアログが正しく構成されているため、そこから列と行の数を選択できます。UXを向上させるために、編集モードでしか表示されないテーブルの隣にボタンを追加しましたClientlib.edit javascriptからプログラムで行を追加します。しかし、実際にデータを保持する方法（変更を保存する）が何であるか分かりません。

正しい道のりで私を連れて行くことができるアイデアは非常に高く評価されます！

Answer 1

一つの可能​​な解決策は、3コンポーネントベースである -

1. 表コンテナコンポーネント（のみ行のコンポーネントを追加することができますかあなたはシンプルなものを維持するためにドラッグ＆ドロップのために可能性があります）
2. 行コンポーネント（別の単純なコンテナ（列構成要素を追加することができます。列の構成要素を追加できるカスタム '+'記号を使用してください）
3. 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); 

}); 

次がにありますそれぞれのコンポーネントについてに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を参照してください。場合

---

あなたは、このアプローチをフォローしたいいけない、最初のスクリプトは、コンポーネントノードを保持することを可能にするロジックを持っている、あなたはそれを再利用し、独自の実装でそれを埋め込むことができます。