Filters

Sufio templates use filters to modify the outputs of the properties. Apply filters to format, style or edit the output values.

Using filters

Filters will be applied on the output value of the selected property.

Use filters without parameters

property | filter

Some filters work without any additional parameters.

{{ account.heading | upper }}

Use parameters to customize the filters

property | filter(parameter=value)

Expand the abilities of filters by using them with parameters. Selected filters work only when a parameter is provided.

{{ account.heading | truncate(length=10) }}

Chain filters

property | filter1 | filter2

You may use more than one filter on a property. The filters will be applied in sequence from left to right.

{{ account.heading | truncate(length=10) | upper }}

Array Filters

Use the array filters to manipulate, modify or map other filters on arrays or, in some cases, strings.

batch

array | batch(count: integer)

Batches items by the given number and returns an array of arrays.

Code
{{ ['Lisbon', 'San Francisco', 'Kyoto', 'Bangkok', 'Oslo'] | batch(count=2) }}
Output
[['Lisbon', 'San Francisco'], ['Kyoto', 'Bangkok'], ['Oslo']]

Fill up incomplete batch

array | batch(count: integer, fill_with: string)

Use the fill_with parameter to fill an incomplete array to the given count.

Code
{{ ['Lisbon', 'San Francisco', 'Kyoto', 'Bangkok', 'Oslo'] | batch(count=2, fill_with='x') }}
Output
[['Lisbon', 'San Francisco'], ['Kyoto', 'Bangkok'], ['Oslo', 'x']]

chunk

array | chunk(count: integer)

Splits an array and returns an array of the given number of arrays.

Code
{{ ['Lisbon', 'San Francisco', 'Kyoto', 'Bangkok', 'Oslo'] | chunk(count=2) }}
Output
[['Lisbon', 'San Francisco', 'Kyoto'], ['Bangkok', 'Oslo']]

Collate array items

array | chunk(count: integer, collate: boolean)

Use the collate parameter to collate items when slicing an array. This can be useful to create lists that represent columns. The default value is False.

Code
{{ ['Lisbon', 'San Francisco', 'Kyoto', 'Bangkok', 'Oslo'] | chunk(count=2, collate=True) }}
Output
[['Lisbon', 'Kyoto', 'Oslo'], ['San Francisco', 'Bangkok']]

Fill up missing items

array | chunk(count: integer, fill_with: string)

Use the fill_with parameter to fill up missing items in each array.

Code
{{ ['Lisbon', 'San Francisco', 'Kyoto', 'Bangkok', 'Oslo'] | chunk(count=2, fill_with='x') }}
Output
[['Lisbon', 'San Francisco', 'Kyoto'], ['Bangkok', 'Oslo', 'x']]

first

array | first

Returns the first item of an array.

Code
{{ ['Stockholm', 'Vancouver', 'Boston'] | first }}
Output
Stockholm

Get the first character of a string

string | first

Returns the first character of a string.

Code
{{ 'Stockholm' | first }}
Output
S

join

array | join

Combines all items of an array into a string.

Code
{{ ['London', 'Lisbon', 'Bangkok'] | join }}
Output
LondonLisbonBangkok

Combine items of an array with a separator

array | join(separator: string)

Use the separator parameter to separate the items with the specified string. By default, items are combined without a separator.

Code
{{ ['London', 'Lisbon', 'Bangkok'] | join(', ') }}
Output
London, Lisbon, Bangkok

last

array | last

Returns the last item of an array.

Code
{{ ['Stockholm', 'Vancouver', 'Boston'] | last }}
Output
Boston

Get the last character of a string

string | last

Returns the last character of a string.

Code
{{ 'Stockholm' | last }}
Output
m

length

array | length

Returns the number of items in an array.

Code
{{ ['New York', 'Austin', 'Toronto'] | length }}
Output
3

Get the length of a string

string | length

Returns the number of characters in a string.

Code
{{ 'New York' | length }}
Output
8

map

Applies a filter on all items in an array or creates an array of property values.

Apply filter on items of an array

array | map(filter: string)

Applies specified filter on all items in an array.

Code
{{ ['Lisbon', 'San Francisco', 'Kyoto'] | map(filter='upper') }}
Output
['LISBON', 'SAN FRANCISCO', 'KYOTO']

Create an array of property values

array | map(property: string, default: string)

Creates an array of property values. Use the default parameter to set default values for empty properties in case the specified property is not found.

Code
{{ document.dates | map(property='title') }}
Output
['Issue Date', 'Delivery Date', 'Due Date']
Code
{{ document.dates | map(property='text', default='Unset') }}
Output
['04-02-2022', '08-02-2022', 'Unset']

reject

array | reject(property: string, value: string)

Returns an array that excludes items based on their property value.

Code
{{ document.dates | reject(property='title', value='Due Date') | map(property='title') }}
Output
['Issue Date', 'Delivery Date']

reverse

array | reverse(join: string)

Reverses the order of items in an array. Use the join parameter to separate the items with the specified string. By default, items are combined without a separator.

Code
{{ ['Oslo', 'Stockholm', 'Helsinki'] | reverse }}
Output
['Helsinki', 'Stockholm', 'Oslo']

