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

SOLVED

Want to add style to odd index and even index of Map in sightly

Avatar

Level 5

I have Map<String, List<String>>

for even Iteration I want css class left to appear and for odd iteration I want css class as right how can I achieve that

 

 

<sly data-sly-list="${sampleModel.data.keySet.iterator}">
<div class=left>
     <li>${item}</li>    
     <ul data-sly-list.dataPrint="${sampleModel.data[item]}"> 
          <li>${dataPrint}</li>
     </ul>
</div><!-- for even iteration I need class=left, for odd iteration I need class right-->
</sly>

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hey,

you can use HTL list even and odd to complete your requirement.

check if odd or even return true place in left or right div according to your need.
You can refer all htl feature here: htl spec 

 

${dataPrint.odd} it will give true if your list is on odd place
${dataPrint.even} it will give true if your list is on even place

 here the thing you need to refer

An additional itemList (respectively <variable>List in case a custom identifier/variable was defined using data-sly-list.<variable>) identifier is also available within the scope, with the following members:

  • index: zero-based counter (0..length-1);
  • count: one-based counter (1..length);
  • first: true for the first element being iterated;
  • middle: true if element being iterated is neither the first nor the last;
  • last: true for the last element being iterated;
  • odd: true if count is odd;
  • even: true if count is even.

 

View solution in original post

3 Replies

Avatar

Level 6

Hi,

 

You can use begin=0 step=2 end=itemList.count inside the list so that according to your need yo can place left or right.

Avatar

Correct answer by
Level 4

Hey,

you can use HTL list even and odd to complete your requirement.

check if odd or even return true place in left or right div according to your need.
You can refer all htl feature here: htl spec 

 

${dataPrint.odd} it will give true if your list is on odd place
${dataPrint.even} it will give true if your list is on even place

 here the thing you need to refer

An additional itemList (respectively <variable>List in case a custom identifier/variable was defined using data-sly-list.<variable>) identifier is also available within the scope, with the following members:

  • index: zero-based counter (0..length-1);
  • count: one-based counter (1..length);
  • first: true for the first element being iterated;
  • middle: true if element being iterated is neither the first nor the last;
  • last: true for the last element being iterated;
  • odd: true if count is odd;
  • even: true if count is even.

 

Avatar

Community Advisor

Hi @Ronnie09 ,

This is pretty much straight forward , you can use as :

<sly data-sly-list="${sampleModel.data.keySet.iterator}">
        <div data-sly-test="${itemList.odd}" class="left">
            <li>
                ${item}
            </li>
            <ul data-sly-list.dataPrint="${sampleModel.data[item]}">
                <li>
                    ${dataPrint}
                </li>
            </ul>
        </div>

        <div data-sly-test="${itemList.even}" class="right">
            <li>
                ${item}
            </li>
            <ul data-sly-list.dataPrint="${sampleModel.data[item]}">
                <li>
                    ${dataPrint}
                </li>
            </ul>
        </div >
</sly >

Thanks.