New Participant

data-sly-resource under list iteration

Forum|Forum|10 months ago
April 29, 2025
7 replies
828 views

we have a multifield and we are iterating them in html using list.

in between iteration im using <div data-sly-resource="${'xyz' @ resourceType='prj/components/content/xyz'}"></div>

but while authoring ill be getting resource xyz to author at one place not in all places.
and same authorable fields are rendered everywhere.
is it a write behavior?

kautuk_sahni

Employee

@sudarshanv1 Just checking in, were you able to resolve your issue?
We’d love to hear how things worked out. If the suggestions above helped, marking a response as correct can guide others with similar questions. And if you found another solution, feel free to share it — your insights could really benefit the community. Thanks again for being part of the conversation!

Kautuk Sahni

aanchal-sikka

New Participant

@sudarshanv1 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!

Aanchal Sikka

AmitVishwakarma

New Participant

Hi @sudarshanv1 ,

Use Case Recap
You're using a static component (e.g., xyz) inside a loop, but you want:
- Each instance to have independent content (not shared)
- Each to be authorable in AEM
- The component is not dynamic — it's always the same component (prj/components/content/xyz)

HTL Code:

<sly data-sly-list.item="${model.items}">
  <div data-sly-resource="${'item-' + itemList.count @ resourceType='prj/components/content/xyz'}"></div>
</sly>

Why this Works Perfectly

- ${'item-' + itemList.count} generates unique resource names like:

- item-1, item-2, item-3, etc.

- AEM creates these as child nodes under your component's resource

- Each instance of xyz component is rendered and stored independently

- Authors can edit each block separately in the dialog or page editor

- This avoids shared authoring issues where all entries reflect the same data

Optional Enhancement (for uniqueness across pages/components)

If needed, add a hash of the parent path to avoid clashes:

<sly data-sly-list.item="${model.items}">
  <div data-sly-resource="${'item-' + resource.path.hashCode + '-' + itemList.count @ resourceType='prj/components/content/xyz'}"></div>
</sly>

Authoring Dialog Tip

In your dialog, do not hardcode xyz once. Let AEM generate item-1, item-2, etc., and store them automatically during authoring. No multifield needed — each dynamic resource path will behave like a subcomponent.

Regards,
Amit

Imran__Khan

New Participant

@sudarshanv1 xyz should be a variable like xyz1, xyz2, etc. in place of constant for all.

MukeshYadav_

New Participant

Hi @sudarshanv1 ,

You may refer

<div class="container ">

    <div class="table">
        <sly data-sly-list.row="${count.numberOfRows}">
            <div class="table-row">
                <sly data-sly-list.column="${model.numberOfColumns}">
                    
                    <sly class="table-cell" data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>
                    
                    <div data-sly-resource="${ resourceNode,
                    resourceType='example/components/content/tableLongForm/rte'}"
                    data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="min-width:60px;">
                    </div>
                
                </sly>
            </div>
        </sly>
    </div>
</div>

Here resource node will always have unique value even if multiple component is added on the same page and work correctly.

${resource.path.hashCode} => will have unique value for each component

${rowList.count} => will be unique for each row withing that corresponding component

${columnList.count} => will be unique for each column withing that corresponding component

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-data-sly-list-with-multifield-to-include-components/m-p/688919/highlight/true#M46801

Thanks

S

ShivamKumar

New Participant

Hi @sudarshanv1 ,

The issue happens because you're using the same resource ('xyz') for each item in the multifield. This makes AEM treat it as a single resource, causing all items to show the same content and not allowing authoring.

To fix the issue, you need to reference a unique resource path for each item in the multifield. This ensures that each item points to its own instance of the component, allowing separate authoring.

<div data-sly-list="${model.items}">
<div data-sly-resource="${item.resourcePath @ resourceType='prj/components/content/xyz'}"></div>
</div>

By doing this, each item in the multifield gets its own unique resource, so it can be authored separately, avoiding the problem of sharing the same resource across all items.

Let me know if it works.
Thanks.

TarunKumar

New Participant

HI @sudarshanv1 ,

I'd like you t consider few points and then follow the code snippet that I've provided:

Ensure that model.items is correctly populated in your Sling Model or script, and each item has a valid resourcePath.
The resourcePath should point to a valid resource in the AEM repository that you want to include.
You can customize the HTML structure and add additional attributes or elements as needed.

This approach allows you to dynamically include resources for each item in a list, leveraging AEM's powerful resource resolution capabilities.

<!-- Assuming you have a list of items in your model -->
<div data-sly-list="${model.items}">
    <!-- Each item in the list can be accessed using the currentItem variable -->
    <div>
        <!-- Render a resource dynamically for each item -->
        <div data-sly-resource="${currentItem.resourcePath}" />
    </div>
</div>

-Tarun

S

SudarshanV1Author

New Participant

resource is not dynamic. its static in my case and im directly adding it with
<div data-sly-resource="${'xyz' @ resourceType='prj/components/content/xyz'}"></div>

R

Rajumuddana

New Participant

Hi @sudarshanv1 ,

what i understood from replies is, the 'path' of the resource your are including should be unique per each include in the loop.

ex: <div data-sly-resource="${'xyz' @ resourceType='prj/components/content/xyz'}"></div>

in this case the path is always 'xyz'

instead

<div data-sly-resource="${<some dynamic value or take it from each item> @ resourceType='prj/components/content/xyz'}"></div>

the loop outcome can be

.

so that you will get multiple entries of same static 'xyz' component with different paths. (i guess this us what your expectation.)

Thanks,

Raju.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded