Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Sightly incrementing numbers

Avatar

Level 6

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

4 Replies

Avatar

Employee Advisor

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.

Avatar

Correct answer by
Community Advisor

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