Displaying Form Data in Custom PDF Templates

PDF Templates allows users to control the appearance of the PDF documents generated after submitting forms. As Miracle Mobile uses HTML and CSS for creating these templates, anyone familiar with these can easily create their own custom designs for the output PDF file.

To create a PDF template, you will need the identifiers of the controls representing the fields you wish to display in the PDF. You can get these by opening the form in Page Designer and clicking on controls’ properties. For instance, in the example below, the value for federal exemptions will be retrieved from the textbox with the identifier FedExempVal.

Form data in PDF in MiracleStudio

 

Form data in PDF in MiracleStudio

 

To add the HTML source for your template, here is what you should do.

  1. Click on ‘PDF Templates’ in the left panel in MiracleStudio.
  2. Type a name for your template.
  3. Select the HTML file you created to upload it. If you intend to include a CSS file to further control the appearance of the emailed PDF form, bundle it with the HTML file in a zipped folder.
  4. Click ‘Save’.

displaying-form-data-in-pdf-3

 

There are two ways for using PDF templates in MiracleStudio. You can:

  • Add the template at form-level
  • Specify the template in the sub-trigger of a control

The first option limits the form to a single template. On the other hand, the second option allows you to select multiple templates by adding multiple triggers, to further customize the form data for each recipient receives. For example, an order form filled in the Miracle App can have three different PDFs generated simultaneously, on three different formats:  an invoice to the Customer, a purchase order to the Accounts Department, and a dispatch note to the Inventory Manager.

To add a template at form level, follow the procedure detailed below.

  1. Click ‘Pages & Forms’ in the left panel.
  2. Hover over the form you wish to configure and click on the ‘Edit Page’ button.
  3. Click ‘Advanced’ on the bottom right corner of the page.
  4. Scroll to ‘PDF Template’ and select a template from the list.
  5. Scroll up and click ‘Save’.

pdf-template-in-advanced

 

To add multiple templates to a form, follow these steps.

  1. Click ‘Pages & Forms’ in the left panel.
  2. Hover over the form you wish to configure and click on the ‘Open Page Designer’ button.
  3. Select the button users will tap to submit their data.
  4. Click on the ‘Actions/Triggers’ tab in the right panel. Click the ‘+Action’ button to configure an action. Select ‘Button Click’ then click ‘Save’.
  5. Hover over the new action and click on the ‘Add A Sub Trigger’ button. Select ‘SubmitData’ in Type and ‘Server’ in Domain. Click ‘Save’ to continue.
  6. Hover over the new trigger and click on the ‘Add A Sub Trigger’ button. Select ‘EmailPDF’ in Type and ‘Server’ in Domain.
  7. Click the ‘Data’ tab at the top and select from the PDF Template list. Add an email recipient and fill in relevant fields. Click ‘Save’.

To add more templates, repeat steps 6 and 7 for as many times as required.

pdf-template-in-triggers