• Resources
    • Documentation
    • Courses
    • Knowledge Base
    • FAQ
    • Forum
    • Changelog
    • Webinars and Videos
    • Blog
    • Swag Shop
  • Marketplace
  • Login
  • Resources
    • Documentation
    • Courses
    • Knowledge Base
    • FAQ
    • Forum
    • Changelog
    • Webinars and Videos
    • Blog
    • Swag Shop
  • Marketplace
  • Login
home/Knowledge Base/Plugins/PDF Templates: make the Header/Footer content dynamic

PDF Templates: make the Header/Footer content dynamic

28 views 1

Written by Jennifer
February 6, 2023

In this article, I’m going to show you how you can display dynamic content in the header/footer section of your PDF template.

Dynamic content in this context means that you can display different content in the header/footer, depending on the current page of the PDF.

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 – Set up the PDF Template

First, we need a PDF template that displays data on multiple pages.

To learn how to create a PDF template in detail, check out this article where we describe this process in detail: https://community.simplifier.io/knowledge/create-a-pdf-template-via-plugin/

In this example, we are going to use the PDF template from the FeedbackApp that we are building in the Simplifier Basics Course. You can find the data from the Body/CSS/JSON section below.

In the JSON part, we have added two fields to the JSON object, ‘materialnumber’ and ‘date’. Also, to achieve a PDF that requires multiple pages, just add some more objects to the array ‘data’ (for example, by copy/pasting the already existing objects).

Body

<h2>Feedback</h2>
<table>
<tr>
<th>Date</th>
<th>Vote</th>
</tr>
{{#data}}
<tr><td>{{date}}</td><td>{{vote}}</td></tr>
{{/data}}
</table>

CSS

table{
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
td, th{
border: 1px solid black;
text-align: start;
padding: 0.25rem;
}
table * tr:nth-child(odd) {
background-color: #f3f3f3;
}
table * tr:first-child{
background-color: lightgrey;
}
@media print {
thead {display: table-row-group;}
}

JSON

{
"materialnumber": "123456789",
"date": "2023-02-06",
"data": [
{
"date": "2020-09-07 15:20:45",
"id": 1,
"vote": 2
},
{
"date": "2020-11-25 11:02:25",
"id": 2,
"vote": 3
},
{
"date": "2021-03-08 08:55:52",
"id": 3,
"vote": 4
},
{
"date": "2021-03-08 08:57:12",
"id": 4,
"vote": 4
},
{
"date": "2021-04-06 12:37:22",
"id": 5,
"vote": 3
},
{
"date": "2021-04-06 12:38:34",
"id": 6,
"vote": 4
},
{
"date": "2021-04-06 13:15:09",
"id": 7,
"vote": 2
}
]}

Create a new template, insert the respective data and save.

Step 2 – Add Header/Footer

To display a header/footer on each generated PDF page, simply insert HTML code into the header/footer section. Note: you have to append <!DOCTYPE html>  as the first element in the code, for example:

<!DOCTYPE html>
<p>This is the header!</p>

or

<!DOCTYPE html>
<p>This is the footer!</p>

 

Just like in the body section, you can access the data from the JSON object and display it in the header/footer:

<!DOCTYPE html>
<p>Material Number: {{materialnumber}}</p>
<p>Date: {{date}}</p>

 

At this point, the same data will be displayed as header/footer of all PDF pages.

Step 3 – Set Header/Footer based on the Page Number

Now, let’s assume we want to display both material number and date on the first page of the PDF, but on the following pages, we only want to display the material number.

To achieve this, we have to work with a script inside the HTML header:

Header

<!DOCTYPE html>
<html><head><script>
function initHeader() {
var vars = {};
var query_strings_from_url = document.location.search.substring(1).split('&');
for (var query_string in query_strings_from_url) {
if (query_strings_from_url.hasOwnProperty(query_string)) {
var temp_var = query_strings_from_url[query_string].split('=', 2);
vars[temp_var[0]] = decodeURI(temp_var[1]);
}
}
var elementOnlyFirstPage = document.getElementsByClassName('first')[0];
if (vars['page'] != "1"){
elementOnlyFirstPage.hidden = true
}
}
</script></head><body style="border:0; margin:0;" onload="initHeader()">
<br><br>
<p class="always">
Material Number: {{materialnumber}}
</p>
<p class="first">
Date: {{date}}
</p>
</body></html>

In the body part of the HTML code, we define two elements with two classes: one that is always visible (class ‘always’), and one that is only visible on the first page (class ‘first’).

In the function initHeader(), we extract the current page number and make it accessible via vars[‘page’]. We also extract the element that should only be visible on the first page via its class.

Then, we check the current page. If it’s the first one, we set the property hidden of the element to false, otherwise to true.

 

With this approach, you can control the content of your header/footer depending on the current PDF page.

Tags:pagepdfUIheadertemplatefooterhtmlscriptdynamic

Was this article helpful?

1 Yes  No
Related Articles
  • Authentication trough another window
  • Converting Text to Speech with the Google TTS Connector
  • REST: Use a CSRF Token and a Cookie to authorize Requests
  • Use the Adobe PDF Embed API in your Simplifier Application
  • Simplifer setup with recommended environment using docker-compose
  • Logs and Monitoring in Simplifier
Leave A Comment Cancel reply

You must be logged in to post a comment.

Latest Articles
  • Authentication trough another window
  • Converting Text to Speech with the Google TTS Connector
  • PDF Templates: make the Header/Footer content dynamic
  • Contact | Imprint | Privacy | © 2022 Simplifier AG. All Rights Reserved.

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.