Level 3

Risolto

HTL related issues

Forum|Forum|2 years ago
May 31, 2023
4 risposte
2274 visualizzazioni

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>

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

Questo argomento è stato chiuso alle risposte.

Migliore risposta di Rohan_Garg

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;

Rohan_Garg

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} 
${nullValueOne != nullValueTwo} 
${stringValueOne == stringValueTwo} 
${stringValueOne != stringValueTwo} 
${numberValueOne < numberValueTwo} 
${numberValueOne <= numberValueTwo} 
${numberValueOne == numberValueTwo} 
${numberValueOne >= numberValueTwo} 
${numberValueOne > numberValueTwo} 
${numberValueOne != numberValueTwo} 
${booleanValueOne == booleanValueTwo} 
${booleanValueOne != booleanValueTwo} 
${enumConstant == 'CONSTANT_NAME'}

T

tatrivedAutore

Level 3

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

Rohan_Garg

Risposta

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;

EstebanBustamante

Community Advisor and Adobe Champion

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

T

tatrivedAutore

Level 3

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

iamnjain

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?

T

tatrivedAutore

Level 3

<style>

#container {

width: 100%;

overflow-x: scroll;

}

</style>

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

</span>

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

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

</button>

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

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

</button>

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

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

Registrati

Accesso al social

Accedi alla community

Accesso al social

Scansione del file per virus.

Questo file non può essere scaricato