CODEWITHSUNDEEP
aemtemplatingsightly
Alasdair McLeay
Alasdair McLeay

Reputation: 2632

Conditional Attributes in Sightly Templates (AEM/CQ)

In the Sightly templating language, for Adobe AEM6 (CQ), how do I add an attribute to an element only if a condition is true, without duplicating lots of code/logic?

e.g.

<ul data-sly-list="${items}" ${if condition1} class="selected"${/if}>
    <li${if condition2} class="selected"${/if}>
        Lots of other code here
    </li>
</ul>

Upvotes: 14

Views: 24141

Answers (2)

Josh Boyle
Josh Boyle

Reputation: 76

What Gabriel has said is entirely correct. I did want to add a "gotcha" to look out for though. For the record, I was running into the exact same problem where, in a Sightly template, I wanted to toggle the presence of an input element's "checked" attribute based on a boolean value. In my case this boolean value was coming from the backing Use class.

After about 3-4 hours and being on the verge of pulling my hair out I finally realized that the boolean value I was relying on for toggling the "checked" attribute was ultimately being set in the activate method of a Sling service I wrote to back the work I'm doing. While everything else was logically correct, because I was setting this boolean in activate() and then retrieving it via a getter as needed, it would only ever have its value updated on bundle activation meaning my view would essentially lose state after the first refresh of the page.

I know it's silly but I wanted to call it out since it's relevant here and it may help someone not have to lose some hair like I did...

Upvotes: 0

Gabriel Walt
Gabriel Walt

Reputation: 1629

When setting HTML attributes dynamically (with an expression), Sightly guesses your intention to simplify the writing:

  • If the value is an empty string or if it is the false boolean, then the attribute gets remove altogether.
    For instance <p class="${''}">Hi</p> and <p class="${false}">Hi</p> render just <p>Hi</p>.

  • If the value is the true boolean, then the attribute is written as a boolean HTML attribute (i.e. without attribute value, like for e.g. the checked, selected, or disabled form attributes).
    For instance <input type="checkbox" checked="${true}"> renders <input type="checkbox" checked>.

You can then use two Sightly operators to achieve what you want (both work as in JavaScript): the ternary conditional operator, or the logical AND (&&) operator.

Ternary conditional operator

<ul data-sly-list="${items}" class="${condition1 ? 'selected' : ''}">
    <li class="${condition2 ? 'selected' : ''}">
        Lots of other markup here
    </li>
</ul>

Logical AND operator

For that, you additionally have to understand that like in JavaScript, ${value1 && value2} returns value1 if it is falsy (e.g. false, or an empty string), otherwise it returns value2:

<ul data-sly-list="${items}" class="${condition1 && 'selected'}">
    <li class="${condition2 && 'selected'}">
        Lots of other markup here
    </li>
</ul>

As said, in both examples the class attribute will be removed altogether if the corresponding condition is false.

Upvotes: 28

Related Questions