Creating custom HTML templates

This page explains use of the Template Content field in Mail Merge templates.

Overview

The system uses basic HTML along with some mail merge tokens and simple CSS to build the templates.

This page contains code snippets used to help explain the elements in the HTML and CSS found at the bottom of the page.

For more information on general configuration see the Mail Merge Templates page.

For information specific to registers, such as Fire Prevention Notices, Permits or Cases, refer to the relevant guides.

HTML and CSS primer

<article> <h1>My page heading</h1> <p>I am a paragraph with a <strong>set of bold words</strong>.</p> <p>Your name is {$personName}.</p></article>

CSS classes are used to control formatting and layout. These will be most commonly added to <p> tags, but can be added to any tag that wraps content.

<p class="warning-box warning-text center-text"> I am going to be big, red and centred.</p>

Note that the template starts and ends with <article>, and uses basic HTML elements. All mail merge tokens look like {$token} and the list of available tokens are available from within the system and vary from register item to register item.

Also, don’t nest paragraphs inside paragraphs, and don’t place headings inside paragraphs — although it will appear to work, this is illegal in HTML and not good practice.

Layout controls

Some basic box controls allow paragraphs to be moved around the page.

Note, you should use a <div> rather than a <p> if laying out both a left and a right column.

css class

description

left-box

Creates a text box and places it on the left half of the page.

right-box

Creates a text box and paces it no the right half of the page.

warning-box

Creates a bright red warning message

Text formatting controls

Some basic text formatting classes allow for common formatting within the paragraphs.

CSS Class

Description

left-text

Left justifies the text

right-text

Right justifies the text

center-text

Centre justifies the text

justify-text

Fully justifies the text

small-text

Makes the text smaller than the base font size (in CSS this is currently 85%)

warning-text

Makes the text red and bold.

top-heading

This provides alternative sized headings for the top page

These can be combined — for example:

<p class="small-text warning-text center-text"> I am a small, centred warning.</p>

Also, you have HTML elements that can be used for semantic formatting — here’s the common ones:

HTML Element

Description

Boldfaced text

My name is <strong>Scott Davey</strong>

<em>

Italicised text

My name is <em>Scott Davey</em>

<ol>

Ordered list (e.g. numbered)

<ol>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ol>

<ul>

Unordered list (e.g. bullet points)

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

A page heading, a sub-heading and a small heading.

<h1>Special conditions</h1>

Tip: these do not go inside paragraphs.

<br />

A line break (e.g. a carriage return).

<hr />

A page break.

Comments that do not appear in the output

Addressing for windowed envelopes

A special HTML element <address> is used to handle windowed envelopes.

If you want to use windowed envelopes, place your address tokens inside this element. If you do this, the address will be positioned exactly where it needs to be for your envelope, and the contents will “float above” the rest of the document, normally requiring a few carriage returns ( <br /> ) to position your body text.

The position of the address window is controlled by the system, and you can change the top and left position by entering in the number of millimetres from the edge of the envelope.

Example

The following example shows the windowed envelope in grey with the tokens.

<address> {if $overrideOwnerDetails} {$overrideOwnerDetails|nl2br} {else} {$assetContact.fullName} <br /> {$assetContact.address1}<br/> {$assetContact.address2}<br/> {$assetContact.address3} {$assetContact.address4} {/if}</address> <article>  <p class="left-box"> <strong>I direct:</strong>  <br /> <br /> <br /> <br /> <br /> </p> <p class="right-box right-text"> <strong>Notice #{$noticeNumber}</strong><br /> Issued {$MERGE_DATE}<br /> <br /> <em>The owner or occupier of:</em> <br /> {$item.Asset.friendly} <br /> Property No. {$item.Asset.friendlyCode} </p></article>

Note that in this example, the <address> element has been placed outside of the <article> body. This is optional, but aids in understanding that it floats above the body rather than being positioned where it was written.

As an aid, the CSS rules place a light grey background on the address section so you can see where it is. This can be controlled in the Additional CSS section.

Worked Examples

Standard paragraphs

<p> This is a standard paragraph. It will be the full width of the page.</p>

Two columns

These two paragraphs will be side-by-side in a two-column format.

