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

    Feike_Visser1
    Adobe Employee
    Feike_Visser1Adobe EmployeeAccepted solution
    Adobe 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
      Adobe Employee
      Feike_Visser1Adobe Employee
      Adobe 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
      Level 6
      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
      Adobe Employee
      Feike_Visser1Adobe Employee
      Adobe 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
      Level 6
      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
      Adobe Employee
      Feike_Visser1Adobe Employee
      Adobe 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>

      Dinu_Arya
      Dinu_Arya
      Level 6
      October 16, 2015

      Feike Visser wrote...

      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>

       


      Hi Feike,

      Then how can I assign some value to a variable and check the condition in the same step? Please suggest.

      Thanks,

      AryA.

      GabrielWalt
      Adobe Employee
      GabrielWaltAdobe Employee
      Adobe Employee
      October 16, 2015

      I agree with Feike. Keep in mind that each data-sly-unwrap you're doing will represent one step you're moving away from having your template markup to correspond to your resulting markup. The goal of Sightly is to keep the two as close together as possible for making it as obvious as possible for someone who reads the template to understand what the final resulting markup is going to be.

      Show more replies
      Terms & ConditionsAccessibility statement

      Loading footer...