Using data-sly-list with multifield to include components

[hr-empd]

I'm trying to loop through columns and rows to define a table like structure and add authoring interfaces for each cell with a component 

<sly data-sly-use.count="count.js" data-sly-unwrap 
data-sly-use.model="com.example.core.models.content.TableOfContentsModel"/>


<div data-sly-test="${wcmmode.edit}" class="cq-placeholder cq-marker-start"
    data-emptytext="${component.title} Component" style="min-width:250px; min-height:100px;"></div>


<div class="container ">

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

        </div>
        </sly>
    </div>
    </div>

The data-sly-list.row="${count.numberOfRows}" array iterates through and repeats the table-row class and adds Rte component in each of the row but the multifield array data-sly-list.card="${model.listOfChapters}" only repeats the html element but dosent add that many number of Rte components and I'm left with only one Rte component per row as shown in the  image.

Am I doing it right or is there any other approach that I can use?
Thanks in advance!

[Anmol_Bhardwaj]

I think there are 4 RTEs added but they are overlapping one another.

Try adding unique id to each div ( you can use list index for that), and then write some CSS to position these elements.

You would be able to see those RTEs now.

[hr-empd]

I rechecked in the content tree, there are only 4 RTE's (one RTE per row). They are not overlapping

I tried to author one RTE and it gets applied to every cell in the row

[mayanks21529814]

Can you make below changes and test? Looks like your resource name is duplicate:

<div class="table-cell" data-sly-test.resourceNode="${'{0}{1}{2}' @ format=['row2',rowList.count, columnList.count], i18n}">
<div data-sly-resource="${ resourceNode @ resourceType='demo/components/text'}" data-sly-unwrap="${!wcmmode.edit && !wcmmode.preview}" style="min-width:60px;">

[MukeshYadav_]

Hi all, 

this type of requirement can be achieved by providing unique value to each resource

<sly data-sly-use.count="count.js" data-sly-unwrap

data-sly-use.model="com.example.core.models.content.TableOfContentsModel"/>

<div data-sly-test="${wcmmode.edit}" class="cq-placeholder cq-marker-start"

data-emptytext="${component.title} Component" style="min-width:250px; min-height:100px;"></div>

<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

Thanks