Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to set convenience variables in sightly?

Avatar

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

desktop_exl_promo_600x100_weknowyou.png

1 Accepted Solution

Avatar

Correct answer by
Employee

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 solution in original post

13 Replies

Avatar

Correct answer by
Employee

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

Avatar

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

Avatar

Employee

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.

Avatar

Level 7

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.

Avatar

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!

Avatar

Employee

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

Avatar

Level 7

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.

Avatar

Employee

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>

Avatar

Level 7

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.

Avatar

Employee

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.

Avatar

Employee

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.