Thymeleaf Template If, Unless and Switch Case Example

Author:
In this tutorial, we will discuss Thymeleaf conditionals if, unless, and switch-case statements with an example.
Learn Thymeleaf at https://www.javaguides.net/p/thymeleaf-tutorial.html

If – Unless (th:if, th:unless Attributes)

In some situations, you want a certain snippet of the Thymeleaf template to appear in the result if a certain condition is evaluated as true. To do this you can use the attribute th:if.

Syntax for th:if Attribute

<div th:if="condition">  
    <!-- Other code -->
</div>

Syntax for th:unless Attribute

The th:unless attribute is negativeness of th:if attribute:
<button th:unless = "condition"> ... </button> 
<!-- Same as --> 
<button th:if = "!condition"> ... </button>

Thymeleaf th:if, th:unless Attributes Example with Spring boot

In this example, the User with the "Admin" role can only see the Update and Delete buttons. The User who don't have "Admin" role can see only the View button.
Let's add below dependency to integrate Thymeleaf with Spring boot:
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Let's create a User class:
package net.javaguides.springboot;

public class User {
    private String userName;
    private String email;
    private String role;
    public User(String userName, String email, String role) {
        super();
        this.userName = userName;
        this.email = email;
        this.role = role;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getRole() {
        return role;
    }
    public void setRole(String role) {
        this.role = role;
    }
}
Now, let's create a Spring MVC controller with a handler method to return Thymeleaf template like:
import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping("/if-unless")
    public String users(Model model) {
        List < User > users = new ArrayList < > ();
        users.add(new User("Ramesh", "[email protected]", "ADMIN"));
        users.add(new User("Tom", "[email protected]", "USER"));
        users.add(new User("John", "[email protected]", "USER"));
        model.addAttribute("users", users);
        return "if-unless";
    }
}
Let's create a Thymeleaf template called "if-unless.html". In the below Thymeleaf template, the user with the "Admin" role can only see the Update and Delete buttons. The User who doesn't have an "Admin" role can see only the View button:
<a class="btn btn-primary" th:if="${user.role} == 'ADMIN'">Update</a> 
<a class="btn btn-danger" th:if="${user.role} == 'ADMIN'">Delete</a>
<a class="btn btn-primary" th:unless="${user.role} == 'ADMIN'">View</a>
Here is the complete Thymeleaf HTML template:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="ISO-8859-1">
    <title>if and unless attribute Demo</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <div class="row">
            <h1>Employees</h1>

            <table class="table">
                <thead>
                    <tr>
                        <th>User Name</th>
                        <th>User Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:each="user : ${users}">
                        <td th:text="${user.userName}"></td>
                        <td th:text="${user.email}"></td>
                        <td><a class="btn btn-primary" th:if="${user.role} == 'ADMIN'">Update</a>
                            <a class="btn btn-danger" th:if="${user.role} == 'ADMIN'">Delete</a>
                            <a class="btn btn-primary" th:unless="${user.role} == 'ADMIN'">View</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</body>

</html>

Thymeleaf th:switch, th:case Attributes

In Java, you are familiar with the switch/case structure. Thymeleaf also has a similar structure that is th:switch/th:case.
If there are more than two possible results of an expression, we can use the th:switch and th:case attributes for the conditional rendering of the HTML elements.

Thymeleaf th:switch, th:case Attributes Example with Spring boot

In this example, we will demonstrate the usage of th:switch, th:case attributes.
Let's add the below dependency to integrate Thymeleaf with Spring boot:
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
Let's create a User class:
package net.javaguides.springboot;

public class User {
    private String userName;
    private String email;
    private String role;
    public User(String userName, String email, String role) {
        super();
        this.userName = userName;
        this.email = email;
        this.role = role;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getEmail() {
        return email;
    }
    public void setEmail(String email) {
        this.email = email;
    }
    public String getRole() {
        return role;
    }
    public void setRole(String role) {
        this.role = role;
    }
}
Now, let's create a Spring MVC controller with a handler method to return Thymeleaf template like:
package net.javaguides.springboot;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping("/switch-case")
    public String switchExample(Model model) {
        User user = new User("Ramesh", "[email protected]", "ADMIN");
        model.addAttribute("user", user);
        return "switch-case";
    }
}
Here is the Thymeleaf template to demonstrate the use of a switch case statement:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="ISO-8859-1">
    <title>Thymeleaf switch case Demo</title>

    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <div class="row">
            <h1>Thymeleaf swith case demo</h1>
            <h4 th:utext="${user.userName}"></h4>
            <div th:switch="${user.role}">
                <p th:case="'ADMIN'">User is an administrator</p>
                <p th:case="'MANAGER'">User is a manager</p>
                <p th:case="'GUEST'">User is a guest</p>
                <!-- * for default case -->
                <p th:case="*">User is some other thing</p>
            </div>
        </div>
    </div>
</body>

</html>
If the User role is "Admin" then "User is an administrator" text prints on the web page.
The th:case = "*" is the default case of the th:swith/th:case structure. If all the above cases are evaluated as false the code of default case will be "rendered".

Related Thymeleaf Tutorials and Examples

  1. Introducing Thymeleaf | Thymeleaf Template | Thymeleaf Template Engine
  2. Thymeleaf Example with Spring Boot
  3. How to Add CSS and JS to Thymeleaf
  4. Add Bootstrap CSS to Thymeleaf
  5. How to handle null values in Thymeleaf?
  6. How to Loop a List by Index in Thymeleaf
  7. Thymeleaf Array Example - Array Index, Array Iteration
  8. Thymeleaf Enums Example
  9. Thymeleaf If Else Condition Example
  10. Thymeleaf Switch Case Example

Comments

Post a Comment

Leave Comment