Reverse a string

string | reverse

Use the filter to reverse a string.

Code
{{ 'Oslo' | reverse }}
Output
olsO

select

array | select(property: string, value: string)

Creates an array that includes items based on a property value.

Code
{{ document.dates | select(property='title', value='Due Date') | map(property='title') }}
Output
['Due Date']

sort

array | sort

Sorts the items in an array in alphabetical or numerical order.

Code
{{ ['Rome', 'Athens', 'Cairo'] | sort }}
Output
['Athens', 'Cairo', 'Rome']

Sort items in reverse order

array | sort(reverse: boolean)

Use the reverse parameter to sort the array items in reverse alphabetical or numerical order. The default value is False.

Code
{{ ['Rome', 'Athens', 'Cairo'] | sort(reverse=True) }}
Output
['Rome', 'Cairo', 'Athens']

Sort items in case-sensitive order

array | sort(case_sensitive: boolean)

Use the case_sensitive parameter to sort the array items in case-sensitive order. The default is False.

Code
{{ ['Athens', 'cairo', 'athens', 'Cairo'] | sort(case_sensitive=True) }}
Output
['Athens', 'Cairo', 'athens', 'cairo']

Sort by an array item property

array | sort(property: string)

Use the property parameter to sort the array items by their property in alphabetical or numerical order.

Code
{{ document.dates | sort(property='title') | map(property='title') }}
Output
['Delivery Date', 'Due Date', 'Issue Date']

Sort characters of a string

string | sort

Sorts the characters of a string.

Code
{{ 'Cairo' | sort }}
Output
aCior

unique

array | unique

Removes any duplicate items from the array. By default, the filter is not case-sensitive.

Code
{{ ['London', 'london', 'Paris', 'London'] | unique }}
Output
['London', 'Paris']

Remove duplicate items but keep unique case-sensitive items

array | unique(case_sensitive: boolean)

Use the case_sensitive parameter to keep all case-sensitive variations of one item. The default value is False.

Code
{{ ['London', 'london', 'Paris', 'London'] | unique(case_sensitive=True) }}
Output
['London', 'london', 'Paris']

Remove duplicate items based on a property

array | unique(property: string)

Use the property parameter to remove the duplicate array items by their property.

Code
{{ document.dates | unique(property='text') | map(property='text') }}
Output
['01-01-2023', '01-14-2023']

Barcode Filters

Barcode filters generate machine-readable barcodes from strings.

qr_code

string | qr_code

Renders the string as a QR code.

Code
{{ 'Invoice 1042' | qr_code }}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="84" height="84" class="qrcode"><path transform="scale(2)" class="qrline" stroke="#000" d="M0 0.5h7m1 0h1m1 0h1m1 0h1m1 0h7m-21 1h1m5 0h1m1 0h3m1 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m5 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m2 0h2m3 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h2m-11 1h1m2 0h6m1 0h2m1 0h1m2 0h1m1 0h3m-21 1h1m1 0h4m2 0h3m1 0h1m1 0h1m2 0h1m-15 1h5m3 0h2m1 0h2m1 0h1m1 0h2m-20 1h1m2 0h2m2 0h2m1 0h2m2 0h2m1 0h2m-20 1h2m2 0h4m1 0h4m3 0h1m2 0h1m-12 1h3m1 0h3m1 0h5m-21 1h7m1 0h3m1 0h1m3 0h1m-17 1h1m5 0h1m1 0h2m4 0h2m1 0h2m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m-20 1h1m1 0h3m1 0h1m1 0h1m1 0h1m-11 1h1m1 0h3m1 0h1m4 0h4m1 0h1m2 0h2m-21 1h1m5 0h1m2 0h2m1 0h4m1 0h4m-21 1h7m1 0h2m1 0h2m1 0h2"></path></svg></div>

Resize the QR code

string | qr_code(scale: float)

Use the scale parameter to resize the QR code. The default value is 2.

Code
{{ 'Invoice 1042' | qr_code(scale=4) }}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="84" height="84" class="qrcode"><path transform="scale(4)" class="qrline" stroke="#000" d="M0 0.5h7m1 0h1m1 0h1m1 0h1m1 0h7m-21 1h1m5 0h1m1 0h3m1 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m5 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m2 0h2m3 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h2m-11 1h1m2 0h6m1 0h2m1 0h1m2 0h1m1 0h3m-21 1h1m1 0h4m2 0h3m1 0h1m1 0h1m2 0h1m-15 1h5m3 0h2m1 0h2m1 0h1m1 0h2m-20 1h1m2 0h2m2 0h2m1 0h2m2 0h2m1 0h2m-20 1h2m2 0h4m1 0h4m3 0h1m2 0h1m-12 1h3m1 0h3m1 0h5m-21 1h7m1 0h3m1 0h1m3 0h1m-17 1h1m5 0h1m1 0h2m4 0h2m1 0h2m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m-20 1h1m1 0h3m1 0h1m1 0h1m1 0h1m-11 1h1m1 0h3m1 0h1m4 0h4m1 0h1m2 0h2m-21 1h1m5 0h1m2 0h2m1 0h4m1 0h4m-21 1h7m1 0h2m1 0h2m1 0h2"></path></svg></div>

