Document Handling and Templates

When to use document templates

If you are not planning to use different kinds of documents for the same document type or do not need in-depth changes (changes that can not be made in the resource setting), we recommend relying entirely on the configuration in the Resource Settings. If you want to use multiples of different document types for different cases, we recommend using the template option, where you can customize your template inside the Resource Editor.

How to use templates

You have two options for document templates:

1. Create your own templates from scratch.
2. Overwrite existing templates — though in this case, you can only have one active version per document type (e.g., one invoice template, one packing slip template).

If you need multiple versions, for example, for international use or to assign different templates to specific connectors: you’ll need to create templates.

How to create templates

You can create a template for any document type. Click here to create a template. When creating a template, choose the document type and, depending on your choice, define additional entities. Under "Template Resource", click on "Select" and, inside the Resource Editor path, select the template file you want to use. You can either create a new Twig file entirely or duplicate the default template Twig. Once created, you can assign your template to connectors and more. The Twig has to be changed or created before the creation of a template.

Styling Tips for Templates

Use Custom Fonts Inside Documents

You can use custom fonts in your templates by uploading the .ttf files to the fonts folder and referencing them in your css.

@font-face {
    font-family: "OpenSans";
    font-weight: normal;
    src: url('resource:/document/fonts/OpenSans-Regular.ttf');
    -fs-pdf-font-embed: embed;
    -fs-pdf-font-encoding: Identity-H;
}

Change Document Background Template

When generating a document, the dynamic content is printed over the background specified in the /documents/css/base.css file in your space. This template applies to all documents.

@page {
	background-image: url('resource:/document/images/document-background.pdf');
	padding: 0;

	/* Border of the Document */
	margin:  30mm 10mm 20mm 10mm;
	size: A4;
}

To customize the document, you can either change the path here or replace /document/images/document-background.pdf with your own template. You can also use different templates for the first page and subsequent pages by adding the @page:first selector to your base.css file. This will use the document-background.pdf for the following pages and the first-document-background.pdf for the first page.

@page {
	background-image: url('resource:/document/images/document-background.pdf');
	padding: 0;

	/* Border of the Document */
	margin:  30mm 10mm 20mm 10mm;
	size: A4;
}

@page:first {
	background-image: url('resource:/document/images/first-document-background.pdf');
}

Use Variables inside the Templates

You can use variables in your template files. All variables available in the respective context, along with their descriptions, are listed in the lower tab of the Resource Editor. Use twig syntax to render these variables.

Figure 1: The editor displays the variables available in the current context.