Thymeleaf: Tips and Tricks

September 21, 2015 by Lukas Grygar

I would like to show you some useful Thymeleaf code snippets to which I came across during my front-end development with this awesome Java template system.

Code snippets bellow are tested in Thymeleaf 2.1.3.RELEASE.

Conditional display of element only in case if translation exists

In case that translation string doesn’t exist in your messages.properties file you could do the following:

<p th:if="${#messages.msgOrNull('not.so.important.message')}" th:text="#{not.so.important.message}"></p>

Use th:block instead of th:remove=”tag” it’s more elegant

Instead of:

<div th:text="${someVariable}" th:remove="tag"></div>

you should use (since Thymeleaf 2.1):

<th:block th:text="${someVariable}"></th:block>

or even more elegant un-pair:

<th:block th:text="${someVariable}" />

Take care when using th:with

With th:with you could define a variable in Thymeleaf but take care that this variable is not available in element in which is declared.

So this code won’t work:

<div th:with="isSomeVariable=${someVariable}" th:if="${isSomeVariable} == true">It's true!</div>

You should use th:with like this:

1 <th:block th:with="isSomeVariable=${someVariable}">
2 	<div th:if="${isSomeVariable} == true">
3 	It's true!
4 	</div>
5 </th:block>

Instead of input name, id and th:value use th:field it behaves intelligently and it’s DRY

th:field behaves differently according to tag:

input
select
textarea

and also according to type:

text
password
radio
checkbox

So following code:

<input type="text" th:field="*{userName}" />

is equivalent to:

<input type="text" id="userName" name="userName" th:value="*{userName}" />

Access to static class

<p th:text="${T(com.example.util.PhoneNumberUtil).formatPhoneNumber(phoneNumber)}"></p>

Access to bean

<p th:text="${@exampleService.getFoo()}"></p>

HTML conditional comments

If you want to use HTML conditional comments, which is useful for example for linking some special CSS styles for each Internet Explorer version and you want Thymeleaf to process these pieces, then you need to use thymeleaf-extras-conditionalcomments.

I’ve added this configuration to my *-portlet.xml file:

1 <property name="additionalDialects">
2     <set>
3         <bean class="org.thymeleaf.extras.conditionalcomments.dialect.ConditionalCommentsDialect"/>
4     </set>
5 <property>

it’s inside templateengine bean:

 1 <bean id="templateEngine" class="org.thymeleaf.spring4.SpringTemplateEngine">
 2 	<property name="templateResolvers">
 3 	  	<set>
 4 			<ref bean="warTemplateResolver"/>
 5 			<ref bean="cmsTemplateResolver"/>
 6 	  	</set>
 7 	</property>
 8 	<property name="additionalDialects">
 9         <set>
10             <bean class="org.thymeleaf.extras.conditionalcomments.dialect.ConditionalCommentsDialect"/>
11         </set>
12     </property>
13 </bean>

and then you should do this:

1 <!--[if lt IE 9]>
2 <script th:src="${javascriptFolder} + '/datepicker/legacy.js'"></script>
3 <![endif]-->

and Thymelaf processes expresion inside th:src attribute.

Use Thymeleaf comments instead of HTML and JavaScript ones

Thymeleaf comment won’t get processed to end users, so you save data transfer and also no one sees your TODO notes.

Thymeleaf comment in HTML code:

1 <!--/* 
2     Thymeleaf comment goes here
3 */-->

and comment in JavaScript code:

1 /*[- */ 
2 // JavaScript comment goes here
3 /* -]*/

Fix of problem with unchecked checbox when using Thymeleaf and Spring Web Flow

If you use Spring Web Flow together with Thymeleaf and you have form which doesn’t use th:object and you have checkbox in that form and when you uncheck checbox nothing is send over.

1 <form th:action="@{${flowExecutionUrl}(_eventId='change')}" th:method="post">
2 
3 	<input type="checkbox" id="fooBar" name="fooBar" th:checked="${fooBar}" th:value="${mktGloballyAllowed}" />
4 	
5 	<!-- rest of code ommited -->
6 </form>

You could fix this by adding hidden input with underscore prefix and th:value:

1 <form th:action="@{${flowExecutionUrl}(_eventId='change')}" th:method="post">
2 
3 	<input type="hidden" name="_fooBar" th:value="${fooBar}"/>
4 	<input type="checkbox" id="fooBar" name="fooBar" th:checked="${fooBar}" />
5 	
6 	<!-- rest of code ommited -->
7 </form>

Eclipse IDE tips

Fix Eclipse IDE HTML problems: Undefined attribute name and Unknown tag

If you’re using Eclipse IDE, then under Markers View, you should have ugly list of HTML problems for example undefined attribute names:

Undefined attribute name th:href
Undefined attribute name th:if
Undefined attribute name th:include
Undefined attribute name th:object
Undefined attribute name th:text
Undefined attribute name th:utext
Undefined attribute name th:unless

and unknown tag:

Unknown tag th:block

Solution is to surround your Thymeleaf code with:

<th:block xmlns:th="http://www.thymeleaf.org">
	<div th:text="${'Here we go Thymeleaf!'}"></div>
</th:block>

Use Thymeleaf extras plugin for Eclipse IDE

If you would like to use feature like autocompletition it’s worth to check Thymeleaf extras Eclipse plugin.