How to handle if condition in sightly | Community
Skip to main content
D
Dolly
Level 3
March 16, 2022
Solved

How to handle if condition in sightly

  • March 16, 2022
  • 2 replies
  • 20763 views

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

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by BrianKasingli

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

 

2 replies

Ravi_Pampana
Community Advisor
Ravi_PampanaCommunity Advisor
Community Advisor
March 16, 2022

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
    Community Advisor and Adobe Champion
    BrianKasingliCommunity Advisor and Adobe ChampionAccepted solution
    Community Advisor and Adobe Champion
    March 17, 2022

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

     

      D
      DilleshKondala
      September 20, 2023

      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

      Terms & ConditionsAccessibility statement

      Loading footer...