How to set convenience variables in sightly?

[Former Community Member]

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

[Feike_Visser1 · Accepted solution]

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

[Former Community Member]

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]

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]

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.

[Former Community Member]

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]

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]

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]

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]

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.

[gabriel_walt]

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.

[gabriel_walt]

His code example is doing exactly that, it sets yourName in the test, which can then be reused within or later on:

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

Have a quick look at the docs of data-sly-test to better understand that behavior.

More generally though, if you need to set many variables in your template, I'd rather advise you to use the Use-API to prepare all the variables you'll need in your template. This will probably be easier to understand by someone reading your template and thus be more maintainable than setting variables in your template.

[Feike_Visser1]

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

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

[Dinu_Arya]

Will it work in AEM 6.2 or only in 6.4?