Add a border around the QR code

string | qr_code(border: integer)

Use the border parameter to add a border around the QR code. The default value is 0.

Code
{{ 'Invoice 1042' | qr_code(border=1) }}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="46" height="46" class="qrcode"><path transform="scale(2)" class="qrline" stroke="#000" d="M1 1.5h7m1 0h1m1 0h1m1 0h1m1 0h7m-21 1h1m5 0h1m1 0h3m1 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m5 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m2 0h2m3 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h2m-11 1h1m2 0h6m1 0h2m1 0h1m2 0h1m1 0h3m-21 1h1m1 0h4m2 0h3m1 0h1m1 0h1m2 0h1m-15 1h5m3 0h2m1 0h2m1 0h1m1 0h2m-20 1h1m2 0h2m2 0h2m1 0h2m2 0h2m1 0h2m-20 1h2m2 0h4m1 0h4m3 0h1m2 0h1m-12 1h3m1 0h3m1 0h5m-21 1h7m1 0h3m1 0h1m3 0h1m-17 1h1m5 0h1m1 0h2m4 0h2m1 0h2m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m-20 1h1m1 0h3m1 0h1m1 0h1m1 0h1m-11 1h1m1 0h3m1 0h1m4 0h4m1 0h1m2 0h2m-21 1h1m5 0h1m2 0h2m1 0h4m1 0h4m-21 1h7m1 0h2m1 0h2m1 0h2"></path></svg></div>

Change the color of the QR code

string | qr_code(color: string)

Use the color parameter to change the color of the QR code. Accepts color names and hex codes. The default color is black.

Code
{{ 'Invoice 1042' | qr_code(color='grey') }}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="42" height="42" class="qrcode"><path transform="scale(2)" class="qrline" stroke="#808080" d="M0 0.5h7m1 0h1m1 0h1m1 0h1m1 0h7m-21 1h1m5 0h1m1 0h3m1 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m5 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m2 0h2m3 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h2m-11 1h1m2 0h6m1 0h2m1 0h1m2 0h1m1 0h3m-21 1h1m1 0h4m2 0h3m1 0h1m1 0h1m2 0h1m-15 1h5m3 0h2m1 0h2m1 0h1m1 0h2m-20 1h1m2 0h2m2 0h2m1 0h2m2 0h2m1 0h2m-20 1h2m2 0h4m1 0h4m3 0h1m2 0h1m-12 1h3m1 0h3m1 0h5m-21 1h7m1 0h3m1 0h1m3 0h1m-17 1h1m5 0h1m1 0h2m4 0h2m1 0h2m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m-20 1h1m1 0h3m1 0h1m1 0h1m1 0h1m-11 1h1m1 0h3m1 0h1m4 0h4m1 0h1m2 0h2m-21 1h1m5 0h1m2 0h2m1 0h4m1 0h4m-21 1h7m1 0h2m1 0h2m1 0h2"></path></svg></div>

Change the background color of the QR code

string | qr_code(background: string)

Use the background parameter to change the color of the background of the QR code. Accepts color names and hex codes. The default color is white.

Code
{{ 'Invoice 1042' | qr_code(background='#483C32') }}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="42" height="42" class="qrcode"><g transform="scale(2)"><path fill="#483c32" d="M0 0h21v21h-21z"></path><path class="qrline" stroke="#000" d="M0 0.5h7m1 0h1m1 0h1m1 0h1m1 0h7m-21 1h1m5 0h1m1 0h3m1 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m5 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m2 0h2m3 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h2m-11 1h1m2 0h6m1 0h2m1 0h1m2 0h1m1 0h3m-21 1h1m1 0h4m2 0h3m1 0h1m1 0h1m2 0h1m-15 1h5m3 0h2m1 0h2m1 0h1m1 0h2m-20 1h1m2 0h2m2 0h2m1 0h2m2 0h2m1 0h2m-20 1h2m2 0h4m1 0h4m3 0h1m2 0h1m-12 1h3m1 0h3m1 0h5m-21 1h7m1 0h3m1 0h1m3 0h1m-17 1h1m5 0h1m1 0h2m4 0h2m1 0h2m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m-20 1h1m1 0h3m1 0h1m1 0h1m1 0h1m-11 1h1m1 0h3m1 0h1m4 0h4m1 0h1m2 0h2m-21 1h1m5 0h1m2 0h2m1 0h4m1 0h4m-21 1h7m1 0h2m1 0h2m1 0h2"></path></g></svg></div>

Add a title to the QR code

string | qr_code(title: string)

Use the title parameter to add an image title to the generated QR code.

