Expand my Community achievements bar.

SOLVED

Weird content tree behaviour

Avatar

Level 2

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

Screenshot_5.png

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?

1 Accepted Solution

Avatar

Correct answer by
Level 2

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.

View solution in original post

3 Replies

Avatar

Community Advisor

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.



Arun Patidar

Avatar

Level 2

Hi Arun,

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

Screenshot_9.png

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

Avatar

Correct answer by
Level 2

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.