Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Using data-sly-list with multifield to include components

Avatar

Level 2

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.

hrempd_0-1643732178257.png

 

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

3 Replies

Avatar

Level 7

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.

 

Avatar

Level 2

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

hrempd_0-1643803159941.png

 

Avatar

Level 2

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;">