Code
{{ 'Invoice 1042' | qr_code(title='QR code') }}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="42" height="42" class="qrcode"><title>QR code</title><path transform="scale(2)" class="qrline" stroke="#000" d="M0 0.5h7m1 0h1m1 0h1m1 0h1m1 0h7m-21 1h1m5 0h1m1 0h3m1 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m5 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m2 0h2m3 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h2m-11 1h1m2 0h6m1 0h2m1 0h1m2 0h1m1 0h3m-21 1h1m1 0h4m2 0h3m1 0h1m1 0h1m2 0h1m-15 1h5m3 0h2m1 0h2m1 0h1m1 0h2m-20 1h1m2 0h2m2 0h2m1 0h2m2 0h2m1 0h2m-20 1h2m2 0h4m1 0h4m3 0h1m2 0h1m-12 1h3m1 0h3m1 0h5m-21 1h7m1 0h3m1 0h1m3 0h1m-17 1h1m5 0h1m1 0h2m4 0h2m1 0h2m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m-20 1h1m1 0h3m1 0h1m1 0h1m1 0h1m-11 1h1m1 0h3m1 0h1m4 0h4m1 0h1m2 0h2m-21 1h1m5 0h1m2 0h2m1 0h4m1 0h4m-21 1h7m1 0h2m1 0h2m1 0h2"></path></svg></div>

Add a logo to the QR code

string | qr_code(logo: string, logo_width: string)

Use the logo parameter to add an image to the center of the QR code. Use the logo_width parameter to resize the logo. Supports all common image formats.

Code
{{ 'Invoice 1042' | qr_code(color='483C32', background='A8A199', logo='https://sufio.com/static/infoweb/images/logo/logo-white@2x.png', logo_width='20px') }}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="42" height="42" class="qrcode"><g transform="scale(2)"><path fill="#a8a199" d="M0 0h21v21h-21z"></path><path class="qrline" stroke="#483c32" d="M0 0.5h7m1 0h1m1 0h1m1 0h1m1 0h7m-21 1h1m5 0h1m1 0h3m1 0h1m1 0h1m5 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m5 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m2 0h1m1 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h1m2 0h2m1 0h1m1 0h3m1 0h1m-21 1h1m5 0h1m2 0h2m3 0h1m5 0h1m-21 1h7m1 0h1m1 0h1m1 0h1m1 0h7m-12 1h2m-11 1h1m2 0h6m1 0h2m1 0h1m2 0h1m1 0h3m-21 1h1m1 0h4m2 0h3m1 0h1m1 0h1m2 0h1m-15 1h5m3 0h2m1 0h2m1 0h1m1 0h2m-20 1h1m2 0h2m2 0h2m1 0h2m2 0h2m1 0h2m-20 1h2m2 0h4m1 0h4m3 0h1m2 0h1m-12 1h3m1 0h3m1 0h5m-21 1h7m1 0h3m1 0h1m3 0h1m-17 1h1m5 0h1m1 0h2m4 0h2m1 0h2m1 0h1m-21 1h1m1 0h3m1 0h1m1 0h2m1 0h3m1 0h1m1 0h1m1 0h1m-20 1h1m1 0h3m1 0h1m1 0h1m1 0h1m-11 1h1m1 0h3m1 0h1m4 0h4m1 0h1m2 0h2m-21 1h1m5 0h1m2 0h2m1 0h4m1 0h4m-21 1h7m1 0h2m1 0h2m1 0h2"></path></g></svg><img src="https://sufio.com/static/infoweb/images/logo/logo-white@2x.png" class="qr-code-logo" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px;"></div>

qr_code_ksa

string | qr_code_ksa

Auto-fills and creates QR codes for invoices in Saudi Arabia. We recommend you insert the filter as a function without any input property.

Can be used with the same parameters as qr_code.

