Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Customizing the childreneditor for custom components

ramaem12
Level 3
Level 3

Hi Everyone, can you provide me the steps to customize the childreneditor for custom components?

 

I followed the approach from accordion and carousel to do repeat in my component, but I am facing following issue -

 

org.apache.sling.api.resource.PersistenceException: Unable to commit changes to session.

 

Steps i followed -

  1. Made my component as cq:isContainer
  2. copied items tab from carousel to my custome component
    • core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor
  3. copied cq:editConfig from Accordion with listeners
  4. included panelcontainer.js from accordion
  5. include below code for adding components

 

 

<sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
     data-sly-test="${(wcmmode.edit || wcmmode.preview)}"></sly>​

 

 

FYI - I don't want to use the Accordion, Carousel or tab as my sling:resourceSuperType

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

6.4
1 Accepted Solution
Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

You can use child editor for custom components similar to the core components. 

I did it before for custom navigation component but unfortunately I don't have the complete package.

 

Editorhook.js

(function(channel) {
    "use strict";

    channel.on("cq-editor-loaded", function(event) {
        if (window.CQ && window.CQ.CoreComponents && window.CQ.CoreComponents.panelcontainer &&
            window.CQ.CoreComponents.panelcontainer.v1 && window.CQ.CoreComponents.panelcontainer.v1.registry) {
            window.CQ.CoreComponents.panelcontainer.v1.registry.register({
                name: "cmp-navigation",
                selector: ".cmp-navigation",
                itemSelector: "[data-cmp-hook-navigation='navpanel']",
                itemActiveSelector: ".cmp-navigation__navigation-item.is-active"
            });
        }
    });

})(jQuery(document));

 

extraclientlibs for navigation component dialog

(function($, $document) {
    "use strict";
    $(document).ready(function() {
        const NAV_SELECTOR = '.cmp-panelselector.is-open .cmp-panelselector__table tr';
        const NAVIGATIOIN_ITEM_TITLE = 'Navigation Item';
        const NOT_ACTIVE_NAVITEM_CLASS='navItemEditNotActiveItem';
        const NAV_Not_ACTIVE_ITEM_SELECTOR ='.'+ NOT_ACTIVE_NAVITEM_CLASS;
        const NOT_ACTIVE_ITEM_CLASS = 'notActiveItem';
        const ITEM_ACTIVE_CLASS = 'is-active';
        const CONTENT_IFRAME_SELECTOR ='#ContentFrame';


        $(document).on('click', NAV_SELECTOR, function() {
            var $this = $(this);
            var item = $this.data('id');
            var navItemSelector = '.cq-Overlay.cq-Overlay--component.cq-Overlay--container.cq-draggable.cq-droptarget.is-selected.is-active div.cq-droptarget[data-path="' + item + '"]';
            var $navItem = $(navItemSelector);
            if ($navItem.attr('title') == NAVIGATIOIN_ITEM_TITLE) {
                $(NAV_Not_ACTIVE_ITEM_SELECTOR).find('div').removeClass(NOT_ACTIVE_ITEM_CLASS);
                $($navItem).siblings().addClass(NOT_ACTIVE_NAVITEM_CLASS);
                $navItem.removeClass(NOT_ACTIVE_NAVITEM_CLASS);
                $(NAV_Not_ACTIVE_ITEM_SELECTOR).find('div').addClass(NOT_ACTIVE_ITEM_CLASS);
                var contentItem = $this.data('name');
                if (typeof contentItem !== 'undefined' || contentItem !== null) {
                    contentItem = contentItem.replace('_', '');
                    var contentItemSelector = '.cmp-navigation_author .cmp-navigation__navigation--item[data-nav-item="' + contentItem + '"]';
                    $(CONTENT_IFRAME_SELECTOR).contents().find('.cmp-navigation_author .cmp-navigation__navigation--item').removeClass(ITEM_ACTIVE_CLASS);
                    $(CONTENT_IFRAME_SELECTOR).contents().find(contentItemSelector).addClass(ITEM_ACTIVE_CLASS);
                }
            }
        })
    });
})($, $(document));

 

 

HTL

<div class="cmp-navigation__navigation--item" data-cmp-hook-navigation="navpanel" data-nav-item="item${linkList.index}">
            <sly data-sly-resource="${resourcePath @ resourceType='myapp/components/structure/header/navigation/navigation-item'}"/>
        </div>

View solution in original post

6 Replies
ChitraMadan
Community Advisor
Community Advisor

Hi @ramaem12,

 

