Sightly incrementing numbers | Community
Skip to main content
K
Kevin_GTa
Level 5
May 10, 2023
Solved

Sightly incrementing numbers

  • May 10, 2023
  • 2 replies
  • 2835 views

Hi All,

 

Is there a way to increment an integer within a sightly block? I like to convert the JSP code to Sightly, but it looks like Sightly lacks the capability of incrementing. Here's what I like to achieve:

 

JSP:

<c:set var="counter" value="1"/>

<c:set var="blockOpen" value="false"/>

<c:forEach items="${comp.items}">

    <c:set var="counter" value="${counter+1}"/>

    // -- if blockOpen, will print out <li>, later will close the <li> tag depending on the condition

    // the <li> tag will carry the counter as

    <li class="my-list__${counter}">

    // -- under some conditions

    <c:set var="blockOpen" value="${true}"/>

</c:forEach>

 

My best understanding is that the most similar code in Sightly will a list, but it's quite different from JSP. First of all you can't increment the counter, second, you can't toggle the boolean values. For instance,

 

<sly data-sly-set.blockOpen="false"/>

<sly data-sly-repeat="whatever">

    // -- trying to create utility sling model by injecting the number, and it fails

    <sly data-sly-use.myUtils="${'mysite.models.UtilsModel' @ counter = my_number_here}">

    ...

    // incrementCounter takes care of the logic, no luck

    <sly data-sly-set.counter="${myUtils.incrementCounter}"/>

    // -- won't pick this up, either, if I print out ${blockOpen}, it's always false

    <data-sly-set.blockOpen="true"/>

</sly>

 

Is it the only way to achieve this is to create a sling model helper completely taking care of the html code?

Thank you very much!

 

-kt

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 arunpatidar

Hi,

You ca maybe try count property of listItem if that fits in your use case.

 

e.g.

<ul id="non-empty-list" data-sly-list="${[1, 2, 3, 4, 5]}"> <li id="list_${itemList.count}" data-first="${itemList.first}" data-middle="${itemList.middle}" data-last="${itemList.last}" data-odd="${itemList.odd}" data-even="${itemList.even}"> ${itemList.count}: ${item} </li> </ul>

2 replies

ManviSharma
Adobe Employee
ManviSharmaAdobe Employee
Adobe Employee
May 10, 2023

Hi,

 

In Sightly, you can use the data-sly-attribute and data-sly-list to achieve the desired result. Here's an example code snippet:

 

<!-- Initialize the counter -->
<sly data-sly-attribute.counter="${1}" />

<!-- Initialize the boolean -->
<sly data-sly-attribute.blockOpen="${false}" />

<!-- Loop over the items and increment the counter on each iteration -->
<sly data-sly-list.item="${comp.items}">
<!-- Increment the counter -->
<sly data-sly-attribute.counter="${counter+1}" />

<!-- Output the list item with the counter as part of the class name -->
<li class="my-list__${counter}">
<!-- Output the item data -->
${item.data}

<!-- Conditionally close the list item -->
<sly data-sly-test="${blockOpen}">
</li>
</sly>

<!-- Update the boolean flag -->
<sly data-sly-test="${someCondition}">
<sly data-sly-attribute.blockOpen="${true}" />
</sly>
</sly>

 

 

In this code, we use data-sly-attribute to initialize the counter and blockOpen variables, and then use data-sly-list to loop over the comp.items array. On each iteration, we use data-sly-attribute to increment the counter and output the list item with the counter as part of the class name. We also use data-sly-test to conditionally close the list item and update the blockOpen boolean flag.

    K
    Kevin_GTaAuthor
    Level 5
    May 10, 2023

    Hi @manvisharma 

    Thanks for the code and explanation. I will try that.

     

    -kt

      arunpatidar
      Community Advisor
      arunpatidarCommunity AdvisorAccepted solution
      Community Advisor
      May 11, 2023

      Hi,

      You ca maybe try count property of listItem if that fits in your use case.

       

      e.g.

      <ul id="non-empty-list" data-sly-list="${[1, 2, 3, 4, 5]}"> <li id="list_${itemList.count}" data-first="${itemList.first}" data-middle="${itemList.middle}" data-last="${itemList.last}" data-odd="${itemList.odd}" data-even="${itemList.even}"> ${itemList.count}: ${item} </li> </ul>
      Arun Patidar
        K
        Kevin_GTaAuthor
        Level 5
        May 11, 2023

        Hi @arunpatidar,

         

        That's very useful! Thanks!

         

        -kt

          Terms & ConditionsAccessibility statement

          Loading footer...