Using Layouts in Grails 3 for Emails

We recently built a email layout for several notification emails we send. The goal being just inserting different content into the layout based on the scenario that the email was being sent for. For example if a user adds or deletes an account everything should look the same for the email layout except the text and content in the center of the email. We have an emailLayout.gsp in the layouts sub-folder located in the views folder. This file essentially creates the structure of my email. It sets a background, adds an image, a header and footer. There is a table as well and the contents of that table is what is changed based on what is sent to the layout by other template files.

Once this file is created I created several other files that are that the bodies of this file.

Metaphorically you are creating the frame in the layout file and then telling it which picture to drop into it through template files when certain actions occur.

In the emailLayout.gsp you put <g:layoutBody/> where you will be inserting the contents of the body from other template views. You can also do the same <g:layoutHead/> if you want some dynamic content there.

All you have to do it apply the layout once the template files are created. An example is below on how you do that.

emailLayout.gsp

<!DOCTYPE html>
<html>
<head>
 <style type="text/css">
img {
max-width: 100%;
}
body {
width: 100% !important;
height: 100%;
line-height: 1.6em;
}
body {
padding: 0 !important;
}
h1 {
font-weight: 800 !important;
margin: 20px 0 5px !important;
}
.container {
padding: 0 !important;
width: 100% !important;
}
.content {
padding: 0 !important;
}
</style>
<meta name="viewport" content="width=device-width"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title><g:pageProperty name="title"/></title>
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
</body>
</html>

_refund.gsp

<g:applyLayout name="emailLayout" params="[title:'Alcazar Payment Notification']">
<table width="100%" cellpadding="0" cellspacing="0"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<tr
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; margin: 0;">
<td
class="content-block"
style="font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; box-sizing: border-box; font-size: 14px; vertical-align: top; margin: 0; padding: 0 0 20px;"
valign="top">
<h2 class="aligncenter"
style="font-family: 'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif; box-sizing: border-box; font-size: 24px; color: #000; line-height: 1.2em; font-weight: 400; text-align: center; margin: 40px 0 0;"
align="center">A refund was initiated.
</td>
</tr>
</g:applyLayout>

Sample Layout for a Refund Email. There was more to it but you don’t need the rest to see how it works and to get the gist of it really. I used a free email template I found online somewhere that i cannot seem to relocate hence all the inline css which you can ignore. The main thing you need really is the applyLayout Tags where you the name the layout you want it applied to which in my case was the emailLayout posted above and then design the content as you normally would.

I hope this was helpful. I found it a little confusing in the docs and of course if you need any help you can email me or whatever and I can always try!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.