Code
{% filter qr_code_ksa %}{% endfilter %}
Output
<div class="qr-code-wrapper" style="display: inline-block; position: relative;"><svg width="66" height="66" class="qrcode"><path transform="scale(2)" class="qrline" stroke="#000" d="M0 0.5h7m3 0h5m1 0h2m1 0h4m3 0h7m-33 1h1m5 0h1m1 0h3m2 0h1m1 0h2m1 0h1m1 0h3m3 0h1m5 0h1m-33 1h1m1 0h3m1 0h1m2 0h3m3 0h1m2 0h1m2 0h2m3 0h1m1 0h3m1 0h1m-33 1h1m1 0h3m1 0h1m1 0h2m2 0h1m1 0h1m5 0h5m1 0h1m1 0h3m1 0h1m-33 1h1m1 0h3m1 0h1m2 0h1m1 0h1m1 0h1m1 0h4m1 0h1m5 0h1m1 0h3m1 0h1m-33 1h1m5 0h1m1 0h2m2 0h4m1 0h1m3 0h2m3 0h1m5 0h1m-33 1h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-24 1h1m4 0h1m3 0h5m1 0h1m-25 1h5m1 0h4m4 0h1m5 0h1m1 0h1m1 0h2m1 0h1m1 0h1m1 0h1m-31 1h1m1 0h2m3 0h1m5 0h1m1 0h1m1 0h1m1 0h1m4 0h3m2 0h1m1 0h1m-33 1h3m3 0h1m1 0h1m1 0h1m1 0h2m1 0h1m4 0h1m6 0h5m-32 1h2m1 0h2m2 0h2m2 0h1m2 0h1m3 0h1m1 0h2m2 0h1m2 0h1m1 0h2m1 0h1m-29 1h1m1 0h1m1 0h6m1 0h1m1 0h1m1 0h1m1 0h2m1 0h2m1 0h1m1 0h4m-31 1h1m1 0h2m3 0h1m4 0h5m1 0h2m3 0h1m3 0h2m-31 1h3m3 0h5m3 0h4m3 0h1m4 0h1m2 0h1m1 0h1m-32 1h1m2 0h1m3 0h1m2 0h1m4 0h2m4 0h4m1 0h6m-32 1h2m1 0h2m1 0h1m1 0h1m1 0h1m2 0h1m1 0h1m1 0h1m1 0h2m1 0h1m1 0h2m2 0h1m1 0h1m1 0h1m-33 1h1m2 0h3m4 0h2m2 0h4m1 0h2m1 0h1m2 0h1m3 0h1m1 0h2m-32 1h2m1 0h1m1 0h1m1 0h2m5 0h4m2 0h1m4 0h1m1 0h1m-28 1h1m2 0h1m3 0h3m3 0h1m1 0h1m1 0h1m2 0h2m4 0h1m1 0h3m-32 1h1m3 0h1m1 0h2m1 0h2m1 0h1m1 0h1m5 0h3m1 0h2m-26 1h3m1 0h2m2 0h2m3 0h1m2 0h4m9 0h1m1 0h1m-32 1h1m4 0h2m1 0h3m1 0h4m4 0h1m1 0h1m1 0h3m1 0h2m1 0h1m-32 1h1m1 0h4m1 0h1m6 0h1m1 0h1m4 0h1m4 0h2m1 0h3m-32 1h1m3 0h1m1 0h1m2 0h1m2 0h1m1 0h2m3 0h4m1 0h7m-23 1h2m5 0h2m1 0h4m2 0h1m3 0h1m-29 1h7m1 0h2m2 0h1m2 0h2m3 0h1m3 0h1m1 0h1m1 0h4m-32 1h1m5 0h1m3 0h2m2 0h1m1 0h1m1 0h1m1 0h5m3 0h3m-31 1h1m1 0h3m1 0h1m1 0h2m1 0h2m1 0h1m2 0h1m1 0h1m4 0h9m-33 1h1m1 0h3m1 0h1m1 0h1m5 0h5m1 0h5m3 0h3m-31 1h1m1 0h3m1 0h1m1 0h3m1 0h1m1 0h4m2 0h2m3 0h2m2 0h1m1 0h1m-32 1h1m5 0h1m1 0h4m2 0h1m1 0h1m2 0h3m2 0h1m2 0h4m-31 1h7m1 0h1m1 0h1m1 0h1m1 0h4m2 0h1m1 0h3m4 0h3"></path></svg></div>

Design Filters

Design filters apply additional styles to your document values.

font_size_to_fit_text

string | font_size_to_fit_text(max_width: string)

Returns a font-size style in em that will downsize the provided string so that the entire string fits the width defined by the max_width parameter. If no downsizing is needed, the filter does not return anything.

This filter ensures that the entire text, such as a document name, fits into a single line.

Code
{{ 'Credit Note' | font_size_to_fit_text(max_width='2pc') }}
Output
font-size: 0.4em

Use the filter as a property in the style attribute.

Code
<div class="document-name-large"
    style="{{ document.name | font_size_to_fit_text(max_width='1pc') }}">
    {{ document.name.text }}
</div>
Output
<div class="document-name-large" style="font-size: 0.63em;">
    Invoice
</div>

Get font size to fit individual words

string | font_size_to_fit_text(max_width: string, fit_words: boolean)

Use the fit_words parameter to return a font size that will fit all individual words of the provided string. The default value is False.

This parameter ensures that the individual words of a text fit into a single line, while allowing the entire text to break across multiple lines.

Code
{{ 'Credit Note' | font_size_to_fit_text(max_width='2pc', fit_words=True) }}
Output
font-size: 0.75em

Format Filters

Use format filters to apply specific formatting on objects, such as strings, integers, or dates.

date

string | date

Converts a string with date or combined date and time format to ISO 8061 date and time format.

Code
{{ '2020-01-30' | date }}
Output
2022-01-30 00:00:00
Code
{{ '2022-01-30T09:42:07' | date }}
Output
2022-01-30 09:42:07

Convert a string in a custom format to a date

string | date(format: string)

Converts a string in a custom date format to an ISO 8601 date and time format. Use the format parameter to specify the original date format according to the Python strftime/strptime format codes.

Code
{{ '01/30/2020' | date(format='%m/%d/%Y') }}
Output
2020-01-30 00:00:00

Return the current time

now()

Returns the current date and time in your account’s timezone.

Code
{{ now() }}
Output
2023-01-24 09:42:15

default

string | default(string)

Sets a default value for any variable that has an empty string, an empty array, False, or None as its value.

Code
{{ document.notes | default(value='This document has no notes.') }}
Output
This document has no notes.

delta

date | delta(parameter: string)

Adds or subtracts an amount of time specified in seconds, minutes, hours, days, weeks, months or years.

Code
{{ '2000-01-01' | date | delta(years=1, months=2, weeks=2, days=1, hours=3, minutes=30, seconds=15) }}
Output
2001-03-16 03:30:15
Code
{{ '2000-01-01' | date | delta(seconds=-30) }}
Output
1999-12-31 23:59:30

