Things to know when implementing the Core Component's Children Editor for custom components.

Overview

If you are using core components, you should be familiar with the children-editor for Tabs, Accordion, and Carousel.

These components are the container components and contain other components as child components.

The adding and authoring children component is done using a panel selector icon.

Things to know when implementing the children-editor for custom components.
1. Create a component which has the supertype of panelcontainer

sling:resourceSuperType="core/wcm/components/panelcontainer/v1/panelcontainer"

2. Create editconfig

3. Create a Sling Model for your custom component with json exporter, panel container expect the following when editing/adding a child item in the component.

e.g. /content/aemlab/oneweb/reference-content/concept/children-editor/jcr:content/root/container/container/children-editor.model.json?_=1664019401356

4. Create a HTL. For example children-editor.html
5. Create an editor hook clientlibs e.g. This will add panel selector for the custom component

6. Create a site clientlibs.

This will act on panel select and will add logic to the component, such as show hide, collapse expand etc in edit and disable mode. Also, any other logic required for the component to work will be added.

Code
All the changes made to this example are available on GitHub, in https://github.com/arunpatidar02/aemaacs-aemlab/pull/27/files PR you can check what files are created

Full Article at https://aemlab.blogspot.com/2022/09/aemaacs-core-components-children-editor.html 

Q&A

Please use this thread to ask questions relating to this article