Please look at the below thread for your issue:

https://github.com/adobe/aem-core-wcm-components/issues/696

 

There is an open enhancement request for enabling children editor component to be made available to use on its own

The children editor which can be used with the core Carousel should be available by itself for use w...

 

Hope this helps!!

Arun_Patidar
Correct answer by
Community Advisor
Community Advisor

You can use child editor for custom components similar to the core components. 

I did it before for custom navigation component but unfortunately I don't have the complete package.

 

Editorhook.js

(function(channel) {
    "use strict";

    channel.on("cq-editor-loaded", function(event) {
        if (window.CQ && window.CQ.CoreComponents && window.CQ.CoreComponents.panelcontainer &&
            window.CQ.CoreComponents.panelcontainer.v1 && window.CQ.CoreComponents.panelcontainer.v1.registry) {
            window.CQ.CoreComponents.panelcontainer.v1.registry.register({
                name: "cmp-navigation",
                selector: ".cmp-navigation",
                itemSelector: "[data-cmp-hook-navigation='navpanel']",
                itemActiveSelector: ".cmp-navigation__navigation-item.is-active"
            });
        }
    });

})(jQuery(document));

 

extraclientlibs for navigation component dialog

(function($, $document) {
    "use strict";
    $(document).ready(function() {
        const NAV_SELECTOR = '.cmp-panelselector.is-open .cmp-panelselector__table tr';
        const NAVIGATIOIN_ITEM_TITLE = 'Navigation Item';
        const NOT_ACTIVE_NAVITEM_CLASS='navItemEditNotActiveItem';
        const NAV_Not_ACTIVE_ITEM_SELECTOR ='.'+ NOT_ACTIVE_NAVITEM_CLASS;
        const NOT_ACTIVE_ITEM_CLASS = 'notActiveItem';
        const ITEM_ACTIVE_CLASS = 'is-active';
        const CONTENT_IFRAME_SELECTOR ='#ContentFrame';


        $(document).on('click', NAV_SELECTOR, function() {
            var $this = $(this);
            var item = $this.data('id');
            var navItemSelector = '.cq-Overlay.cq-Overlay--component.cq-Overlay--container.cq-draggable.cq-droptarget.is-selected.is-active div.cq-droptarget[data-path="' + item + '"]';
            var $navItem = $(navItemSelector);
            if ($navItem.attr('title') == NAVIGATIOIN_ITEM_TITLE) {
                $(NAV_Not_ACTIVE_ITEM_SELECTOR).find('div').removeClass(NOT_ACTIVE_ITEM_CLASS);
                $($navItem).siblings().addClass(NOT_ACTIVE_NAVITEM_CLASS);
                $navItem.removeClass(NOT_ACTIVE_NAVITEM_CLASS);
                $(NAV_Not_ACTIVE_ITEM_SELECTOR).find('div').addClass(NOT_ACTIVE_ITEM_CLASS);
                var contentItem = $this.data('name');
                if (typeof contentItem !== 'undefined' || contentItem !== null) {
                    contentItem = contentItem.replace('_', '');
                    var contentItemSelector = '.cmp-navigation_author .cmp-navigation__navigation--item[data-nav-item="' + contentItem + '"]';
                    $(CONTENT_IFRAME_SELECTOR).contents().find('.cmp-navigation_author .cmp-navigation__navigation--item').removeClass(ITEM_ACTIVE_CLASS);
                    $(CONTENT_IFRAME_SELECTOR).contents().find(contentItemSelector).addClass(ITEM_ACTIVE_CLASS);
                }
            }
        })
    });
})($, $(document));

 

 

HTL

<div class="cmp-navigation__navigation--item" data-cmp-hook-navigation="navpanel" data-nav-item="item${linkList.index}">
            <sly data-sly-resource="${resourcePath @ resourceType='myapp/components/structure/header/navigation/navigation-item'}"/>
        </div>

View solution in original post

ramaem12
Level 3
Level 3
Hi Arun, did you add any sling:resourceSuperType for your custome navigation component?
ramaem12
Level 3
Level 3

It would be great if you add some more info here, because we want implement this approach lot of our nee components

Arun_Patidar
Community Advisor
Community Advisor
Hi, I did not added any supertype. The navigation component is a container component, which has multifield in dialog to generate navigation items. Navigation item is the children item which is added from HTL(not drag and drop).
GonzaloCalandria
Level 1
Level 1

Hello @ramaem12 ! do you have the whole example of this implementation? how did you implement the model for this component? Have you done this for SPA?