How to set convenience variables in sightly? | Community
Skip to main content
Anonymous
Oct 16, 2015 2:27 AM UTC
Solved

How to set convenience variables in sightly?

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.
    Feike_Visser1
    Feike_Visser1Accepted solution
    Employee
    Oct 16, 2015 2:27 AM UTC

    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

    View reply

    13 replies

    Dinu_Arya
    Dinu_Arya
    Level 6
    Feb 20, 2019 1:53 PM UTC

    Will it work in AEM 6.2 or only in 6.4?

    Translate
      Feike_Visser1
      Feike_Visser1
      Employee
      Nov 7, 2018 6:38 AM UTC

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

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

      Translate
        Feike_Visser1
        Feike_Visser1Accepted solution
        Employee
        Oct 16, 2015 2:27 AM UTC

        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

        Translate
          Anonymous
          Oct 16, 2015 2:27 AM UTC

          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' : ''}">

          Translate
          Feike_Visser1
          Feike_Visser1
          Employee
          Oct 16, 2015 2:27 AM UTC

          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.

          Translate
          Dinu_Arya
          Dinu_Arya
          Level 6
          Oct 16, 2015 2:27 AM UTC

          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.

          Translate
          Anonymous
          Oct 16, 2015 2:27 AM UTC

          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!

          Translate
          Feike_Visser1
          Feike_Visser1
          Employee
          Oct 16, 2015 2:27 AM UTC

          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

          Translate
          Dinu_Arya
          Dinu_Arya
          Level 6
          Oct 16, 2015 2:27 AM UTC

          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.

          Translate
          Feike_Visser1
          Feike_Visser1
          Employee
          Oct 16, 2015 2:27 AM UTC

          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>

          Translate
          Show more replies
          Terms & ConditionsAccessibility statement

          Loading footer...