Need Help with Generating Dynamic Masonry Grid Component

[Mohammed-Skouti]

I'm working on a project where I need to create a masonry grid component that can dynamically add rows, with each row displaying different types of components. For example, if an editor adds a row and selects two components, the grid should generate two side-by-side containers, and each container should be capable of having additional components added inside.

The issue I'm facing is that when adding containers using data-sly-resource, the containers end up with the same ID, which causes them to behave as if they are cloned any components added to one container appear in all of them.

Has anyone encountered a similar issue or have any advice on how to properly manage unique IDs for these containers to ensure they work independently?

<div class="cmp-masonryGrid bootstrap"
   data-sly-use.model="com.xxxx.core.models.MasonryGrid"
    data-cmp-is="masonryGrid"
    data-cc-name="ctaevent"
    data-cc-componentname="column"
    data-cc-componentgroup="content">
    <div class="container">
       <sly data-sly-list.row="${model.getRows}">
            <div class="masonryGrid-row masonryGrid-${row.rowVersion}">
                  <div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);">
                     
                        <sly  data-sly-resource="${column @ resourceType='core/wcm/components/container/v1/container'}"></sly>
                   
                  </div>          
            </div>
         </sly>
    </div>
</div>

[MukeshYadav_ · Accepted solution]

Hi @Mohammed-Skouti ,

Try below code should be working

<div class="cmp-masonryGrid bootstrap"
   data-sly-use.model="com.xxxx.core.models.MasonryGrid"
    data-cmp-is="masonryGrid"
    data-cc-name="ctaevent"
    data-cc-componentname="column"
    data-cc-componentgroup="content">
    <div class="container">
       <sly data-sly-list.row="${model.getRows}">
            <div class="masonryGrid-row masonryGrid-${row.rowVersion}">
                  <div data-sly-list.column="${row.range}" style="display: grid; grid-template-columns: repeat(${row.rowVersion @ context='styleString'} , 1fr);">

                        <sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>
<div  data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}"  data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></div>
                   
                  </div>          
            </div>
         </sly>
    </div>
</div>

<sly data-sly-test.resourceNode="cmp-${resource.path.hashCode}-${rowList.count}${columnList.count}"></sly>

<sly data-sly-resource="${resourceNode @ resourceType='core/wcm/components/container/v1/container'}"></sly>

hashCode- ensure unique per component(in case multiple component authored on same page)

rowList.count & columnList.count will be unqiue for each iteration

So we can keep cumulatively formed string name as resource node name. 

Reference https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/using-data-sly-list-with-m... 

Correction:- ${resource.path.hashCode} instead of {resource.path.hashCode}

Thanks