HTL related issues | Community
Skip to main content
T
tatrived
May 31, 2023
Solved

HTL related issues

  • May 31, 2023
  • 4 replies
  • 2265 views

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?
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by 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;

4 replies

Rohan_Garg
Community Advisor
Rohan_GargCommunity Advisor
Community Advisor
May 31, 2023

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

    T
    tatrivedAuthor
    May 31, 2023

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

      Rohan_Garg
      Community Advisor
      Rohan_GargCommunity AdvisorAccepted solution
      Community Advisor
      June 1, 2023

      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
        EstebanBustamanteCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        May 31, 2023

        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
          tatrivedAuthor
          May 31, 2023

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

           

           

            iamnjain
            Community Advisor
            iamnjainCommunity Advisor
            Community Advisor
            June 1, 2023

            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
              tatrivedAuthor
              June 1, 2023
              <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
                Community Advisor
                aanchal-sikkaCommunity Advisor
                Community Advisor
                June 1, 2023

                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
                  Terms & ConditionsAccessibility statement

                  Loading footer...