AEM Sightly - How to loop through component child nodes

Question

I have a 'container' component for housing child components. Essentially, a container for holding tabs of content, where the user can drag in as many 'tabs' as they choose.

The code is as such:

<!--/* Tab Container Component */-->
<div data-sly-test="${wcmmode.edit}"><h2>Drag a 'Tab Panel' below:</h2></div>
<ul data-sly-list.tab="${list of children in the tab-container parsys}">
    <li>${tab.tabName}</li> //these will be the tabs using jQuery-UI
</ul>
<div data-sly-resource="${ @path='tab-container',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>

And the 'tab' component:

<!--/* Tab Panel Component */-->
<div class="tab-panel">
<div data-sly-resource="${ @path='tab-   panel',resourceType='wcm/foundation/components/parsys'}" data-sly-unwrap></div>
</div>

What I want to achieve is to use the container component to loop through the items in its parsys and pull out the property 'tabName' of each item. The node structure ends up as shown:

Possible duplicate of AEM Sightly to get properties of child nodes. — anotherdave
So, in trying to use the WCMUse, I seem to be getting an error "com.adobe.cq.sightly.WCMUse Failed to activate Use class" — rson
Does it tell you where the error in activation is? I had something similar around NPE when the Use class was being activated on install & didn't have access to a currentPage object — managed to resolve with some defensive checks — anotherdave

Aakash Aakash · Accepted Answer · 2018-08-10T07:41:00

This might work in your case:

<ul data-sly-list.tab="${resource.listChildren}">
    <li>${tab.name}</li> //these will be the tabs using jQuery-UI
</ul>

Basically, the tab-container is your parsys and resource.listChildren will list all the child resources/nodes. tab.name is provided by HTL which will give you tab_panel, tab_panel_1134.., etc.. Other properties inside of each tab-panel (tab) too can be accessed.

Another way to get directly to a resource is with data-sly-use:

with this you can reach any resource in AEM. Docs here (look for data-sly-use with resources).

Good Luck...

AEM Sightly - How to loop through component child nodes

1 Answers