float

string | float

Converts a string to a floating point number.

Code
{{ '42.3' | float }}
Output
42.3

format

string | format(format_string: string)

Applies specified values to a printf-style format string.

For example, use the filter with the %0xd value as a parameter, where x specifies the number of digits, to add zeroes to the beginning of a number.

Code
{{ 1042 | format(format_string='%06d') }}
Output
001042

Use the filter with the %.xf value as a parameter, where x specifies the number of decimals, to truncate the number of decimal places of a float.

Code
{{ 12.42 | format(format_string='%.1f') }}
Output
12.4

format_date

date | format_date

Returns the date  as a string in the format based on the document language.

Code
{{ '2020-01-30T13:42:00' | date | format_date }}
Output
Jan. 30, 2020

Convert a string in a custom format to a date

date | format_date(format: string)

Use the format parameter to define a custom date format according to the Python strftime/strptime format codes.

Code
{{ '2020-01-30T13:42:00' | date | format_date(format='%m/%d/%Y') }}
Output
01/30/2020

Use date and time properties

Use the year , month, day, hour, minute or second properties of a date to return the specific part of the date.

Code
{{ document.dates.issue_date.year }} {{ document.dates.issue_date.month }}
Output
2023 11

int

string | int

Converts a string to an integer.

Code
{{ '42' | int }}
Output
42

json_query

string | json_query(path: string)

Returns the specified value from a JSON string using JMESPath.

Code
{{ '{"name": {"first": "John", "last": "Smith"}}' | json_query(path='name.first') }}
Output
John

label

string | label(title: string)

Adds a label, suffixed by a colon, before a string. If the string is empty, no label is added.

Code
{{ 'John' | label(title='Name') }}
Output
Name: John

list

string | list

Returns the values as a list.

Code
{{ document.dates | list }}
Output
[DateField(2023, 11, 21, 15, 9, 39, 758245), DateField(2023, 11, 21, 15, 9, 39, 758262), DateField(2023, 12, 31, 15, 9, 39, 758252)]

money

number | money

Formats a given number as an amount in the document’s currency. By default, this includes the currency symbol, such as the dollar sign ($), and the correct number of decimals.

Code
{{ 12345.6 | money }}
Output
$1,235.60

Format the amount without a currency symbol

number | money(include_symbol: boolean)

Use the include_symbol parameter to format the amount with or without the currency symbol. The default value is True.

Code
{{ 42 | money(include_symbol=False) }}
Output
42.00

Format the amount with a currency code

number | money(include_code: boolean)

Use the include_code parameter to format the amount to include the ISO 4217 three-letter currency code, such as USD. The default value is False.

Code
{{ 42 | money(include_code=True) }}
Output
€42.00 EUR

Remove trailing zeros

number | money(remove_zeros: boolean)

Use the remove_zeros parameter to format the amount without any trailing decimal zeros. The default value is False.

Code
{{ 42.10 | money(remove_zeros=True) }}
Output
€42.1

number_to_words

number | number_to_words

Converts numbers to words in the document language.

Code
{{ 42 | number_to_words }}
Output
forty-two

Convert the number to words in specified language

number | number_to_words(language_code: string)

Use the language_code parameter to specify a language in which the number should be displayed. Use a two-letter language code from this list. The default value is the language code of your document.

Code
{{ 42 | number_to_words(language_code='de') }}
Output
zweiundvierzig

Choose the type of the conversion

number | number_to_words(format: string)

Use the format parameter to specify the type of the converter to use. Supported values are:

  • cardinal (default): Converts the input number to cardinal word form to express quantity.
Code
{{ 1984 | number_to_words(format='cardinal') }}
Output
one thousand, nine hundred and eighty-four
  • ordinal: Converts the input number to ordinal word form to express position or rank.
Code
{{ 1984 | number_to_words(format='ordinal') }}
Output
one thousand, nine hundred and eighty-fourth
  • ordinal_num: Converts the input number to ordinal number form with the appropriate suffix (e.g., 1st, 2nd, 3rd).
Code
{{ 1984 | number_to_words(format='ordinal_num') }}
Output
1984th
  • year: Converts the input number into its word form as a year.
Code
{{ 1984 | number_to_words(format='year') }}
Output
nineteen eighty-four
  • currency: Converts the input number into words as a monetary amount. The input number must include decimals.
Code
{{ 1984.00 | number_to_words(format='currency') }}
Output
one thousand, nine hundred and eighty-four euro, zero cents

string

object | string

Converts an object to a string.

Code
{{ '$' + 42 | string }}
Output
$42

tlv

string | tlv(tag: integer)

Encodes string to TLV format. Some QR codes use this format to encode different values.

Code
{{ 'Invoice 1042' | tlv(tag=1) }}
Output
010c496e766f6963652031303432

to_timezone

date | to_timezone(timezone: string)

Converts the datetime to a specified timezone. Use the timezone parameter to specify the timezone as an abbreviation or a full name. The default value is the timezone of your account.

Code
{{ '2024-01-31T13:42:00+00:00' | date | to_timezone('Europe/Bratislava') }}
Output
2024-01-31 14:42:00+01:00

