Worked examples

This page provides usage examples for the Template Content field in Mail Merge templates.

Below are some worked examples that use the concepts included in the system's default Additional CSS.

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>

This example uses the {$IN_THREE_WEEKS} token, which calculates 3 weeks from today's date. This will display in the correct date format of dd/mm/yyyy .

Alternatively, you can use the due date of the item , {$due}, which is 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 of the 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 1234 5678.     
    </strong> 
</p>

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></h3>    
    <h1>FIRE PREVENTION NOTICE</h1>
</div>

Adding smaller legal text

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

<!-- Your main page would be above here ^^ -->

<!-- Add a page break, followed by a carriage return to position the heading where we want it -->
<hr/>
<br/>

<!-- We want our heading centred -->
<h1 class="center-text">Explanatory Note for a Schedule 15 Fire Prevention Notice</h1>

<!-- We want all the page text small and fully justified -->
<div class="small-text justify-text">
    <!-- The text is regular HTML from here... -->
    <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, lists, etc (see full example) ...
    </p>
</div>