<div class="left-box"> <p> <strong>I direct:</strong> <br /> {if $overrideOwnerDetails} {$overrideOwnerDetails|nl2br} {else} {$assetContact.fullName} <br /> {$assetContact.address1}<br/> {$assetContact.address2}<br/> {$assetContact.address3} {$assetContact.address4} {/if} </p></div> <div class="right-box"> <p> <strong>Notice #{$noticeNumber}</strong><br /> Issued {$MERGE_DATE}<br /> <br /> <em>The owner or occupier of:</em> <br /> {$item.Asset.friendly} <br /> Property No. {$item.Asset.code} </p></div><br />

Tip: put a <br/> at the end of the two paragraphs to avoid formatting problems of the contents following these boxes, in the event that the two boxes aren't the same height.

A warning text box

This puts a big, red warning box onto the page,

<p class="warning-box warning-text center-text"> <strong>Failure to comply with this notice will result in a fine of $1612.00 being issued.</strong> <br /><br /> Penalty amounts are determined under the <em>Country Fire Authority Act 1958.</em> <br /> The amount of a penalty unit increases annually on 1 July under the <em>Monetary Units Act 2006</em>.</p>

Note that in this example, we are also using some text formatting classes — see below.

Using mail merge tokens

Here’s a basic example of mail merge tokens.

<h2> To do the following work in respect to land at {$item.Asset.friendly} by {$IN_THREE_WEEKS}.</h2>

Alternatively, you can use the due date of the item. Note - use the custom {$due} token for this. This will display in the correct date format of dd/mm/yyy and is also useful if you have Process Workflow Updates on Items turned off for your template. If Process Workflow Updates on Items is turned off, it will still calculate what the due date will be and it will appear in the letter even though it doesn't update the item.

<h2> To do the following work in respect to land at {$item.Asset.friendly} by {$due}.</h2>

Right box with right justified text

Notice here now the box and text CSS rules are added together to position the text to the right side ofht page,, and also align the text.

<p class="right-box right-text"> <strong>Notice #{$item.id}</strong><br /> Issued {$MERGE_DATE}<br /> <br /> <em>The owner or occupier of:</em> <br /> {$item.Asset.friendly} <br /> Property No. {$item.Asset.code}</p>

A big, red warning box

Here’s a warning box that combines the box colour, the warning text colour and the alignment to the centre.

<p class="warning-text warning-box center-text"> <strong>Failure to comply with this notice will result in a fine of $1612.00 being issued.</strong> <br /><br /> Penalty amounts are determined under the <em>Country Fire Authority Act 1958.</em> <br /> The amount of a penalty unit increases annually on 1 July under the <em>Monetary Units Act 2006</em>. </p>

Red warning wording without the box

The style for warning-text is different to warning-box, so you can use one or the other.

<p class="warning-text center-text"> <strong> If you are unable to complete the work by the due date contact 03 5734 6200. </strong> </p>

Only include a paragraph if data exists for it

This shows how to conditionally include a heading and a paragraph based on the presence of text.

{if $specialNotes} <h2>Special Instructions:</h2> <p>{$specialNotes}</p>{/if}

Adding a top heading to the front page of the notice

To add a heading to the front page of the notice, you can use the top-heading class along with h1, h2, and h3, where each heading 1 is largest and heading 3 is smallest.

<div class="top-heading center-text"> <h2>SCHEDULE 15</h2> <h3>Country Fire Authority Regulations 2014 <em>Reg. 112 (1)</em></h2> <h1>FIRE PREVENTION NOTICE</h1></div>

Adding smaller legal text

This example shows how to make text smaller to fit onto one page.

<hr /><br /> <h1 class="center-text"> Explanatory Note for a Schedule 15 Fire Prevention Notice</h1> <div class="small-text justify-text">  <h2>Power and Purpose</h2> <p> The Municipal Fire Prevention Officer of the Council has the power under section 41 of the <em>Country Fire Authority Act 1958</em> to issue this notice. </p> <p> ... additional paragraphs, liste, etc (see full example) ... </p></div>

Date Formatting

The output of non workflow status datetime fields can be formatted: For example

{$item.datePermitDeclined|date_format:"%d-%m-%Y %l:%M %p"}

will output the datetime as 11-10-2021 5:00PM

{$item.datePermitDeclined|date_format:"%d-%m-%Y %H:%M"}

will output the datetime as 11-10-2021 17:00

Adding a photos page if evidence exists

If we have any media attached to the record, this renders it on its own page.

{if $media}  <hr /> <br />  <h1 class="center-text">Evidence</h1> <p>  {foreach from=$media item="photo"}  <img class="media" src="{$photo}"> {/foreach} </p> {/if}

PreviousMail Merge Templates NextMap Layers

Last updated 6 months ago