Tips for creating PDF's

Tips for creating PDF's using the process node

To create PDF or Word documents we use a Document Generator Engine that generates these documents based on whatever it is you created in the WEM User Interaction Editor. What you create in the editor, is being translated by WEM into HTML so it can be displayed in your browser. The Document Generator Engine uses this generated HTML as input to translate that into either PDF or Word.

To get the best results it helps a lot if you get a “feel” for the quirks that you might run into, and how to address them. BTW, the PDF-engine is slightly richer than the Word engine.

The WEM Master Template works with rather complex css for responsiveness and Bootstrap (remember: all WEM applications are based on Bootstrap). Which is great for browsers, but can be challenging for Documents, which do not support Bootstrap and responsiveness quite as well (as there is no need to).

For a specific project that requires it (and has a lot of document creation), we can create a specific PDF-MasterTemplate-CSS file to have a more optimized starting point, but this is not by default available.

So by default, the Document Generator uses the standard CSS definitions that are primarily used for the browser.

Especially when you use Bootstrap-elements (like columns, panels, alerts, table in bootstrap display mode) for Document output, you will run into issues.

For PDF and Word output, it is best to avoid Bootstrap elements. The Word Engine does not support most of those elements (no background colors, no rounded edges, no shading etc); PDF suffers mostly from the sizes, paddings and margins. It is best to use simple container elements (table with default display mode, not bootstrap; basic blocks, custom html in script blocks).

However, you CAN use the bootstrap elements, but then you'll need to tweak them.

1. Avoid running off page: use a standard html container (a div or a simple-not-bootstrap table ) with a width of "98%", this will help quite a lot!

2. Use custom style definitions for the elements. You will need to work with css elements and classes and override some of the standard settings of existing elements.

Most of the used html-elements have specific styling, based on bootstrap using variable settings and complex structures. To change font sizes or paddings or margins, you really need to know which html-element you want to tweak, and override the standard css-settings of that element with local custom css definitions.

WEM does not create "interactive" PDF documents. Instead you should display the values/fields as labels, where the result depends on the type of field: is it boolean, then yes/no, is it a multiselect based on concept set, then only those concepts selected will be displayed with their respective display names.

TIP: Using Chrome and the functionality to inspect element (right-click on a specific element) or view page source, will help you find out what the elements and their class-definitions are and how they are nested and structured, so you can use that information to tweak the settings with your custom bit of css. This is not possible on a generated document directly, so you need to have a normal User Interaction node in WEM with the same template contents as the pdf processnode.

I usually make template fragments, so I can create them once and then put them on the normal interaction node as well as in the PDF process node. I use the interaction node to investigate the html structure and tweak the elements. When I'm satisfied about the result in the PDF, I disconnect the interaction node (unless it has its use within the flow anyway).

Summarizing:

• You really need to try and understand the resulting html for your specific pdf, find out where it needs tweaking and then do the tweaking with inline css and html.

• Avoid using bootstrap elements, but if you do, place them within another container that has a width of 98% to avoid running off page. Or tweak them specifically.

• Define your own main container <div class="pdfcontainer"> here goes the rest of the document contents </div> you can define a style element on top <style>div.pdfcontainer table {width: 98%;}</style> and define the custom pdf styles for all used elements as a child or descendant of this div.pdfcontainer

• Be aware that the PDF cannot handle user interactions, so remove the Page size for paging on a datagrid or repeater and set panels to not collapsed.

• page breaking: a useful css-snippet for avoiding page-breaking (does not alway work, depends heavily on inner content):

{
    page-break-before: avoid; 
    page-break-after: avoid; 
    page-break-inside: avoid;
}
Possible values:
auto|always|avoid|left|right|initial|inherit

This content is also available in this forum post.