Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

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