CODEWITHSUNDEEP
aemsightly
Jason
Jason

Reputation: 321

in Adobe CQ (AEM) how to iterate through a list of resources using `data-sly-list` and `data-sly-resource` in sightly?

In AEM 6.1, with a structure like this:

 - Page
   - form node
     - parsys
       - node 1
       - node 2
       - ...
       - node n

The original form has the following code which works <div data-sly-resource="${ 'parsys' @ resourceType='foundation/components/parsys' }" data-sly-unwrap>

I'm trying to update the form component that injects something before the last node n. On the form node, I have the following code:

<div data-sly-list.children="${resource.listChildren}">
    <div data-sly-list.fields="${children.listChildren}">
        <div data-sly-test=${fieldsList.last}> DO SOMETHING BEFORE LAST NODE</div>
        <div data-sly-resource="${fields}"></div>
    </div>
</div>

The data-sly-resource seems to cause the server to hang, with very high cpu usage while the browser is waiting for response. I have to terminate the server process and restart it.

I have tried <div data-sly-resource="${fields @ resourceType = fields.resourceType}"></div> but it doesn't seem to render the fields as expected.

Is this the right way of iterating through nodes?

Update: Looked in the massive error.log file, and it seems the CPU spike was caused by infinite loop of RecursionTooDeepException - which I don't see where the recursion is.

Upvotes: 3

Views: 2903

Answers (2)

Danil Gaponov
Danil Gaponov

Reputation: 1441

I would create a Sling Model and return the data from child nodes as a list from it.

See this link for reference https://sling.apache.org/documentation/bundles/models.html#collections

Upvotes: 0

nateyolles
nateyolles

Reputation: 1921

According to the Sightly documentation on the Resource block statement, you need to pass in a path to the resource, either relative or absolute. I was able to make your code work by changing <div data-sly-resource="${fields}"></div> to <div data-sly-resource="${fields.path}"></div>.

<div data-sly-list.children="${resource.listChildren}">
    <div data-sly-list.fields="${children.listChildren}">
        <div data-sly-test=${fieldsList.last}> DO SOMETHING BEFORE LAST NODE</div>
        <div data-sly-resource="${fields.path}"></div>
    </div>
</div>

If you haven't already downloaded the Sightly REPL, I would highly suggest it to test and debug scenarios such as this one.

Upvotes: 3

Related Questions