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 -
<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
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Views
Replies
Total Likes
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>
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
Hope this helps!!
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>
Views
Replies
Total Likes
It would be great if you add some more info here, because we want implement this approach lot of our nee components
Views
Replies
Total Likes
Views
Replies
Total Likes
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?
Views
Replies
Total Likes
I implemented for trdiational AEM implementation but not for SPA.
I have shared the code in above example. I will try to create a generic solution and share with community.
Views
Replies
Total Likes
Explanation and Sample code at
https://aemlab.blogspot.com/2022/09/aemaacs-core-components-children-editor.html
Views
Replies
Total Likes
Views
Likes
Replies