This article is also available in:
How it works

If you don't have a template linked to your process, when you click the printer icon on a process instance, the browser's default print dialog will be shown.

To customize it, you can attach an HTML file to a process set up under Process Settings. Once you have uploaded a template, if you click the printer icon, a PDF will automatically be downloaded with the structure defined in the file.



The template should be an HTML file with the desired structure (this would require basic knowledge of HTML).

Even though it's an HTML file, we use the iText library so it's possible that not all HTML features are supported.

Shortcut: Design on Excel first

What we usually do is to define the structure in Excel. This is particularly helpful because you can have anyone do that even if some of them don't have any technical experience. Then we use this website to convert the Excel into HTML and we finally add the desired fields and make the necessary adjustments. To clean up the final HTML and make sure everything works, we use this tool.

Setting up your template

To embed field values you have to use mustache format: A Mustache tag begins with two opening braces {{ and ends with two closing braces }}.
For instance, if you had a field called 'Name' you can include the value of that field like this:

<div>
{{ Name }}
</div>


You can design the template using HTML to include whichever form fields you'd like (all of them, only some, even fields that are set as hidden). To do so, you have to include the exact name of your field in between mustaches, e.g. {{ fieldName }}.

Keep in mind that Signature fields can’t be included in print templates.

We also have some special labels to insert additional information in your template:

{{-Identifier-}} : ID of the process instance
{{-Initiator-}} : Email of the user who launched the process instance
{{-Initiator_name-}} : Full name of the user who launched the process instance
{{-Initiation_date-}} : Format is yyyy/mm/dd
{{-Comments-}} : Includes all comments in that process instance

To define the layout of the PDF, we structure it as an HTML table, defining rows and columns. Here is an extract of a row as an example:

<tr>
<td class="borderL" height="24" align="left" valign="bottom">
<font color="#000000"><br /></font>
</td>
<td colspan="2" rowspan="2" align="right" valign="middle">
<font color="#000000">Effective Date:</font>
</td>
<td class="grayBackground" rowspan="2" align="center" valign="middle" colspan="2">
<font size="3" color="#000000">{{Effective Date}}</font>
</td>
<td colspan="2" rowspan="2" align="right" valign="middle">
<font color="#000000">Reference:</font>
</td>
<td class="grayBackground" rowspan="2" align="center" valign="middle" colspan="4">
<font size="3" color="#000000">{{-Identifier-}}</font>
</td>
<td class="borderR" align="left" valign="bottom">
<font color="#000000"><br /></font>
</td>
</tr>


You can add images, customize text style, add logos, tables, comments, etc.
Was this article helpful?
Thank you!