HTL related issues

[tatrived]

Hi, I want to run the loop in HTL with some condition like  if my data size is 3 ( less than 3) it should run 1 time or if data size is 6 (in between 4-6) ,it should run 2 times  and so on 
for this i have written a loop that run with the size and inside that i need to put up a condition which return integer
if scrollingcontainer.items.size is 1or 2 or 3 is should run 1 times
if scrollingcontainer.items.size is 4 or 5 or 6 it should run 2 times
but, how can i write condition the condition like this in data-sly-test

 <sly data-sly-list.myitem="${scrollingcontainer.items}" data-sly-unwrap>

                <sly data-sly-test="${scrollingcontainer.items.size / 3 == 0}">

                    <div>test</div>

                </sly>

            </sly>

But it is giving me syntax error Can anyone help me with this?

[Rohan_Garg]

Sightly only supports logical and comparison operators and that is intended as the view rendering scripts are not supposed to contain business logic, this should come from the model/use-objects.

HTL does provide comparison operators which can be used to do number comparison but since your logic is dynamically based on size, it should be placed inside model or JS helper.

Reference URL - https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#114-operators

${nullValueOne == nullValueTwo} <!-- null comparison -->
${nullValueOne != nullValueTwo} <!-- null comparison -->
${stringValueOne == stringValueTwo} <!-- string comparison -->
${stringValueOne != stringValueTwo} <!-- string comparison -->
${numberValueOne < numberValueTwo} <!-- number comparison -->
${numberValueOne <= numberValueTwo} <!-- number comparison -->
${numberValueOne == numberValueTwo} <!-- number comparison -->
${numberValueOne >= numberValueTwo} <!-- number comparison -->
${numberValueOne > numberValueTwo} <!-- number comparison -->
${numberValueOne != numberValueTwo} <!-- number comparison -->
${booleanValueOne == booleanValueTwo} <!-- boolean comparison -->
${booleanValueOne != booleanValueTwo} <!-- boolean comparison -->
${enumConstant == 'CONSTANT_NAME'} <!-- Java Enum comparison -->

[tatrived]

Can we send the size as well in model because size is also dynamic if yes can you share some document?

[Rohan_Garg · Accepted solution]

You can send the parameter to sling model from Sightly as seen below - 
Sightly:

<sly data-sly-set.sizeValue="${scrollingcontainer.items.size}"></sly>

<sly data-sly-use.helloWorldModel="${'com.project.HelloWorldModel' @sizeReference=sizeValue}/>

Sling Model Class:

@Model(adaptables = SlingHttpServletRequest.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {

    @Inject
    private int sizeReference;

[EstebanBustamante]

I think there could be a chance to do that with HTL but would be tricky and dirty, instead, the cleaner way to achieve this is to move that "logic" to your sling model and do whatever you need there.

[tatrived]

I don't think i can use model bcoz the size is also dynamic

[iamnjain]

Hello @tatrived 

Can you please place more code here?

From where this list is being populated, is it Sling Model who is returning that list?

scrollingcontainer, what is this variable?

[tatrived]

<style>

    #container {

        width: 100%;

        overflow-x: scroll;

    }

</style>

<span data-sly-use.scrollingcontainer="com.adobe.cq.wcm.core.components.models.Carousel">

    <div id="container">

        <div id="content">

            <span id="content" data-sly-use.templates="core/wcm/components/commons/v1/templates.html"

                data-sly-use.controlsTemplate="controls.html"

                data-panelcontainer="${wcmmode.edit && 'scrollingcontainer'}" id="${scrollingcontainer.id}"

                class="cmp-scrollingcontainer" role="group" aria-label="${scrollingcontainer.accessibilityLabel}"

                aria-live="polite" aria-roledescription="carousel" data-cmp-is="carousel"

                data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : scrollingcontainer.autoplay}"

                data-cmp-delay="${scrollingcontainer.delay}"

                data-cmp-autopause-disabled="${scrollingcontainer.autopauseDisabled}"

                data-cmp-data-layer="${scrollingcontainer.data.json}"

                data-placeholder-text="${wcmmode.edit && 'Please add Carousel components here' @ i18n}">

                <sly data-sly-call="${controlsTemplate.controls @ scrollingcontainer=scrollingcontainer}"

                    data-sly-test="${scrollingcontainer.controlsPrepended}"></sly>

                <div data-sly-test="${scrollingcontainer.items && scrollingcontainer.items.size > 0}"

                    class="cmp-scrollingcontainer__content" aria-atomic="false"

                    aria-live="${scrollingcontainer.autoplay ? 'off' : 'polite'}">

                    <div data-sly-repeat.item="${scrollingcontainer.items}"

                        data-sly-resource="${item.name @ decorationTagName='div'}" id="${item.id}-tabpanel"

                        class="${(wcmmode.preview||wcmmode.disabled)  && 'cmp-scrollingcontainer__item'}"

                        role="tabpanel" aria-labelledby="${item.id}-tab" aria-roledescription="slide"

                        aria-label="${(scrollingcontainer.accessibilityAutoItemTitles && item.title) || 'Slide {0} of {1}' @ format=[itemList.count, scrollingcontainer.items.size], i18n}"

                        data-cmp-data-layer="${item.data.json}" data-cmp-hook-carousel="item"></div>

                    <sly data-sly-call="${controlsTemplate.controls @ carousel=scrollingcontainer}"

                        data-sly-test="${!scrollingcontainer.controlsPrepended}"></sly>

                </div>

                <sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"

                    data-sly-test="${(wcmmode.edit || wcmmode.preview) && scrollingcontainer.items.size < 1}"></sly>

            </span>

        </div>

    </div>

</span>

<button class="cmp-scrollingcontainer__action cmp-scrollingcontainer__action--previous" type="button" id="slideLeft"

    data-cmp-hook-carousel="previous">

    <span class="icon-chevron-left"></span>

</button>

<button class="cmp-scrollingcontainer__action cmp-scrollingcontainer__action--next" type="button" id="slideRight"

    data-cmp-hook-carousel="next">

    <span class="icon-chevron-right"></span>

</button>

<script>

    const buttonRight = document.getElementById('slideRight');

    const buttonLeft = document.getElementById('slideLeft');

    buttonRight.onclick = function () {

        document.getElementById('container').scrollLeft += 40;

    };

    buttonLeft.onclick = function () {

        document.getElementById('container').scrollLeft -= 40;

    };

    console.log(scrollingcontainer.items)

</script>


this is my whole code

[aanchal-sikka]

Hello @tatrived 

Please explain what you mean by size is dynamic.

The variable "scrollingcontainer" seems like one corresponding to a model. If yes, then the same model can be used to append more info, which can be used on UI,