Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Drag and Reordering not working in Container Component

Avatar

Level 3

I am using AEM6.5, I have a container component which has a number field. based on number field value I am dynamically adding column component  inside my container component using loop and data-sly-resource, this all works fine but I am not able to drag and rearrange positions of column components added dynamically inside my container component.

2 Replies

Avatar

Employee Advisor

If you are rendering components by code (in loop & data-sly-resource), you wont be able to allow editors to reorder them.

I suggest you use the core component's [1] component selector capability in dialog [2], which will allow reordering items in the dialog itself.

 

[1] https://www.aemcomponents.dev/content/core-components-examples/library/core-content/carousel.html

[2] https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/carousel... 

Avatar

Level 3

I made it work, its strange but both child and parent (container) component need to belong to same group. My child component was .hidden group. also we need to add cq:actions as copymove, paste, edit plus i need to loop items dynamically as below:

<sly data-sly-list.column="${resource.listChildren}"> code here</sly>

otherwise nodes will reset because i was reading nodes statically. we would also need one more loop to load un-authored components.