Retrieving body
For basic 'wrapper'-style templates, you often just want the original message body, and place it somewhere in your template. You would need the following code to do so:
<html>
<body>
Insert original body here:
<@extractFromOriginal />
</body>
</html>
By default, Flowmailer will search for the <body></body> contents in the first HTML message part. If missing, the first Text part will be used, enclosed by <pre></pre> tags.
Extracting elements
It's also possible to use CSS selectors to find specific elements from the original message. Most types of CSS3 selectors documented by the W3C should be supported. We will list some often-used examples here:
Selecting an element with ID 'someid':
<@extractFromOriginal selector="#someid" />
Selecting whatever is contained (text?) in the second table row, second cell, enclosed by a font tag:<@extractFromOriginal selector="tr:nth-child(2) td:nth-child(2) font" />
Selecting the second cell from table rows containing specific text ('Field Name:'):<@extractFromOriginal selector="tr:contains(Field Name:) > td:nth-of-type(2)" />
Element styling (advanced)
In addition to regular templates and original content extraction, Flowmailer also allows you to change content styling on the fly. This is often done in conjunction with other templates, to 'preprocess' elements to first make the content fit the style guide you want and apply a specific template as a second step.
We do this by traversing the DOM tree using Freemarkers built-ins for nodes. Each macro in the code below represents a change in styling, by setting the attributes we want.
<#macro h1>
<h1 style="color: red;"><#recurse></h1>
</#macro>
<#macro a><a href="${.node.@href}" style="color: blue; ><#recurse></a></#macro>
<#macro img></#macro>
<#macro @text>${.node?html}</#macro>
<#macro @element><#t>
<${.node?node_name}<#t>
<#list .node.@@ as attribute><#t>
${" "}${attribute?node_name?html}="${attribute?html}"<#t>
</#list><#t>
<#t>
<#t><#recurse>
<#t></${.node?node_name}>
<#t></#macro>
<html>
<body>
<#assign doc=extractNodesFromOriginal()/>
<#recurse doc>
</body>
</html>
The code above effectively replaces the message HTML body with a reconstructed one. In doing so we make the following changes:
- All h1 texts are now red and lose all other inline styling
- All links are now blue, otherwise only retaining their href attribute
- All images are removed
Please note that creating element styling templates are considered an advanced topic and should be avoided by most users.