Create a PDF Template via Plugin

Written by Daniel
June 1, 2021

Prerequisites

  • A User Role with permissions to manage and generate template that is assigned to the user working with the PDF Plugin.
    • Manage Templates gives permission to create/edit and delete new PDF templates
    • Generate Templates gives permission to use the plugin for PDF generation. This permission has to be granted in order to create a PDF inside an application.

Step 1 – Create a new template

To create a new template simply follow these steps:

  1. Access the PDF Plugin’s UI by clicking on the ‘Plugins’ entry from the main menu and then double click on the entry ‘pdfPlugin’ in the plugin list overview (see screenshot above)
  2. Press the ‘+’-button
  3. Change the name of the template
  4. Save

As a result your template will be displayed in the template list. At this time, your template has some default content.

Please note that the template must be saved manually.

Step 2 – Create content

If your template is not expected to display dynamic data send from an application you can skip step 2.1.

2.1 Adding MockUp Data to the JSON Preview

Since the PDF plugin is designed to render data from applications, put in some dummy data that resemble data you’ll be using to generate this template.

Example:

{
  "data": [
    {
      "articleNumber": 124578,
      "price": "10,95 €",
      "title": "DummyArticle1",
      "available": true
    },
    {
      "articleNumber": 789456,
      "price": "21,50 €",
      "title": "DummyArticle2",
      "available": true
    },
    {
      "articleNumber": 613376,
      "price": "2,95 €",
      "title": "DummyArticle3",
      "available": false
    }
  ]
}

2.2 Define HTML content

A PDF template is build using HTML code to define what should be displayed and how it’s layouted. Values from the JSON data can be accessed using handlebars.

2.2.1 Body

The main part of the template should be in the body of the template. You can use HTML code to define the structure and refer to CSS classes for styling (see Step 2.3).

Example:

<h2> List of articles</h2>

<span>This is a list of articles.</span><br>
<span>The text is static content meaning it's rendered everytime the template is used to create a PDF</span>

<p>The following items are dynamic content meaning they're only rendered if the data is send to the PDF plugin when create a PDF</p>

<table>
    <!--This part of the table is static-->
    <tr class="tableHeader">
       <td>Article number</td>
       <td>Title</td>
       <td>Price</td>
    </tr>

    <!--This part of the table is dynamic-->
    <!--for every item in our JSON one row will be rendered-->
    {{#data}}

       <!--only if available == true of entry-->
       {{#available}}
          <tr>
             <!--the value of every item is used and rendered-->
             <td>{{articleNumber}}</td>
             <td>{{title}}</td>
             <td>{{price}}</td>
          </tr>
       {{/available}}
    {{/data}}
</table>

2.2.2 Header / Footer

If a header or footer should be rendered on every page of a PDF, you can define the content in those two tabs. Same as in the body you can use HTML and CSS to define the content.

There is currently one restricition: <!DOCTYPE html> must be inserted before any content!

Example:

<!DOCTYPE html> 
<hr> 
<span style="color: grey">My Company Name </span>

If you want to make your header/footer dynamic, i.e., display different content based on the current PDF page, you can use HTML scripts to extract the current page and display/hide the elements inside the header/footer. In this article, we show you how to achieve this: https://community.simplifier.io/knowledge/pdf-templates-make-the-header-footer-content-dynamic/

2.3 Styling your template

Using CSS you’re able to define the look and style of your template. You can also use inline style tags in your HTML (as seen in the example above).

Example:

table{
    width: 100%;
}

.tableHeader{
    background-color: #dedede;
}

The library used for rendering the template is not supporting CSS3 features!
The preview and the rendering don’t display the same result. Always test render your PDF.

Step 3 – Configurations for the PDF

The Server-Side Business Object ‘SF_PDF‘ has two functions: ‘generate‘ and ‘generateWithConfig‘.

If you simply want to show your data on a PDF, using the function ‘generate’ will be sufficient. However, if you want to add some configurations, like the page size or page orientation, use ‘generateWithConfig’.

‘GenerateWithConfig’ has an additional parameter: ‘configJSON’. In this parameter, you can set your configurations in JSON format.

Example:

var oConfig = {
    "orientation": "Landscape",
    "page-size": "A4",
    "margin-top": "1in",
    "margin-bottom": "1in",
    "margin-left": "1in",
    "margin-right": "1in",
    "footer-center": "[page] / [toPage]"
};

FAQ

Q: How can i prevent my table from beeing split in the middle of a row if it’s rendered on multiple pages?

A: Preventing a table from being torn apart can be done by using the following CSS.

table, tr, td, th, tbody, thead, tfoot{
    page-break-inside: avoid !important;
}

Q: How can i enforce a page break after a specific element?

A: Forcing a page break after a specific element is also done by using CSS. Copy and paste the following CSS into your template and add the class to the desired HTML element

.break-after{
    page-break-after: always;
}

Q: I want to have the number of pages inside the footer. How can i achieve this?

A: This can be done using functionality of WKHTMLTOPDF. Have a look at the documentation file linked and search for “Footers And Headers”. There’s an example you can simple copy and paste

Restrictions

PDF Plugin templates can not be part of a Simplifier transport and therefore have to be transported manually.

Tags:

Was this article helpful?

 
Related Articles