02 - The basics

How to find the template editor and preview your changes when building your templates.

Thomas van Beek avatar
Written by Thomas van Beek
Updated over a week ago

With ABOSS Agency you have the option of building your own invoice and contract templates. The template builder for the invoice and contract are located in Office under the menu items Invoice Templates and Contract Templates.

With our editor you can build and design your own templates just like you would in any other text processor. For more advanced customisation you can always use the source code option '< >' from the toolbar to edit the template with HTML.

Preview your Contract or Invoice during development

When you are working on an Invoice or Contract template, you might want to preview the result during development of the form. 

This article will show you some tips during the development of templates. 

To preview the output of your templates you need the following things. 

  • Create a test event and enter random details in the event. Fill out a deal, link a contact, enter a location, etc. Name the event so it is clear that it is a test event. You can delete the event when you are done. 

  • Work with multiple browser tabs within Google Chrome. 

  • Permissions within ABOSS to the Office section. 

Warning! Any changes made in a template can cause the template to malfunction if the codes are not written properly. Always create a duplicate of a template when you are making changes to the liquid code! Change templates at your own risk. 

When you have created the test event, you can create or edit the templates. 

The Invoice and Contract templates can be found under the Office section. Create a new one or edit an existing one. 

Save changes

When you want to test changes you made to the template you can save the template by clicking the save button at the top of the screen. 

Open a second browser window

The next step is to keep this browser window open! Open a second tab in the browser. 

Navigate to ABOSS in the 'New Tab' and open your test event. Create a new Invoice or Contract, depending on which template you are editing. 

Select your template
Select the template that you are working on on the Invoice or Contract.

Enter the optional details to complete the invoice. 

Use 'Test' as your invoice or contract number to prevent missing numbers in your administration.

Click on 'Preview PDF' to view the result of your template. A new browser window will open, showing you the PDF file.

Edit and Preview new changes

You will now have three browser tabs open and you can easily switch between them. Keep these two browser tabs open: The template editor and the PDF file. 

To Edit and Preview again, simply switch between tabs. Edit the template again and save it. 

Open the PDF browser tab and hit refresh. The new adjustments will update in the PDF. Repeat these steps until you are satisfied with the result.

Template error

When there is something wrong in the code of your template, you will get a syntax error. 

In most cases this happens when there is an 'if' statement that is incomplete or if there is a variable in the form that is not written correctly. 

To solve the error, check the template for incomplete or 'wrong' code. Here are some examples of code that could cause an error. 

Below is an incorrect 'if' statement displayed. We start the statement, but we forgot to tell the system to close the statement

{% if event.fee > 0 %}
     {{ event.fee }}

The correct code would be:

{% if event.fee > 0 %}
     {{ event.fee }}
{% endif %}

Incomplete variables will also cause an error. 

{{ contact.contact_name }

You see that the last '}' is missing here. 

Contact support if you get stuck on this or need additional help. 

Did this answer your question?