Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Content tree structure

Avatar

Community Advisor

Hi 

AEM components which have child components are not being properly displayed in the content tree. The child components should be nested under their parent and instead are all dropping to the bottom of the tree. 

ManuMathew1994_0-1641799158217.png

In the above screenshot, the list component is the bottom , below that the text component, and the componenets inside the list i.e the images are listed below in the content tree, Is there a way to overide this behaviour in the content tree?

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Manu_Mathew_, I think that the root cause of the problem is the way how List component has been implemented. First of all if you would like to see nested structure inside the Content Tree your wrapping component needs to contains property cq:isContainer set to true. Usually containers use parsys to allow authors put some other components inside.

List component from weretail is not configured as a container, it's because it's showing the references to other pages/elements as a grid or list - depending on configuration. Also configuration can change how items inside will be displayed, e.g. if you edit List component and change Type to Default (on Item Settings tab) you will see that Content Tree will present only List component instance itself. It is because in this mode additional resources are not used/included - in Article mode Image component resource is part of each element.

This is second aspect related to Content Tree - you can see in the page source that html markup that allows to edit each item located inside List is actually outside list component - and this is also reflected by Content Tree.

Summarizing following 2 aspects are required to display hierarchy under Content Tree

  1. Outer component needs to have cq:isContainer set to true.
  2. Inner component(s) needs to be implemented in the way that in edit mode their markup will be located inside specific outer component. This could be achieved using parsys and putting inner components into it.

Good example could be Layout Container component.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @Manu_Mathew_, I think that the root cause of the problem is the way how List component has been implemented. First of all if you would like to see nested structure inside the Content Tree your wrapping component needs to contains property cq:isContainer set to true. Usually containers use parsys to allow authors put some other components inside.

List component from weretail is not configured as a container, it's because it's showing the references to other pages/elements as a grid or list - depending on configuration. Also configuration can change how items inside will be displayed, e.g. if you edit List component and change Type to Default (on Item Settings tab) you will see that Content Tree will present only List component instance itself. It is because in this mode additional resources are not used/included - in Article mode Image component resource is part of each element.

This is second aspect related to Content Tree - you can see in the page source that html markup that allows to edit each item located inside List is actually outside list component - and this is also reflected by Content Tree.

Summarizing following 2 aspects are required to display hierarchy under Content Tree

  1. Outer component needs to have cq:isContainer set to true.
  2. Inner component(s) needs to be implemented in the way that in edit mode their markup will be located inside specific outer component. This could be achieved using parsys and putting inner components into it.

Good example could be Layout Container component.