Prerequisites
- Installed and configured PDF Plugin on your Simplifier instance (you can find an Installation Guide in our Documentation). If the PDF Plugin is active it will be available in the plugin list overview:
- 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:
- Press the ‘+’-button
- Change the name of the template
- Save
As a result your template will be displayed in the template list. At this time, your template has some default content.
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.
The data send to the plugin by using the business object SF_PDF is always accessible as “data“. This may differ if you’re using a different way to trigger PDF generation!
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>
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;
}
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