Math Filters

Math filters help you with calculations on your documents.

abs

number | abs

Returns the absolute value of a given number.

Code
{{ -42.3 | abs }}
Output
42.3

ceil

number | ceil

Rounds up a number to the nearest integer.

Code
{{ 12.34 | ceil }}
Output
13
Code
{{ -12.34 | ceil }}
Output
-12

floor

number | floor

Rounds down a number to the nearest integer.

Code
{{ 12.3456 | floor }}
Output
12
Code
{{ -12.3456 | floor }}
Output
-13

max

array | max

Returns the largest item from an array.

Code
{{ [1, 2, 3] | max }}
Output
3

Return the largest item from an array with case sensitivity

array | max(case_sensitive: boolean)

Use the case_sensitive parameter to return the largest item in a case-sensitive manner. Lowercase letters have larger value than uppercase. The default value is False.

Code
{{ ['A', 'b', 'C'] | max(case_sensitive=True) }}
Output
b

Return the item with the largest property value

array | max(property: string)

Use the property parameter to specify by which property the item with the largest value will be returned. Returns the whole item in which the value is found.

Code
{{ [{'item': 'Red Shirt', 'quantity': 1}, {'item': 'Blue Shirt', 'quantity': 3}] | max(property='quantity') }}
Output
{'item': 'Blue Shirt', 'quantity': 3}

min

array | min

Returns the smallest item from an array.

Code
{{ [1, 2, 3] | min }}
Output
1

Go through items in a case sensitive manner

array | min(case_sensitive: boolean)

Use the case_sensitive parameter to return the smallest item in a case-sensitive manner. Uppercase letters have smaller value than lowercase. The default value is False.

Code
{{ ['a', 'B', 'c'] | min(case_sensitive=True) }}
Output
B

Return the item with the smallest property value

min(property: string)

Use the property parameter to specify by which property the item with the smallest value will be returned. Returns the whole item in which the value is found.

Code
{{ [{'item': 'Red Shirt', 'quantity': 1}, {'item': 'Blue Shirt', 'quantity': 3}] | min(property='quantity') }}
Output
{'item': 'Red Shirt', 'quantity': 1}

round

number | round

Rounds a number to the nearest integer.

Code
{{ 1.23 | round }}
Output
1
Code
{{ -1.23 | round }}
Output
-1

Round to the number of decimals

number | round(decimals: integer)

Use the decimals parameter to specify the number of decimal places to round to.

Code
{{ 1.23 | round(decimals=1) }}
Output
1.2

sum

array | sum

Returns the sum of an array of numbers.

Code
{{ [1, 2, 3] | sum }}
Output
6

Return the sum of property values

array | sum(property: string)

Use the property parameter to sum the property values.

Code
{{ document.lines | map(property='quantity') | sum }}
Output
3

Return the sum with an additional starting number

array | sum(start: integer)

Use the start parameter to specify a starting number that is added to the sum.

Code
{{ [1, 2, 3] | sum(start=4) }}
Output
10

String Filters

Use the string filters to format or convert strings.

base64_decode

string | base64_decode

Decodes a string in Base64 format.

Code
{{ 'SW52b2ljZSAxMDQy' | base64_decode }}
Output
Invoice 1042

base64_encode

string | base64_encode

Encodes a value to Base64 format.

Code
{{ 'Invoice 1042' | base64_encode }}
Output
SW52b2ljZSAxMDQy

base64_encode_hex

string | base64_encode_hex

Converts a hex string to Base64 format.

Code
{{ '4865726520626520647261676f6e73' | base64_encode_hex }}
Output
SGVyZSBiZSBkcmFnb25z

capitalize

string | capitalize

Converts a string so that the first character is uppercase and the rest are lowercase.

Code
{{ 'invoice No 1042' | capitalize }}
Output
Invoice no 1042

escape

string | escape

Replaces the characters &, <, >, ', and " in the string with HTML name codes. Useful to display text that might contain HTML tags.

Code
{{ 'Red <b>bold</b> shirt' | escape }}
Output
Red &lt;b&gt;bold&lt;/b&gt; shirt

hash

string | hash(algorithm: string)

Converts a string to a hash. Supports the following algorithms:

  • crc32
  • sha1
  • sha224
  • sha256
  • sha384
  • sha512
  • blake2b
  • blake2s
  • md5
  • sha3_224
  • sha3_256
  • sha3_384
  • sha3_512
Code
{{ 'Invoice 1042' | hash(algorithm='md5') }}
Output
6cad15ae3b38fad8afc0ae44651c47ec

lower

string | lower

Converts all characters of a string to lower case.

Code
{{ 'Invoice 1042' | lower }}
Output
invoice 1042

pluralize

string | pluralize(singular: string, plural: string)

Returns the singular or plural version of a string based on the given parameter.

Code
"{{ 1 | pluralize(singular='item', plural='items') }}
Output
item
Code
"{{ 2 | pluralize(singular='item', plural='items') }}
Output
items

remove

string | remove(remove: string)

Removes the specified part of a string.

Code
{{ 'I can not do it!' | remove(remove=' not') }}
Output
I can do it!

