How to use children editor on custom component in AEM?

Question

Just like the Accordion and Carousel component from core, you can open the component dialog and add custom nested component by clicking the "add" button" on multifield. I am trying to add this functionality to the dialog of my custom component.

On the .content.xml of my dialog, I have this snippet for my the multifield or children editor.

<slides
  jcr:primaryType="nt:unstructured"
  sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/>

on top of this file, i have

    extraClientlibs=" 
   [my_custom_clientlibs,core.wcm.components.commons.editor.dialog.childreneditor.v1]

The problem is when I click on the add button of the dialog on my new component, nothing has popped up.

What am I missing here?

Pakira Pakira · Accepted Answer · 2020-05-22T15:45:25

I think you are missing to add sling:resourceSuperType = core/wcm/components/carousel/v1/carousel to your custom component.

If you do not want to override then add this below code in your component HTL file:

 <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>

This is because you insert a child component inside a newpar.

How to use children editor on custom component in AEM?

1 Answers