Weird content tree behaviour

[dimitrioss83126]

Hello,

I'm struggling with a component content tree issue that I've got on my custom component.

I'll attatch a screenshot to make it simpler

My custom component named "Calendar Card Item" is injected via:

data-sly-resource

two other components are added inside it - Button and Text. Unfortunately, in the content tree they are not below the Calendar Card Item, they are not nested. Is this a known issue?

I add like this:

<sly data-sly-resource="${'button' @ resourceType='test/package/components/button'}"></sly>

I tried replacing sly with div and adding a custom css class but it did not help. Does anybody got an idea what am I doing wrong?

[arunpatidar]

Hi,

Did you check the content tree nodes from CRXDE? The button and text data stores under the calendar card in the actual tree.

This could be an issue with the content tree to not showing under proper tree while components are nested.

[dimitrioss83126]

Hi Arun,

In the crx the nodes looks ok. They are nested properly.

So, you think it's an issue with the content tree itself, not with my component implementation?

[dimitrioss83126 · Accepted solution]

I found the solution. I looked into ui.ContentTree.js that is responsible for creating the markup of the content tree.

A component is added as a sub-component of a component if the parent has set the cq:isContainer node to "true".

Then all the components that are added with data-sly-resource are added as childs of the parent component.