Rearrange child components within parent component

[Pleben]

I have a parent component with cq:isContainer=true property and card components within the parent component.How to make the cards reorderable,i.e, move card 3 above card 1 etc?

[Tethich]

Hi @Pleben

One way is to drag them in crx. But I guess is not desirable as it will be a pain to maintain this all the time.

Or, if you have a multifield, you can move up and down the items in the dialog.

Or, if you don't want to not rely on the order AEM stores them, you can have a "position" property for each card, authorable (you can also have a js to validate value uniqueness if you like ), and have a backendlogic (in Sling model eventually) that returns to your frontend components the list of cards in the configured ordered.

[PRATHYUSHA_VP]

Hi @Pleben 

If components are authored in page, you can rearrange components by dragging up and down. Please try once

If you're including the child components dynamically using data-sly-resource in parent component. You can reorder by updating the order in HTL code.

For more details :

https://aemlab.blogspot.com/2021/11/cqiscontainer-property-in-aem.html - By @arunpatidar 

Hope this helps !

[kautuk_sahni]

@Pleben Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!

[Preetpal_Bindra]

@Pleben 

If you haven't already, take a look at the AEM Core components like Tabs and accordion that has the same concept of a parent container with child cards/components. They could be setup fairly quickly and give a chance to experiment with to get an idea on the possibilities.

https://www.aemcomponents.dev/