Document Templates

Document templates are the print and PDF designs behind your documents: the layouts that turn a quotation, invoice or purchase order into the polished page a customer receives. Behind the simple idea of “a template” sits a genuine visual designer, far more capable than a fixed form, and worth understanding if you want your documents to look exactly right.

A visual designer, not a code box

The template editor is a drag-and-drop designer with four panes: a Data sidebar of every field you can place, a Designer canvas you build the layout on, a live Preview that renders the actual PDF as you work, and a Properties panel to style whatever you select. You design by dragging a field onto the page and styling it, the way you would in a modern design tool, not by hand-writing markup.

Underneath, the layout is stored as DTML, a compact markup describing the document's rows, columns, tables and data bindings. You rarely touch it directly, the designer writes it for you, but it can be viewed and even imported as source, which is useful for copying a layout between templates.

The data you can place

Each document type (sales invoice, quotation, purchase order and so on) comes with its own data model: a tree of tokens in the Data sidebar that you drag onto the page. The important branches are:

• document – the number (serial), date, status, currency, and the e-Invoice QR code where it applies.
• organisation – your name, registered name and number, address and logo.
• recipient – the customer (or vendor), including their code, name, address and registration, and the contact person.
• order – the line items, the totals (subtotal, tax, grand total, and even the amount spelled out in words), and the tax summary.
• payment – terms, due date, the payment history and the outstanding balance.
• custom – any custom fields you have added to that document, exposed for placing on the page.

Line items: looping and grouping

The real power is in tables. Bind a table to the line items and it loops, drawing one row per item automatically, with a header, body and footer section you design once. A small piece of the DTML the designer produces looks like this:

<epp-table src="order.lineItems">
  <epp-thead>
    <epp-col><epp-text src="_.text">Description</epp-text></epp-col>
    <epp-col><epp-text src="_.text">Amount</epp-text></epp-col>
  </epp-thead>
  <epp-tbody>
    <epp-col><epp-data src="order.lineItems.description"/></epp-col>
    <epp-col style="text-align:right">
      <epp-data src="order.lineItems.amtTotal" style="fmt-num-dec:2;"/>
    </epp-col>
  </epp-tbody>
</epp-table>

You never have to write that by hand, but it shows the model: a table is bound to order.lineItems, and the body row references fields like description and amtTotal, which repeat for every line. Tables can also group lines by category and print a subtotal per group, so an invoice can read as “Electronics … subtotal, Services … subtotal” without any manual work.

Formatting, layout and branding

Formatting helpers

Each placed field can be formatted in its properties: decimal places on numbers, a date format on dates, a prefix or suffix (a currency symbol, brackets), text replacement, a fallback value when the field is empty, and text transforms like uppercase. The amount-in-words on totals is a ready-made field, so “One hundred twenty-three” prints without you computing it.

Page layout

At the document level you set the paper size (A4 or A5), orientation, and margins. A template has a repeating header and footer (with a choice of whether the header shows on the first page), automatic page numbering (“Page 1 of 3”), and page breaks you can force or avoid. Columns are sized by percentage, and the full range of CSS styling, fonts, colours, borders, spacing, alignment, is available per element.

Branding and codes

Place your logo (and the customer's, where held), and, on documents that use MyInvois, the e-Invoice QR code. Several templates can exist per document type, with one marked the default that is used unless another is chosen, so you can keep a full invoice and a simplified one side by side.

How it becomes a PDF

When a document is printed, the template's DTML is turned into HTML, populated with the real document's data, and rendered to a PDF. You see the same result live in the Preview pane while you design, so what you lay out is what prints, with no separate “export and check” step.

Worked example

You build a branded sales-invoice template: drag your logo and registered details into the header, add a line-items table bound to order.lineItems with description, quantity, price and amount columns, group the lines by category with subtotals, place the totals block (including the amount in words) and the payment terms and due date, drop the e-Invoice QR in the corner, and set A4 with a repeating footer and page numbers. The Preview shows the finished PDF as you go; you mark it the default and every invoice now prints in your house style.

Edge cases and good practice

• Let the designer write the DTML; reach for source view only to copy a layout between templates.
• Prepare values, do not compute them. If you need a derived figure, it must come from a field, the template will not calculate it.
• Use grouping and subtotals on line-item tables rather than trying to lay rows out by hand.
• Keep one clear default per document type, adding variants only where a real second format is needed.
• Preview on real data before making a template the default, so edge cases (long descriptions, many lines, multiple pages) lay out cleanly.

Related

• How to: Design a document template
• Reference: Custom Fields (placed on templates)
• Reference: Document Numbering
• Reference: e-Invoice (the QR code)