How to use children editor on a list component's dialog on AEM?

Question

I am trying to enable children editor on a list component's dialog to allow users to add custom component into it, like the carousel component from core.

I use AEM 6.5, and the sling:resourceSuperType is list from core.

My .context.xml of the component is as follow:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
    xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:isContainer="{Boolean}true"
    jcr:primaryType="cq:Component"
    jcr:title="List"
    sling:resourceSuperType="core/wcm/components/list/v2/list"
    componentGroup="MyContent"
    teaserDelegate="thisPackage/components/content/teaser/v1/teaser" />

The HTML file of the list component, which is named "list.html" is as follow:

<sly data-sly-use.list="com.thisPackage.aem.dna.core.models.v1.List"
     data-sly-use.template="core/wcm/components/commons/v1/templates.html">

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

I could open the component's dialog on edit mode. however, if I add new components to the new children editor on dialog and try to close the dialog. I can't close the dialog. The error message is:

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

I followed the example in "github.com/adobe/aem-core-wcm-components/issues/696", and move editConfig from carousel to my list component. But, it didn't solve the issue.

What can I do?

Can you write what the version of AEM and core component you are using? — Pakira
I use AEM 6.5, and the sling:resourceSuperType is list from core. — Rongeegee

Pakira Pakira · Accepted Answer · 2020-05-29T02:41:00

This is not working because the servlet which is responsible for updating data is of resourceType = core/wcm/components/carousel/v1/carousel

You can see in the network call that XHR request is sent to the server which has url like :

 http://localhost:4202/content/we-retail/language-masters/en/jcr:content/root/responsivegrid/carousel.container.html

As you can see a selector container is sent and underlaying servlet :

   https://github.com/adobe/aem-core-wcm-components/blob/master/bundles/core/src/main/java/com/adobe/cq/wcm/core/components/internal/servlets/ContainerServlet.java

is listening to only core component resource-type.

In your case it is custom component, hence resource type does not match and hence you get the error.

Two things are possible:

1: Quick and easy is to just use sling:resourceSuperType = core/wcm/components/carousel/v1/carousel

Create custom clientlibs same as this:

/apps/core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor/clientlibs

but change var POST_SUFFIX = ".container.html"; to your own selector

and then create your own servlet (registered to your own defined selector) same as the core component.

Hope it helps!

How to use children editor on a list component's dialog on AEM?

2 Answers