Thymeleaf If Unless Statement Example

Thymeleaf is a server-side template engine created for Java-based applications. It was designed to process several types of files: HTML, XML, JavaScript, CSS, Text, and RAW Data. The main advantage of using Thymeleaf is that templates created with this engine can be easily used as web design prototypes.

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 Spring MVC controller with 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", "ramesh@gmail.com", "ADMIN"));
        users.add(new User("Tom", "tom@gmail.com", "USER"));
        users.add(new User("John", "john@gmail.com", "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 don't have "Admin" role can see only 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>







Comments