How to use an integer value in sightly to iterate loop as many time of value?

Question

I want to iterate a loop based on Integer value in sightly like if integer value is 5 then loop will iterate five times.

I know a way to do this using JSTL in jsp page :

<c:forEach var="item" begin="1" end="${properties.value}" varStatus="loop">
    //statement
</c:forEach>

above in "end" im getting value from dialog, if i'm passing value like 5 then the loop will get execute 5 times.

I referred below link :

• Iteration For Loop in sightly

I have done several google searches as well and i do not find any examples of this scenario, every example is based on sightly List.

I want to do this using sightly based on passed integer value from dialog.

Thanks,

Arpit Bora

Answer 1

In HTL/Sightly you can only iterate over a collection: https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#227-repeat

A workaround would be to have a Use-API helper and simply create a list with the desired size so you can iterate.

Answer 2

Sharing my solution which will be helpful to others :)...

After several google searches and from Sightly/HTL Documentation I got to know that Sightly/HTL iterates through the collection only.

So I used "HTL JavaScript Use-API" to achieve my question solution.

First In my .js file, after getting the dialog integer value, I'm returning an array based on the value. Following is the code of my "itemCount.js" file :

"use strict";
use(function () {
    var count = properties["loopCountValue"];

    return new Array(Number(count));
});

Second in my .html file, using Sightly List (data-sly-list) I'm iterating array. Following is the code of my "testCount.html" file :

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" />
<sly data-sly-use.itemCount="itemCount.js" data-sly-unwrap />
 
<sly data-sly-test="${!itemCount}">
    <div>
        <h2>Iterate a sightly loop based on Integer value passed from dialog.</h2>
    </div>
</sly>
 
<sly data-sly-test="${itemCount}">
    <p>Test Count ${itemCount}</p>
    
    <ul data-sly-list.contentCount="${colCount}">
        <li>ITEMS : ${contentCountList.count}</li>
    </ul>
</sly>

--

Thanks,

Arpit Bora