How to set convenience variables in sightly? | Community
Skip to main content
A
Anonymous
October 16, 2015
Solved

How to set convenience variables in sightly?

  • October 16, 2015
  • 13 replies
  • 22378 views

Hey all,

is there a way to set variables in sightly? Basically I have a lot of variables in my html template and it's getting kind of messy, especially with things like inherited properties [1] and combination of properties for conditions [2]. In a jsp I could just use <c:set> but not here. Any suggestions?

Thanks!

Paul

[1] example for long properties: ${inheritedPageProperties['parBloc1/topbanner/narrow']}

[2] data-sly-test="${inheritedPageProperties['parBloc1/topbanner/narrow'] && inheritedPageProperties['parBloc1/topbanner/test']}"

    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 Feike_Visser1

    hi,

    What you can do is things like this:

    <div data-sly-test.narrow="${inheritedPageProperties['parBloc1/topbanner/narrow']}">${narrow}</div>

    And then later on...

    <div data-sly-test=${ narrow && wcmmode.edit}">...</div>

    Let me know if this works for you...

    best,

    Feike

    13 replies

    Dinu_Arya
    Dinu_Arya
    New Participant
    February 20, 2019

    Will it work in AEM 6.2 or only in 6.4?

      Feike_Visser1
      Feike_Visser1
      Employee
      November 7, 2018

      Since HTL1.4 you can now also use data-sly-set.

      Example here: htl-examples/htl1_4.html at master · heervisscher/htl-examples · GitHub

        Feike_Visser1
        Feike_Visser1Accepted solution
        Employee
        October 16, 2015

        hi,

        What you can do is things like this:

        <div data-sly-test.narrow="${inheritedPageProperties['parBloc1/topbanner/narrow']}">${narrow}</div>

        And then later on...

        <div data-sly-test=${ narrow && wcmmode.edit}">...</div>

        Let me know if this works for you...

        best,

        Feike

          A
          Anonymous
          October 16, 2015

          Thanks! I guess that will have to do if there's no easier way.

          For my case I probably can't use data-sly-test though because I need to add css classes depending on the properties:

          <div class="${inheritedPageProperties['parBloc1/topbanner/narrow'] ? 'narrow' : ''}">

          Feike_Visser1
          Feike_Visser1
          Employee
          October 16, 2015

          You can also do it like this...

          <div data-sly-test.narrow="${inheritedPageProperties['parBloc1/topbanner/narrow'] ? 'narrow' : ''}" data-sly-unwrap></div>

          <div data-sly-attribute.class="${narrow}"></div>

          data-sly-attribute is quite nice, have a look at it.

          Dinu_Arya
          Dinu_Arya
          New Participant
          October 16, 2015

          Hi Feike,

          I also have the same kind of requirement. My snippet is like below-

          <div data-sly-list="${currentPage.listChildren}">
              <div myUIAttribute="${itemList.index}" data-sly-test="${itemList.index > 0}">Show the elements except 1st element</div>
          </div>

          Here I need to use the index in one of my ui related attributes in order to achieve one functionality. At the same time I've to check the index and I've to display some data. Whenever I tried the above one I got some exceptions. I need to store the index in some other variable so that I can use it for ui attribute as well as to test the condition. Any idea? Please help me in this. It would be great.

          Thanks,

          Arya.

          A
          Anonymous
          October 16, 2015

          Thanks, I saw the sly-attribute but didn't use it since I need more than one class and there's a default class. (I know that's probably possible with it but then it looses it's merit (hide when empty) I think.

          As for the first line, yes that sounds like a nice workaround. Little misleading with the div and data-sly-test but I guess with the unwrap it makes sense to use that as a variable storage.

          Thanks for your advice on this!

          Feike_Visser1
          Feike_Visser1
          Employee
          October 16, 2015

          Try this...

          <div data-sly-list="${[0,1,2]}" >
               <div myUIAttribute="${itemList.index}" data-sly-test="${!itemList.first}">Show the elements except 1st element ${itemList.index} </div> 
          </div >

          Works fine for me..., I am using the itemList.first.

          --
          Feike

          Dinu_Arya
          Dinu_Arya
          New Participant
          October 16, 2015

          Feike Visser wrote...

          Try this...

          <div data-sly-list="${[0,1,2]}" >
               <div myUIAttribute="${itemList.index}" data-sly-test="${!itemList.first}">Show the elements except 1st element ${itemList.index} </div> 
          </div >

          Works fine for me..., I am using the itemList.first.

          --
          Feike

           

           


          Hi Feike,

          In my case I'm iterating a dynamic list. Thanks for the suggestion. You have given the solution for my problem in other question. It's worked. Thanks a lot. I followed the below one suggested by you -

          <div data-sly-test.yourName="${currentPage.name}" data-sly-unwrap></div>

          <div data-sly-test="${yourName}">....${yourName}</div>

          Thanks,

          Arya.

          Feike_Visser1
          Feike_Visser1
          Employee
          October 16, 2015

          thanks for the feedback. But I would still recommend to limit the use of data-sly-unwrap. It might make your components a bit messy..

          This...

          <div data-sly-test.yourName="${currentPage.name}" data-sly-unwrap></div>

          <div data-sly-test="${yourName}">....${yourName}</div>

           

          Can also be:

          <div data-sly-test.yourName="${currentPage.name}">....${yourName}</div>

          Show more replies
          Terms & ConditionsAccessibility statement

          Loading footer...