Mail template from TemplateEngine does not read html tags

100 Views Asked by At

I have the following template:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Template for reminder to team lead</title>
    </head>
    <body>
        <p>Hello<span th:text="${firstNameTeamLead}"></span> <span th:text="${lastNameTeamLead}">!</span> </p>
        <p></span> <span th:text="${member}"> !</span> did not:
        <span th:text="${lateSteps}"></span></p>
    </body>
</html>

lateStep is a java string containing a list some html tags to display this list with bullet points. The things is the html is not read and all I have in my mail is a chunk of content mixed with html tags like this:

Hello teamLeadFirstName teamLeadLastName !

memberName did not: <br /> <ul><li> fetch his food today </li><li> talk to the blacksmith </li></ul>

Anyone has any idea on how can I make the html tags to be read and taken into account ? Therefore, having this as a result:

Hello teamLeadFirstName teamLeadLastName !

memberName did not:

  • fetch his food today
  • talk to the blacksmith

Thank you for reading :D

Edit:

I am using two methods to populate the template:

  • the first one is a mapper that will map a variable to its value
  • private Map<String, Object> createNotificationTlVariables(Mission mission, String variablesStr) {
        Map<String, Object> variables = new HashMap<>();
        TeamLead teamLead= mission.getTeamLead();
        Member member= mission.getUMember();
    
        variables.put("firstNameTL", teamLead.getFirstName());
        variables.put("lastNameTL", teamLead.getLastName());
        variables.put("firstNameMember", member.getFirstName());
        variables.put("lateSteps", variablesStr);
        return variables;
    }
    
  • The second one is a method formatting the string in question
  • There, I just have a list of members and for each of them, I check the late steps of the mission that I had to the variablesStr and divide by html tags

1

There are 1 best solutions below

2
Cardinal System On BEST ANSWER

First of all, your HTML is not valid. You have a closing span tag (</span>) without an opening tag. Secondly, you have a variable which I assume looks something like this:

String variablesStr = "<br /> <ul><li> fetch his food today </li><li> talk to the blacksmith </li></ul>";

You cannot use th:text to inject HTML. Thymeleaf is too smart and will escape any HTML special characters. This means that when you pass your string to Thymeleaf, it becomes:

&lt;br /&gt; &lt;ul&gt;&lt;li&gt; fetch his food today &lt;/li&gt;&lt;li&gt; talk to the blacksmith &lt;/li&gt;&lt;/ul&gt;

You can use th:utext, but you should change your template to use a proper th:each:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Template for reminder to team lead</title>
    </head>
    <body>
        <p th:text="'Hello ' + ${firstNameTeamLead} + ' ' + ${lastNameTeamLead} + '!'"/>
        <p>
            <span th:text="${member} + ' did not:'"/>
            <br />
            <ul>
                <li th:each="step : ${lateSteps}" th:text="${step}"/>
            </ul>
        </p>
    </body>
</html>

And lastly, the variables in your template do not match the variables in your code. For example. your template is expecting the variable "firstNameTeamLead" while your code is providing "firstNameTL".

Here is an example of what your code should look like:

TeamLead teamLead = mission.getTeamLead();
Member member = mission.getUMember();

List<String> lateSteps = Arrays.asList("Finish his question", "Include his source code",
        "Specify his template-engine", "Check his variable names");

Map<String, Object> variables = new HashMap<>();
variables.put("firstNameTeamLead", teamLead.getFirstName());
variables.put("lastNameTeamLead", teamLead.getLastName());
variables.put("member", member.getFirstName());
variables.put("lateSteps", lateSteps);

And here is the end result:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Template for reminder to team lead</title>
</head>
<body>
    <p>Hello Cardinal System!</p>
    <p>
        <span>Cucumberbatch did not:</span>
        <br />
        <ul>
            <li>Finish his question</li>
            <li>Include his source code</li>
            <li>Specify his template-engine</li>
            <li>Check his variable names</li>
        </ul>
    </p>
</body>
</html>