All Collections
Knowledge Base
Templates: Setting up your Invoice/Contract templates
Templates: Setting up your Invoice/Contract templates

Here you will find information about setting up your templates for your invoices and contracts

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 builders for the invoice and contract are located in Office > Invoice Templates (Invoices) or Office > Contract Templates (Contracts).

With our WYSIWYG (What You See Is What You Get) editor you can build and design your own templates. With the <> icon you also have the option of editing the template with HTML for more advanced customisation options.

Liquid
ABOSS uses Liquid as template language for the templates. With liquid you can add dynamic content to your template with data from the agency, project, event, deal etc. that is linked to the invoice or contract.

You can build your template in your WYSIWYG editor. With our editor you can write and design all the elements for your template and see the changes reflected in real-time.

Toolbar
The toolbar on top of the editor offers a selection of options to style and align your text, create a bullet or numbered list, add images, create tables, add page breaks or edit your current template in HTML.
You can hover over each icon to show a tooltip with their function.

Adding data to your template
You can add certain data that's linked to your template through our liquid option. For example, both templates can access event data, event data contains a value called title that can be used to output the title of an event.

To output a data point on the page, wrap them in {{ and }}, as shown below:

{{ event.title }}

All available data points available in your template can be seen on the right sidebar of your template builder.

Add filters to your data
It's possible to add filters to your data tags to manipulate or stylize your data to your liking. You can use filters by adding the following code to your data tag:

Without filter:

{{ data.tag }}

With filter:

{{ data.tag | filter_name }}

We currently have the following filters available:

Format Money

format_money - Formats a numeric amount to money notation.

{{ event.fee | format_money }}
Output: 1,500.00

Format Percentage

format_percentage - Formats a numeric amount to percentage notation, this will remove the decimals from the number.

{{ event.vat_percentage | format_percentage }}
Output: 21

Upcase

upcase - Transforms text to all upercase.

{{{ event.title | upcase }}
Output: WOODSTOCK

Date

date: "format" - Formats a date to your prefered structure. You can specify your desired structure in the "format" section.

{{{ event.start | date: "%B %d, %Y" }}
Output: April 16, 2017

Dates
%a  - The abbreviated weekday name ("Sun")
%A  - The full weekday name ("Sunday")
%b  - The abbreviated month name ("Jan")
%B  - The full month name ("January")
%d  - Day of the month (01..31)
%e  - Day of the month without a leading zero (1..31)
%j  - Day of the year (001..366)
%m  - Month of the year (01..12)
%U  - Week number of the current year, starting with the first Sunday as the first day of the first week (00..53)
%W  - Week number of the current year, starting with the first Monday as the first day of the first week (00..53)
%w  - Day of the week (Sunday is 0, 0..6)
%x  - Preferred representation for the date alone, no time
%y  - Year without a century (00..99)
%Y  - Year with century

Times
%H  - Hour of the day, 24-hour clock (00..23)
%I  - Hour of the day, 12-hour clock (01..12)
%l  - Hour of the day, 12-hour clock without a leading zero (1..12)
%M  - Minute of the hour (00..59)
%P  - Meridian indicator ("am" or "pm")
%p  - Meridian indicator ("AM" or "PM")
%S  - Second of the minute (00..60)
%X  - Preferred representation for the time alone, no date
%Z  - Time zone name

Calculate with your data
It's also possible to calculate with all data that returns numbers. You can calculate in the following way:

No calculation:

{{ event.fee }}

With Calculation:

{{ event.fee | plus: event.bookingsfee }}

You can use the following:

Plus

plus: number - Increase the amount with the given number.

# event.fee = 500
# event.bookingsfee = 50

{{ event.fee | plus: event.bookingsfee }}
Output: 550

Minus

minus: number - Decreases the amount with the given number.

# event.fee = 500
# event.bookingsfee = 50

{{ event.fee | minus: event.bookingsfee }}
Output: 450

Multiply

times: number - Multiplies the amount with the given number.

# event.total_tickets_sold = 850
# event.ticket_price = 35

{{ event.total_tickets_sold | times: event.ticket_price }}
Output: 29750

Divide

divided_by: number - Divides the amount with the given number.

# deal.tickets = 2
# deal.amount = 500

{{ deal.amount | divided_by: deal.tickets }}
Output: 250

Did this answer your question?