5.2. Using the template editor

The template editor is recommended for both beginners and advanced users who want to create an HTML invoice template. Our support team prefers to use the editor rather than to code templates by hand.

The template editor can be used to create new templates or to edit existing ones.

  • Go to File » Template Editor to open the template editor.

  • If you've already created a template, go to the Invoices view and double-click an invoice to view it. You can then click the Edit link next to the Templates drop-down list to edit the currently used template.

    The nice thing about opening the template editor from the View Invoice window is that you can adjust the template and see how that specific invoice will look like.

The editor works with HTML templates but you don't have to know HTML to use it, although this might help if you want to adjust even the smallest details. The templates created by the template editor should not be edited outside Fanurio, adjust the meta-template instead.

Note: The template editor can only open templates it created. It cannot import old HTML templates or templates created manually. If you have an old template, it should be relatively easy to recreate it with this editor.

5.2.1. Basic settings

Most template settings can be easily changed by checking some boxes or by typing text in some fields. That's how you can specify the page format, the logo, the columns of the invoice and their names or the totals.

Headers and footers on the other hand are more complex and they may contain HTML code and placeholders for specific invoice fields. Add the following text to the Invoice/Footer field to display the invoice notes:

${invoice.notes}

Just like invoice.notes, there are many other placeholders for the fields of an invoice, your business and your client's business. The complete list of placeholders can be found here. If you want to know more about placeholders, we have a separate section that explains them.

If you want to format the text, you need to use HTML code. Add the following text to the Invoice/Footer field to display the invoice notes and a thank you note:

<p>${invoice.notes}</p>
<br/>
<p><center>Thank you for your business!</center></p>

The text between <p> and </p> represents a paragraph, <br/> represents a line-break while the text between <center> and </center> will be displayed centered. Another tag that you may want to use to format text as bold is <b> </b>. See this guide if you want to learn HTML at basic level.

5.2.1.1. Logo

  1. Go to File » Template Editor to open the template editor,

  2. Go to the Page section,

  3. Check the Logo box,

  4. Click the link next to the Logo box to specify the logo image,

  5. Click the Update button to see how it looks like and

  6. Optionally, adjust the Height and click Update again to see how the look changes.

5.2.1.2. QR-bill

QR-bill is a new standard that replaces inpayment slips throughout Switzerland starting on June 30, 2020. Invoice templates created by the template editor can be configured to show a QR-bill but only if the following data is entered in the application:

  • IBAN number: Go to Business » My Business Details and enter it in the Company / Registration / Other Number field.

  • Business name: Go to Business » My Business Details and enter it in the Company / Name field.

  • Business address: Go to Business » My Business Details and enter it in the Company / Contact / Address, City, Zip and Country fields. The country field must contain a two-letter country code to be valid. If it's missing, CH (Switzerland) is used by default.

  • Client name: Go to the Projects view and right-click (ctrl-click on macOS) a client. Then select Edit Client from the contextual menu. Enter the client name under Registration / Legal Name or Company / Name (used if Legal Name is missing).

  • Client address: Go to the Projects view and right-click (ctrl-click on macOS) a client. Then select Edit Client from the contextual menu. Enter it in the Contact / Address, City, Zip and Country fields. The country field must contain a two-letter country code to be valid. If it's missing, CH (Switzerland) is used by default.

  • Additional information (optional): If the invoice has any notes, they are displayed in the Additional information QR-bill field.

Here's how to configure templates to show the QR-bill:

  1. Go to File » Template Editor to open the template editor,

  2. Go to the Invoice section,

  3. Scroll-down and check the QR-bill box,

  4. Click the Update button to see how it looks like. The QR-bill is displayed separately on the last page of the invoice.

If you need to customize the QR-bill, you can change qrbill Freemarker directive in the the meta-template.

5.2.2. Adjust the look and format using CSS (for advanced users only!)

The template editor has a CSS field in the Style section where users can enter custom CSS code to adjust the look and format of the final document. This feature is meant to be used only by people who know CSS.

Here are a few snippets that you can use to customize the invoice template.

Snippet 1: Display totals only on the last page

.table tfoot {
  display: table-row-group;
} 

If the invoice has multiple pages, totals are displayed on each page. This code changes the table to display the totals only on the last page.

Snippet 2: Force the invoice table to a certain height

.table {
  height: 12cm;
}

The invoice table height is variable and depends on what's in the table. This code forces it to have a specific height.

Snippet 3: Paint a line above the table footer (totals)

.table tfoot tr:first-child td {
  border-top: 1px solid black;
}

Use this code if you want to separate the totals from the rest of the table by drawing a line.

5.2.3. Adjust the meta-template (for advanced users only!)

An invoice template created by the template editor stores two things that allow it to be edited:

  • the settings like which columns are visible or the page format and

  • the meta-template that can process these settings to create the invoice template.

The meta-template allows you to make complex changes to your templates that can't be done by simply configuring some settings. If an invoice template is not generated the way you want it to be, you should change the meta-template instead of editing the template outside the application. The meta-template is available in the Meta-template field of the template editor.

Here are a few things that you can change in the meta-template:

  • the order of columns in the invoice table,

  • sort items by name instead of date,

  • the information displayed for some items.

The meta-template uses angle bracket tag syntax (e.g. <#directive> ... </#directive>) and square bracket interpolation syntax (e.g. [=variable]) while the actual template uses square bracket tag syntax (e.g. [#directive] ... [/#directive]) and dollar interpolation syntax (e.g. ${variable}).