How to handle if condition in sightly

[Dolly]

If ${item.condition1} satisfies, then I want "testclass" to be added in div

Ex:<div class="exampleclass testclass">

Else no testclass should be added in div

Ex: <div class="exampleclass>

Thanks in advance

[Ravi_Pampana]

Hi,

You can try to add as below

6. If Statement: data-sly-test

HTL uses data-sly-test block statement to implement "if" behavior. There is no direct if-else implementation. You need to utilize data-sly-test in an efficient manner to achieve this.

A). Positive condition: if

<h1 data-sly-test="${properties.jcr:title}"> ${properties.jcr:title}</h1>

Negative condition: else

<h1 data-sly-test="${!properties.jcr:title}"> ${pageProperties.name | "Untitled" }</h1>

You can also use relational operators i.e.- "<=", ">=", "==" etc. in your test condition.

B). Always cache test block statement results in an identifier if it repeats itself

<h1 data-sly-test.hasTitle="${properties.jcr:title}"> ${properties.jcr:title}</h1> //if

<h1 data-sly-test="${!hasTitle}"> ${pageProperties.name | "Untitled" }</h1> //else

Hope this helps!

[BrianKasingli · Accepted solution]

Using the sightly features, you can use the data-sly-test.

A standard practice is to use ternary conditions in Sightly HTL. While using Sightly, I would like to highlight that you can use Slightly Global objects for rapid development. AEM Global Objects for Backend and Front-end Sightly (HTL) Development - Sourced Code; make sure you read #2, so you understand how Global AEM objects can be used.

Note: if your conditions are more complicated and require some kind of business logic, such as calculating a collection of HTML classNames, you can always place the write logic into a Sling Model, Java-Use-API, JavaScript-Use-API, and have the backend return the CSS classNames as you please.
Here are some code examples that you can paste into your Sightly HTL to test the code:

scenario 1: true
//sightly
<div class="exampleclass ${true ? 'testclass' : ''}">
//output:
<div class="exampleclass testclass ">

scenario 2: false
//sightly
<div class="exampleclass ${false ? 'testclass' : ''}">
//output:
<div class="exampleclass ">

scenario 3: evaluate to true
//sightly
<div class="exampleclass ${currentPage.path === '/content/my-site/home' ? 'testclass' : ''}">
//output:
<div class="exampleclass testclass">

[DilleshKondala]

For e.g, If try the scenario as below: what will be the output?

scenario 2: false
//sightly
<div class="${false ? 'testclass' : ''}">
//Will the output as below:
<div class="">  orelse <div class>

I know the output is simple <div> only.

But if I pass the <div class=""> then the output will display as below: 
<div class>

So, what is the difference between below two statements here

<div class="${false ? 'testclass' : ''}">

<div class="">

Thanks,

Dillesh Kondala