Want to add style to odd index and even index of Map in sightly | Community
Skip to main content
Ronnie09
Level 6
Dec 17, 2021 8:19 AM UTC
Solved

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

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>

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Amit-Tiwari
Amit-TiwariAccepted solution
Level 4
Dec 17, 2021 9:36 AM UTC

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 reply

3 replies

milind_bachani
milind_bachani
Employee
Dec 17, 2021 5:24 PM UTC

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.

Translate
    Amit-Tiwari
    Amit-TiwariAccepted solution
    Level 4
    Dec 17, 2021 9:36 AM UTC

    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.

     

    Translate
      manikanthar1295
      manikanthar1295
      Level 5
      Dec 17, 2021 9:34 AM UTC

      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.

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...