AEM6 - 대화 상자없이 해당 위치에서 구성 요소를 편집하려면 어떻게합니까?

예를 들어, 대화 상자를 열지 않아도 위치에 표 구성 요소를 편집하려고했습니다. 새 행이나 열을 추가합니다.AEM6 - 대화 상자없이 해당 위치에서 구성 요소를 편집하려면 어떻게합니까?

구성 요소의 대화 상자가 올바르게 구성되어 있으므로 사용자가 UX를 개선하기 위해 열과 행 수를 선택할 수 있습니다. 편집 모드에서만 볼 수있는 단추 옆에 버튼을 추가하여 새로운 프로그래밍 방식으로 clientlib.edit 자바 스크립트에서 행. 그러나 실제로 데이터를 유지하는 방법이 무엇인지 모릅니다 (변경 사항 저장).

나를 올바른 길로 인도 할 수있는 아이디어는 크게 감사 할 것입니다.

출처

2016-08-11 fapm84

한 가지 가능한 솔루션 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); 

});

다음이다 actionConfigs을 editConfig에 개별 구성 요소로 설정하고 위 스크립트의 처리기를 가리 키십시오. 당신이 구성 요소를 추가하고 노드를 지속 할 수있는 '+'기호를보고 시작합니다 editbar 구성 요소에

<?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하면 자세한 내용이 필요하면 줄을 편집 할 사용자 지정 작업 추가를 참조하십시오. 이 방법을 따라 싶지 않는 경우

가 첫 번째 스크립트는 구성 요소 노드를 지속 할 수있는 논리를 가지고, 당신은 그것을 다시 사용할 수 있으며 자신의 구현에 포함.

출처

2016-08-11 17:29:09

AEM6 - 대화 상자없이 해당 위치에서 구성 요소를 편집하려면 어떻게합니까?

답변

관련 문제