Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

HTL related issues

Avatar

Level 4

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?
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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;

View solution in original post

8 Replies

Avatar

Community Advisor

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 -->

Avatar

Level 4

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

Avatar

Correct answer by
Community Advisor

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;

Avatar

Community Advisor

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.



Esteban Bustamante

Avatar

Level 4

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

 

 

Avatar

Community Advisor

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?

Avatar

Level 4
<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

Avatar

Community Advisor

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,


Aanchal Sikka