How to use thymeleaf conditions - if - elseif - else

Question

I have a little problem, I must return a different choice of a select into a td using thymeleaf, I try the next sentence:

<td style="white-space: nowrap">
    <span th:class="${linea.estado}? 'label label-success' : 'label label-danger' : 'label label-warning'"
          th:text="${linea.estado}? #{label.glineas.estado.iniciado} : #{label.glineas.estado.finalizado} : #{label.glineas.estado.configurado}">
    </span>
</td>

But I have a problem because the condition give me a big failure because is impossible to parse the expression. With only two conditions (iniciado and finalizado) there aren't problem, but I need to get the correct label for the select in my form.

Anybody knows the correct sentence to use a if elseif else sentence with thymeleaf?

2.0 Now I am trying to solve this problem with the next:

<td style="white-space: nowrap">
    <span th:if="${linea.estado} == 'Iniciado'" class="label label-success" th:text="#{label.glineas.estado.iniciado}"></span>
    <span th:if="${linea.estado} == 'Finalizado'" class="label label-danger" th:text="#{label.glineas.estado.finalizado}"></span>
    <span th:if="${linea.estado} == 'Configuracion'" class="label label-warning" th:text="#{label.glineas.estado.configurado}"></span>
</td>

The solution is perfect, now all works properly. Thanks for all.

Answer 1

You conditional operator contains 3 results. It should have 2 like this.

condition ? first_expression : second_expression;

In your situation. I assume linea.estado is a boolean value

<td style="white-space: nowrap">
    <span th:class="${linea.estado} ? 'label label-success' : 'label label-danger'" 
        th:text="${linea.estado}? #{label.glineas.estado.iniciado} : #{label.glineas.estado.finalizado}">
    </span>
</td>

If you want 3 values to be output and given that the linea.estado is a string which may contain 'WARN', 'DANGER', 'INFO' then you can do something like this.

<span th:class="'label label-' + ((${linea.estado} == 'SUCCESS') ? 'success' : (${linea.estado} == 'DANGER') ? 'danger' : 'warning')"                   
      th:text="...">
</span>

But the cleaner solution will be something like this

<span th:if="${linea.estado} == 'SUCCESS'" class="label label-success" th:text="#{label.glineas.estado.iniciado}"></span>
<span th:if="${linea.estado} == 'DANGER'" class="label label-danger" th:text="#{label.glineas.estado.finalizado}"></span>
<span th:if="${linea.estado} == 'WARN'" class="label label-warning" th:text="#{label.glineas.estado.configurado}"></span>

Or using Switch as mentioned by Patrick LC

• be aware of syntax errors, as I didnt test any codes on runtime

Answer 2

I think the solution is to use the switch statement, from Thymeleaf documentation:

<div th:switch="${user.role}">
  <p th:case="'admin'">User is an administrator</p>
  <p th:case="#{roles.manager}">User is a manager</p>
  <p th:case="*">User is some other thing</p>
</div>

There isn't any other structure to use in Thymeleaf, although you could use th:if/th:unless. Check this thread in the thymeleaf forum.

Answer 3

I need else if but all my condition are not so simple that th:switch="${user.role} can works, so I do this:

<div th:switch="true">
    <p th:case="${product.price} == '849'"> Beautiful Goat</p>
    <p th:case="false"> Magnificent Goat</p>
    <p th:case="'Whatever things I want to do with my else if'"> Goat</p>
</div>

Answer 4

For next time if you want if - elsif -else you can do: (for example I want to know if url on my action object contains confluence then confluence else if it contains jira then jira on th:text)

<p th:text="((${#strings.contains({action.url},'confluence')}) ? 'confluence' : ((${#strings.contains({action.url},'jira')}) ? 'jira' : '')) " />

It works.

Answer 5

If you want to have only one element the option is to make multiple conditions. It is confusing a little bit but if you understanda the logic it is not a big deal.

Lets say you want to do something like this:

if(user.role.admin){
 //add only class='text-success'
}else if(user.role.user){
 //add only class='text-primary'
}else{
 //add only class='text-warning'
}

The logic is if1 : 'text-success' ? if2 : 'text-primary' ? 'text-warning' Very simple. But the syntax would be like this:

<span th:class="( ${user.role.admin} ? 'text-success' : ( ${user.role.user} ? 'text-primary' : 'text-warning' ) )"></span>

Answer 6

You can do like that too

<p th:if="${projects != null and projects.size() gt 0}"> <a th:href="@{/hire/invite/} + ${f.id}" class="btn waves-effect">Anything</a> </p>