Generate and print completed Form entries from an HTML template, directly on the app, even while offline.
Use our standard Data Template syntax in your HTML to inject Form entry answers and other dynamic values.
NOTE: Word and Excel templates are NOT supported for app printing.
You must use HTML for your app printing template as shown below.
You can enable this feature by populating the HTML Template property in the App Printing area on the Settings page of a form screen.
Once populated, form entries can be printed in from the app the following ways.
- Via the ‘Upload and Print’ button that automatically appears on the app submission page of a Form that has an HTML template defined
- By the ‘Print’ button which is available when reviewing a completed Form entry in the app History area
- From the ‘Upload Form and Print’ user interaction available on Form Action buttons
- Through the ‘Print Form Entry’ interaction option available on most Screen types
Image Support
HTML <img> tags are supported to render images into your template. We support adding any images/sketches/signatures captured in your form as well as the company letterhead configured on the Organisation Setup page. We do not recommend using URLs to images on the internet as this will not work when the app is offline. We also support embedding base64 encoded images should you need to use other images than those mentioned above while also ensuring that this feature can be used offline.
You can specify exact dimensions for your images by using CSS for example:
<img src="..." style="width:200px; max-width:400px; height:150px; max-height: 300px">Below are a few examples of adding images from the different sources into your template:
Organisation Letterhead Example
The organisation letterhead image can be accessed simply by using the ORGLETTERHEAD built-in as the value of the src attribute.
<img src="{{%ORGLETTERHEAD}}" />Form Entry Image Example
For images captured in your form, you need to use the FILEURL formula. You also need to wrap the formula in {( and )} characters to indicate that it’s a formula and not plain text. {{dataname}} in the example below refers to the dataname of an image or sketch field within your form.
<img src="{( FILEURL( {{dataname}} ) )}" /> Base64 Embedded Image Example
Base64 encoding is an encoding scheme that allows you to store data (in this case image data) in text format. This will allow you to embed any image into your template without needing an active internet connection. You can convert images to base64 encoding using one of the many online tools available (such as https://www.base64-image.de/). This will produce a string that looks like data:image/png;base64, followed by a large number of characters that represent the image data. It’s important to place this whole string of characters into the src attribute exactly as generated for this to work.
<img src="data:image/png;base64,[Large String of Characters]" />
Repeats and Optional Sections
We support the use of {{!REPEATSTART}} and {{!REPEATEND}} as well as {{!HIDEIFSTART(condition)}} and {{!HIDEIFEND}} placeholders in your template in order to render repeating sections and show/hide sections of the output based on Form Entry fields and Formulae. We do not, however, support the use of {{!REPEATROW}} and {{!HIDEROWIF}} placeholders.
For Example:
{{!HIDEIFSTART( COUNT({{repeatPage}}) = 0) }}
<ul>
{{!REPEATSTART}}
<li> {{repeatField}} <li/>
{{!REPEATEND}}
<ul/>
{{!HIDEIFEND}}App Printing Sample
We’ve put together a simple to use Demo screen to showcase the App Printing Feature. Please follow the steps below to install this screen on your own account.
- Download and unzip the App Printing Sample.zip file below
- On the platform, Create a new Form Screen
- Click Import and make sure Replace All Existing Fields and Replace Settings is checked on the screen import dialogue.
- Select the Screen Import.xlsx file found in the zip downloaded in step1 as the import file.
- Place the newly imported screen in test mode for your user account or publish it so that you can access it from the mobile client.
- Log in to the app and fill out the Sample screen you’ve just created.
- Once you navigate to the last page, Tap the upload and print button.
- You should now see the native print screen with a preview of your generated document.
If you do not see the Upload & Print button on the last page of the form it’s likely that the screen was not imported correctly. Navigate to the Settings page of your screen and ensure the HTML template property is correctly populated. If it is blank, you can copy the contents of the Html Template.txt file included in the zip and paste it into the HTML Template property.
Below are a few screenshots of the process outlined above (click to enlarge). Happy Printing 🙂