replace

string | replace(old: string, new: string)

Replaces the specified part of a string with a different string.

Code
{{ 'Invoice No 1042' | replace(old='No ', new='#') }}
Output
Invoice #1042

Replace a limited number of occurrences

string | replace(old: string, new: string, count: integer)

Use the count parameter to specify how many occurrences will be replaced.

Code
{{ 'Invoice No 1042 - No payment' | replace(old='No ', new='#', count=1) }}
Output
Invoice #1042 - No payment

slice

string | slice(start: integer, length: integer)

Returns the specified part of a string or an array. Specify the first character of the part to be sliced out and the length. The numbering is zero-indexed, meaning the first item of the input has index value 0.

Code
{{ 'Invoice 1042' | slice(start=8, length=4) }}
Output
1042

slugify

string | slugify

Converts to lowercase and removes all characters except alphanumeric, underscores, or hyphens. Replaces whitespace characters with hyphens. Strips whitespace characters at the beginning and at the end of a string.

Code
{{ 'Credit note 1042' | slugify }}
Output
credit-note-1042

split

string | split

Splits a string with whitespace characters as the separator into an array of strings.

Code
{{ 'Invoice No 1042' | split }}
Output
['Invoice', 'No', '1042']

Split with a custom separator

string | split(separator: string)

Use the separator parameter to specify a custom character that will be recognized as the separator.

Code
{{ 'Invoice No: 1042' | split(separator=':') }}
Output
['Invoice No', '1042']

strip

string | strip

Strips whitespace characters at the beginning and at the end of a string.

Code
{{ '  Invoice ' | strip }}
Output
Invoice

Remove custom characters

string | strip(chars: string)

Use the chars parameter to specify custom characters to be removed at the beginning and at the end of a string.

Code
{{ 'Credit Note' | strip(chars='e') }}
Output
Credit Not

strip_html

string | strip_html

Removes HTML tags and replaces adjacent whitespace characters with one space.

Code
{{ 'Red <b>bold</b>   shirt' | strip_html }}
Output
Red bold shirt

strip_newlines

string | strip_newlines

Removes all newline characters or line breaks from a string.

Code
{{ 'Kyoto
 Lisbon
 Buenos Aires' | strip_newlines }}
Output
Kyoto Lisbon Buenos Aires

title

string | title

Returns a title case version of the string.

Code
{{ 'invoice no 1042' | title }}
Output
Invoice No 1042

truncate

string | truncate(length: integer)

Returns a truncated copy of the string with the specified number of characters. If the string is longer than the specified length, whole words over the limit are cut. The default value is 255.

Code
{{ 'Invoice Number 1042' | truncate(length=10) }}
Output
Invoice…

Truncate and slice the last word

string | truncate(length: integer, kill_words: boolean)

Use the parameter kill_words to slice the word over the specified length instead of cutting it out whole. The default value is False.

Code
{{ 'Invoice Number 1042' | truncate(length=10, kill_words=True) }}
Output
Invoice Nu…

Truncate with a custom ending character

string | truncate(length: integer, end: string)

Use the end parameter to specify custom ending characters. The default value is an ellipsis sign ().

Code
{{ 'Invoice Number 1042' | truncate(length=10, end=':::') }}
Output
Invoice Nu:::

truncate_words

string | truncate_words(length: integer)

Returns a truncated copy of the string with a specified number of words.

Code
{{ 'Invoice Number 1042' | truncate_words(length=2) }}
Output
Invoice Number…

Replace the ellipsis with a custom symbol

string | truncate_words(length: integer, end: string)

Use the end parameter to specify custom ending characters. The default value is an ellipsis sign ().

Code
{{ 'Invoice Number 1042' | truncate_words(length=2, end=':::') }}
Output
Invoice Number:::

upper

string | upper

Converts all characters of a string to uppercase.

Code
{{ 'Invoice No 1042' | upper }}
Output
INVOICE NO 1042

url_encode

string | url_encode

Converts a string to URL-safe format by percent-encoding special characters. This ensures that the string can be included in a URL.

Code
https://acmeshop.com/orders/?name={{ 'Order #1042' | url_encode }}
Output
https://acmeshop.com/orders/name=Order%20%231042

urlize

string | urlize

Convert URLs in a string to clickable links.

Code
{{ 'View invoices at acmeshop.com/invoices' | urlize }}
Output
View invoices at <a href="https://acmeshop.com/invoices">acmeshop.com/invoices</a>

string | urlize(truncate_length: integer)

Use the truncate_length parameter to shorten the displayed link to a specified length. By default, the whole length is displayed.

Code
{{ 'View invoices at acmeshop.com/invoices' | urlize(truncate_length=12) }}
Output
View invoices at <a href="https://acmeshop.com/invoices">acmeshop.com…</a>

string | urlize(target: string)

Use the target parameter to add target attribute to the link. For example, target='_blank' can be used to open the target page in a new tab.

Code
{{ 'View invoices at acmeshop.com/invoices' | urlize(target='_blank') }}
Output
View invoices at <a href="https://acmeshop.com/invoices" target="_blank">acmeshop.com/invoices</a>