Assessment Framework Styling Tools for PDF

Description

The Assessment Framework can be configured to produce a PDF document (replica of the report) that users can download or print. This PDF is produced by the report logicnet and any custom PDF stylesheets added by the user. Tools to aid in the styling of the final PDF are available by changing the following in Project Settings to YES.

PDF Styling Tools

When you run an application in TEST mode the system displays additional support tools on screen to make the PDF styling process more efficient. The system does NOT display these elements when the application runs in production mode from a URL or package launcher.

Show HTML Link

With the Show HTML Link option checked in the Designer, the runtime TEST displays a link to the HTML page generated by the specific run of the LogicNets application. You can download this file and use it in generic CSS tools to help create and modify the desired CSS settings.

Show Upload and Convert

With Show Upload and Convert option checked in the Designer, the runtime TEST shows a File Upload function that will receive any HTML file. Pressing the CONVERT button applies the designated CSS files to the HTML file and output a PDF. With both the CSS file open in the Designer in one window and the TEST run open in a second window, the Designer can easily edit the CSS, convert an example or control HTML file, and verify the desired styling effects quickly, without having to restart the whole application.

Note that the above tools are only generated when running the create PDF part in TEST mode.

• To hide these choices navigate to the Framework settings and set Show PDF styling tools in test mode to No.
• To hide these choices temporarily on any given screen, use F12 Developer tools,  locate the DIV called pdf-help and add display:none, or paste in .pdf_help {display:none} into the CSS file in-line. 
• To remove the choices for all TEST runs, paste the same CSS into your custom CSS file for the application.

For more information, go to the create pdf part definition, and/or download the example project.

PDF CSS Syntax

In general, the stylesheet(s) applied to the PDF follow the same syntax as for normal HTML CSS but there are some variations. For more details of the general possibilities of the Prince PDF converter and required syntax, see https://www.princexml.com/.

Tips & Tricks

Below are some pitfalls we have learned to avoid when styling PDF documents. Please reply with any others you encounter and want to share with us!

• [Excerpt from Prince documentation] Care needs to be taken with inline-block elements, because Prince cannot split them over several pages.
• You can control headers and footers on the first and subsequent pages of the PDF to include text, images, page numbers, etc. 
  For an example of all these in use, add a Standard ASF Framework application to your Designer, and inspect the PDF CSS and first logicnet in the report folder.
• PrincePDF has a feature called flow that enables the Designer to move content held in a DIV from the main body of the text to a header, footer, etc.
  The DIV must be placed at the top of the report body being converted to PDF and it can be "flowed" from there (placing the DIV at the foot of the report body will not be successful).  For an example of flow in use, add a Standard ASF Framework application to your Designer, and inspect the PDF CSS and first logicnet in the report folder.
• Breaking long words without spaces (e.g. email addresses, URLs, etc.) in small spaces (like table columns) can be achieved using the soft-break tag  <WBR> or ​