Expand my Community achievements bar.

SOLVED

How to handle if condition in sightly

Avatar

Level 3

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

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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">

 

View solution in original post

3 Replies

Avatar

Community Advisor

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!

Avatar

Correct answer by
Community Advisor

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">

 

Avatar

Level 1

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