Makeen transform provides support for emailing form submissions as PDFs. The apps created in transform Studio come with a default HTML-based template for PDF output. You can view this by clicking on User Defined Settings, followed by htmlTemplate.


While you are welcome to use the default template, generating custom PDFs allows you to incorporate your branding in digital documents. To generate a branded PDF, you need to create an HTML Template. The platform’s HTML parser will run through the template, generating the final HTML output which is to be converted to PDF. Click here to learn how.

In this article, you will learn how our system parses the default HTML template.


Below is a snapshot of the PDF output of a simple form that collects a user’s basic personal information: First Name, Last Name, Date of Birth, and Picture.



This PDF output has the following major elements:

  • Header Row
  • Data Rows, with labels on the left and values on the right
  • Row Separator

This output is the result of using this default HTML template:


<table class="DataRepeater">

   <tr class="HeadingDataRow">

      <td class="HeadingLabel" colspan="2">Page Header</td>

   </tr>

   <tr class="FieldDataRow">

      <td class="FieldLabel">Label</td>

      <td class="FieldValue">Value</td>

   </tr>

   <tr class="RowSeparator"></tr>

</table>


Here's a breakdown of this code and how it is used by the platform’s parser.

<table class="DataRepeater">

The HTML parser will start from here. Anything that comes under the element with the CSS class ‘DataRepeater’ will be evaluated by HTML parser. The rest of the HTML document will be used as is, except a few elements which we will get to later.


<tr class="HeadingDataRow">

   <td class="HeadingLabel" colspan="2">Page Header</td>

</tr>

This section is used to dictate the style of the header row.

To create a header control:

  • Click on Pages & Forms.
  • Open a form in Page Designer.
  • Drag and drop a Label control onto the canvas.
  • From the control’s properties on the right, click on ‘Show as PDF Header’ to select it.


<tr class="FieldDataRow">

   <td class="FieldLabel">Label</td>

   <td class="FieldValue">Value</td>

</tr>

This section is used to define the style of the Data Row.

As per this example, the element with class ‘FieldLabel’ is used to describe a style for Label. Meanwhile, the element with class ‘FieldValue’ is used to describe a style for value. By value, we mean any value entered in the control.

To set a title for a control, select it in Page Designer. Next, from the control’s properties on the right, enter a title in the ‘Title shown in PDF’ property.


<tr class="RowSeparator"></tr>

This is the style for the Row Separator. The parser searches for this element in the template; if it’s present, the parser places this element after every row. In this case, the row separator is an empty ‘tr’ tag.


Note: In the example above, the HTML parser operates based on the keywords set in the CSS class. You can use any HTML element and CSS in the document as long as the CSS class is the same. For example, you can change the table’s layout to div. We will describe how you can provide your own template for a highly customizable PDFs in another section.


If you look at the default template in User Defined Settings, you will also see the following code:


<header class="PageHeader">

   <div class="LogoSection" required="false">

      <img src="" alt="logo" class="LogoImage"/>

   </div>

   <div class="PageTitle" required="true" style="display:inline;">Page Title</div>

</header>


Here’s a breakdown of how the parser analyzes this code.

<header class="PageHeader">

This marks the start of the header, i.e. element with the class ‘PageHeader’.


<div class="PageTitle" required="true" style="display:inline;">Page Title</div>

This line of code defines how and where the Page Display name would appear in the PDF. In this case, the text ‘Page Title’ will be replaced by the page’s display name.

To set a page’s display name:

  • Click on Pages & Forms in transform Studio.
  • Hover over a page in the list displayed until the Settings icon appears.
  • Click on the Settings icon.
  • Type a suitable title for the page in Display Name.  

NOTE: The element with the class=’PageTitle’ can only be added under the ‘PageHeader’ element. 


<img src="" alt="logo" class="LogoImage"/>

This line defines how and where the logo would appear in the PDF.

To set an image as a logo:

  • Upload the image you wish to use in Assets.
  • Open the page or form you wish to send as PDF in Page Designer.
  • Click on Actions/Triggers. Add an action and then click Save.
  • Click Add a Sub Trigger. Choose SendEmail as its type, and fill in any details you deem necessary.
  • Click the Add a Sub Trigger associated with the SendEmail trigger. Choose Email PDF as the type.
  • Click on the Data tab and choose the asset you added from the PDF Logo dropdown.


Need more help? Contact us at support@makeen.io


Next: Makeen transform’s HTML Parser