Want to add style to odd index and even index of Map in sightly | Community
Skip to main content
R
Ronnie09
Level 6
December 17, 2021
Solved

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

  • December 17, 2021
  • 3 replies
  • 2303 views

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.
Best answer by Amit-Tiwari

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.

 

3 replies

manikanthar1295
manikanthar1295
Level 5
December 17, 2021

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.

    Amit-Tiwari
    Amit-TiwariAccepted solution
    Level 4
    December 17, 2021

    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.

     

      milind_bachani
      Adobe Employee
      milind_bachaniAdobe Employee
      Adobe Employee
      December 17, 2021

      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.

        Terms & ConditionsAccessibility statement

        Loading footer...