Flow Help
NovacuraRoadmap
6.11
6.11
  • What is Novacura Flow?
  • ๐Ÿ““System requirements
  • ๐ŸŽ‰Release notes
  • ๐ŸŽฃGetting started
    • Quick start
    • Develop your first app
  • ๐Ÿ”จInstallation and upgrade
    • Installation
    • New installation
    • Upgrade installation
    • Apply service pack
    • Add component
    • Windows authentication
    • Event log
    • FAQ
      • Monitoring
      • Troubleshooting
      • Migration tool
      • IIS user permission
      • Moving SQLite portal database
  • ๐ŸงฑSecurity
    • Server
      • Security settings
  • ๐Ÿ’กDevelopment
    • Studio
      • Installation and log in
        • OpenID connect
      • Applications
        • Menu
          • Inbox
        • Workflow
          • Start step
          • User step
            • Header
            • Static text
            • Labeled static text
            • Link
            • External app launcher
            • Image viewer
            • Text input
            • Numeric input
            • Date input
            • Time input
            • Check box input
            • Binary option input
            • List selection input
            • List multi-selection input
            • Menu selection input
            • Image selection input
            • Data grid
            • Calendar
            • List presentation
            • Camera input
            • File gallery
            • GPS location input
            • Signature capture input
            • Item creation sub task
            • Check list sub task
            • Verb sub task
          • Machine step
          • Decision step
          • Assertion step
          • Assignment
          • Table
          • Checkpoint
          • Split
          • Join
          • Script item
          • Log point
          • Annotation
          • End step
          • Included workflow
          • Offline resource
          • Public variables
          • Swimlanes
          • Offline workflow
            • Create an offline workflow
            • Create an offline resource
            • Create an offline seed inbox
            • Create an offline transactions
        • Subscribe
        • Server content
          • Workflow scheduler
          • Generate link
        • Elements
        • Problems
        • Find
        • Metadata panel
        • Version panel
        • Navigation
        • Test bench
        • Application package
          • Get started
      • Environment
        • Users
        • Roles
        • Connectors
        • Properties
        • Languages
        • System events
        • Active directory sync
        • License
        • Devices
        • Branding
        • Reports
      • Monitoring
        • Tasks
        • Applications
        • Help requests
      • Connectors
        • Business systems
          • Database
          • IFS Applications
          • Infor M3
            • M3 Infor API
            • Infor M3 REST
          • Maximo Generic
          • SAP
            • SAP BAPI
              • Basic API
                • BAPI: ZNCFLOW_APPLICATION_COMPONENT
                • BAPI: BAPI_MONITOR_GETLIST
                • BAPI: BAPI_INTERFACE_GETDOCU
                • BAPI: RFC_GET_FUNCTION_INTERFACE
                • BAPI: ZNCFLOW_DDIF_FIELDINFO_GET
          • Oracle Primavera
          • Microsoft Dynamics AX
          • Microsoft Dynamics CRM
          • Microsoft Active Directory
          • Microsoft SharePoint 2013
            • Generic operations
              • Custom list
                • Attachments
                • Create new item
                • Create new item, with field values
                • Delete item
                • Get items by query
                • List all items
                • List fields of items
                • Update item field
              • Document library
                • Check in/out file
                • File management
                • Create sub folder
                • Upload/download
              • Tasks
                • Attachments
                • Predecessors
                • Task information
                • Update task
                • Create new subtask
                • Create new task
              • User operations
                • Group operations
                • Get user by ID
                • Get user by login name
                • List users
        • Communication
          • Email
          • Web page submit
          • FTP
            • Server Operations
            • Directory operations
            • Download Operations
            • File Operations
            • Upload operations
          • SFTP
            • Directory operations
            • Download operations
            • File operations
            • Upload operations
          • Modbus
            • Read operations
            • Write operations
          • External Oauth 2.0 provider
          • Siox
          • REST service
            • REST Project Tool
              • Global output
              • Global parameters
              • Authorization schemes
              • Model transform
              • Enumerations
              • Models
                • Custom model member
              • Operations
                • Parameters
                • Outputs
              • Getting started
          • Web service
            • Example
              • Webservice example: Connector to Microsoft Dynamics AX
        • Printing
          • BarTender 2016
            • Print
            • Manually select
            • Print from BTXML script
            • Print from BTXML script
            • List printers
          • NiceLabel
          • Html to PDF
        • Utility
          • Flow environment
          • Table Operations
          • Custom .NET
          • Google API
          • Generate Xml Data
          • Generate text
          • File System
            • Directory operations
            • File operations
            • Zip operations
      • FlowScript
        • Variables
        • Operators
        • Functions
          • Text functions
          • Number functions
          • Date functions
          • Advanced functions
        • Table
          • Table functions
        • Programs
        • Formats
        • Script examples
        • AD sync scripting
    • Portal 2
      • Getting started
      • General
        • Add pages and portlets
        • Edit pages
        • Navigation
        • Style
        • Settings
          • List of values management
          • Presentation mode
      • Portlets
        • Chart portlets
          • Column chart
          • Line chart
          • Pie chart
        • Data tree
        • Document viewer
        • Filter
        • Html table
        • KPI portlets
          • KPI card
          • Speedometer
        • Record viewer
        • Table
        • Text
        • Common configuration
    • Portal
      • Get started
      • Options
        • Settings
        • List of values management
        • Global variables management
        • Content access management
        • Translations management
        • Import/export
      • Portlets
        • Table
          • Database source
          • Workflow source
        • Record viewer
        • Process overview
        • Iframe
        • Inbox
        • News viewer
        • Document tree
        • Document list
        • Document viewer
        • Generic document viewer
        • Generic document viewer URL
        • Generic document viewer
        • Filter
        • HTML
        • Text
        • Data visualizer card
        • Data visualizer navigator
        • Visual planning
          • Gantt chart
          • Kanban
          • Resource bucket
          • Scheduler
        • Map
      • Portal Push
      • Icons
  • ๐Ÿ“ฑClients
    • Android legacy client
    • iOS client
    • Windows 10 client
    • Web client
    • Windows CE client
  • โ“FAQ
    • How do i find which version of Flow i am running?
  • ๐Ÿ“งContact
Powered by GitBook
On this page
  • Connector Output
  • General Tips & Tricks
  • Settings
  • File Name
  • Append to an existing PDF
  • Margins
  • Page Size
  • Manual Page Size
  • Page Orientation
  • Images / Signatures
  • HTML
  • Controlling the layout
  • Styling / CSS
  • Page breaks
  • Headers, footers and watermarks
  • Magic tags
  • Layout Examples
  • Document Skeleton
  • Style Sheet
  • Header and Footer
  • HTML table from flow record
  • HTML table from flow table
  • Adding Fonts
  • Reference
  • DTP Point
  • File Record

Was this helpful?

  1. Development
  2. Studio
  3. Connectors
  4. Printing

Html to PDF

PreviousNiceLabelNextUtility

Last updated 4 years ago

Was this helpful?

Use the PDF connector to create PDF files in your workflow. The connector uses Hypertext Markup Language (HTML) to define the layout of your PDF pages and fully supports using .

Connector Output

General Tips & Tricks

Pro Tip: Create a simple workflow with a PDF connector and a user step. In the user step, add a file gallery with the generated PDF document(s) and use the workflow for designing and debugging your page layouts.

Settings

This chapter describes the available settings in the PDF connector.

File Name

Append to an existing PDF

Margins

Page Size

Manual Page Size

Note:

Page Orientation

Choose between Portrait and Landscape orientation. The default orientation is Portrait.

Images / Signatures

Overriding file names

In order to be able to differentiate between the images/signatures in the HTML code, you might need to override the filename component of the file records and give them unique and identifiable file names prior to passing them to the PDF connector. The image below shows a file name being overridden in an assignment step.

<img src=your_file_name.jpg height=40>

Supported image formats

The following image formats are supported by the connector:

  • BMP

  • GIF (with optional transparency)

  • PNG (with optional transparency)

  • JPEG

  • TIFF (with optional transparency)

HTML

Controlling the layout

Styling / CSS

<!-- Example background gradient -->
<body style="background-color: #333; 
  background-gradient: #707; 
  background-gradient-angle: 60; 
  margin: 0;">

Learning HTML and CSS is out of scope of this documentation. However if you have issues getting your document layout look as you expect - the best bet is to simplify the code and make sure you are not using any syntax feature outside of the supported specifications (CSS Level 2 and HTML 4.01). Keep it simple.

Page breaks

With the default values there are no rules defined to transfer html-blocks or words to the next page. The page break will simply happen when the page runs out of space (which might result in text being cut through the middle):

Using td { page-break-inside: avoid; } - words located on the bottom of a page will be transferred to the new page without getting split. The same goes for th, p, span and for any text in any other tags:

With table { page-break-inside: avoid; } - if a table row does not fit on the current page, then the whole row will be transferred to the next page. If the row height is larger than the whole page height, it doesnโ€™t make sense to transfer it and the value of page-break-inside will be ignored.

Known cosmetic issues

If the page-break-inside=auto has been set on the table and page-break-inside=avoid has been set on the cell, then an empty part of table cell can be rendered at the end of page:

If page-break-inside=avoid has been set on the table and the row is bigger than the rest of page but will fit on the next page - it will be transferred to the next page and a lot of space will be left empty on the previous one:

Headers, footers and watermarks

An HTML element with the CSS property position: fixed will be rendered on every page and can therefore be used as headers/footers or watermarks.

Important: These elements will ignore the page margins, so if you need to fit a 50px high header on your pages and want a 20px high margin to the page contents, you need to update the page top margin to 70px to make room for your page header.

Example header and footer CSS code:

.header {
    position: fixed;
    left: 20px;
    top: 20px;
}

.footer {
    position: fixed;
    left: 20px;
    top: 750px;
}

Example HTML document using the header and footer:

<body>
    <div class="header">
        logo
    </div>
    <div class="footer">
        disclaimer
    </div>

    <p>
        page content...
...

Magic tags

Enabling magic tags

To enable parsing of the tags, you just need to add the line [_ENABLE_MAGIC_TAGS_] in the HTML section of the connector settings:

[_ENABLE_MAGIC_TAGS_]
<html>
<!-- Your page layout goes here -->
</html>

Using magic tags to write CSS code

In order to convert your CSS code to be usable by the connector:

  1. Replace all left curly brackets "{" with "[_CBL_]"

  2. Replace all right curly brackets "}" with "[_CBR_]"

This is how the converted CSS code from the header/footer example above will look like:

.header [_CBL_]
    position: fixed;
    left: 20px;
    top: 20px;
[_CBR_]

.footer [_CBL_]
    position: fixed;
    left: 20px;
    top: 750px;
[_CBR_]

Layout Examples

Document Skeleton


[_ENABLE_MAGIC_TAGS_]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" dir="ltr">


<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    {pdf_stylesheet}

</head>


<body>

    {pdf_header}

    {pdf_footer}

    <h1>Heading</h1>

    <table class="ContentTable" id="1">

        {content_table_1}

    </table>


    <table class="ListTable" cellspacing="0" cellpadding="0">

        {list_table}

    </table>


    <table class="CheckListTable">

        {self_control_table_2}

    </table>

</body>


</html>

Style Sheet

return ''
&'    <style>'
&'      body [_CBL_]'
&'          font-size:12px;'
&'          color:#000000;'
&'          font-family: sans-serif;'
&'      [_CBR_]'

&'      h1 [_CBL_]'
&'          margin:0px;'
&'          padding-top:20px;'
&'          padding-bottom:0px;'
&'      [_CBR_]'

&'      div [_CBL_]'
&'          display:block;'
&'      [_CBR_]'

&'      td [_CBL_]'
&'          page-break-inside: avoid;'
&'      [_CBR_]'

&'      table [_CBL_]'
&'          page-break-inside: avoid;'
&'          border-collapse: collapse;'
&'      [_CBR_]'

&'      .header [_CBL_]'
&'          position:fixed;'
&'          height: 45px;'
&'          left: 50px;' 
&'          top: 30px;'
&'      [_CBR_]'

&'      .footer [_CBL_]'
&'          position: fixed;'
&'          left: 50px;'
&'          top: 800px;'
&'      [_CBR_]'

&'      #title [_CBL_]'
&'          font-size: 28px;'
&'      [_CBR_]'

&'      .ContentTable [_CBL_]'
&'          width:100%;'
&'      [_CBR_]'

&'      .ContentTable th [_CBL_]'
&'          text-align: left;'
&'          padding: 2px 2px 2px 2px;'
&'      [_CBR_]'

&'      .ContentTable td [_CBL_]'
&'          text-align: left;'
&'          padding: 2px 2px 2px 2px;'
&'      [_CBR_]'

&'      .ListTable [_CBL_]'
&'          width:100%;'
&'      [_CBR_]'

&'      .ListTable th [_CBL_]'
&'          border:1px solid #666666;'
&'          font-weight: bold;'
&'          font-style: normal;'
&'          text-decoration: none;'
&'          color: #ffffff;'
&'          background-color: #333333;'
&'      [_CBR_]'

&'      .ListTable td [_CBL_]'
&'          border:1px solid #666666;'
&'          font-style: normal;'
&'          text-decoration: none;'
&'          color: #000000;'
&'      [_CBR_]'

&'      .ListTable th, .listTable td [_CBL_]'
&'          margin: 0px;'
&'          padding: 5px 5px 5px 5px;'
&'      [_CBR_]'

&'      .ListTable th, .listTable tr.tableRowHead td [_CBL_]'
&'          text-align: left;'
&'          background-color: #333333;'
&'          color: #ffffff;'
&'      [_CBR_]'

&'      .ListTable td.empty_dataset [_CBL_]'
&'          padding-top: 40px;'
&'          padding-bottom: 40px;'
&'      [_CBR_]'

&'      tr.altrow td [_CBL_]'
&'          background-color: #FFFFFF;'
&'      [_CBR_]'

&'    </style>';

Header and Footer

return '<div class="header"><img src="company_logo.png" alt="" /></div>';
return '<div class="footer">Sample footer text</div>';

HTML table from flow record

let infoRec = First(infoTable);
let html = ''
&'      <tr>'
&'          <th>Info 1:</th>'
&'          <th>Info 2:</th>'
&'          <th>Info 3:</th>'
&'          <th>Info 4:</th>'
&'      </tr>'
&'      <tr>'
&'          <td>'&infoRec.info1&'</td>'
&'          <td>'&infoRec.info2&'</td>'
&'          <td>'&infoRec.info3&'</td>'
&'          <td>'&infoRec.info4&'</td>'
&'      </tr>'
&'      <tr>'
&'          <th>Info 5:</th>'
&'          <th>Info 6:</th>'
&'          <th>Info 7:</th>'
&'          <td rowspan="2"></td>'
&'      </tr>'
&'      <tr>'
&'          <td>'&infoRec.info5&'</td>'
&'          <td>'&infoRec.info6&'</td>'
&'          <td>'&infoRec.info7&'</td>'
&'      </tr>';
return html;

HTML table from flow table

Code referred to as list_table in the document skeleton. Here we use checkbox symbols from the Wingdings font to render good looking checkboxes in the final PDF document.

let html = '';
let cbSize = '20';

// Add the table header row:
set html = html
&'      <tr>'
&'          <th style="text-align: left; padding-top: 5px; padding-right: 0px; padding-left: 10px; padding-bottom: 5px;">Information:</th>'
&'          <th style="text-align: center; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px;">Yes</th>'
&'          <th style="text-align: center; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px;">No</th>'
&'          <th style="text-align: left; padding-top: 5px; padding-right: 0px; padding-left: 10px; padding-bottom: 5px;">Comment:</th>'
&'      </tr>';

// Iterate through the SQL table rows
let counter = 0;
for row in listTable {
   let cbYes = 'o';
   if row.yes = 1 {
       set cbYes = 'รพ';
   }
   
   let cbNo = 'o';
   if row.no = 1 {
       set cbNo = 'รพ';
   }
   
    counter = counter + 1;
    let evenRow = ' class="altrow"';
    if (Floor(counter/2) < counter/2) {
       set evenRow = '';
    }

   if row.header = 1 {
      set counter = 0;
      set html = html
      &'      <tr>'
      &'          <td style="text-align: left; font-weight: bold; padding-top: 15px; padding-right: 0px; padding-left: 10px; padding-bottom: 0px;">'
      &'              '&row.information&'</td>'
      &'          <td style="text-align: center; font-weight: bold; padding-top: 5px; padding-right: 5px; padding-left: 10px; padding-bottom: 5px;">'
      &'          </td>'
      &'          <td style="text-align: center; font-weight: bold; padding-top: 5px; padding-right: 5px; padding-left: 10px; padding-bottom: 5px;">'
      &'          </td>'
      &'          <td style="text-align: right; font-weight: normal; padding-top: 18px; padding-right: 5px; padding-left: 10px; padding-bottom: 0px;">'
      &'              '&row.comment&'</td>'
      &'      </tr>';
   }
   else {
      set html = html
      &'      <tr'&evenRow&'>'
      &'          <td style="text-align: left; font-weight: normal; padding-top: 5px; padding-right: 0px; padding-left: 10px; padding-bottom: 5px;">'
      &'              '&row.information&'</td>'
      &'          <td style="text-align: center; font-weight: normal; font-family: Wingdings; font-size: '&cbSize&'px; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px;">'
      &'              '&cbYes&'</td>'
      &'          <td style="text-align: center; font-weight: normal; font-family: Wingdings; font-size: '&cbSize&'px; padding-top: 5px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px;">'
      &'              '&cbNo&'</td>'
      &'          <td style="text-align: left; font-weight: normal; padding-top: 5px; padding-right: 0px; padding-left: 10px; padding-bottom: 5px;">'
      &'              '&row.comment&'</td>'
      &'      </tr>';
   }
}

return html;

Adding Fonts

The connector will be able to use fonts installed on the machine hosting the connector.

To install a font in Windows; right-click the .ttf-file and select "Install", then restart the Flow Server.

To specify the font face in HTML, add the font-family style attribute to your HTML element or CSS:

font-family: 'DengXian Light';

Reference

DTP Point

1 DTP Point = 1/72 inches = 25.4/72 mm = 0.3527 mm

File Record

/* FlowScript for a file record */
let fileRec = [filename: 'mySignature1.png', data: mySignatureRecord.data];
return fileRec;

The output from the connector is a standard .

Write as simple as possible by hand: You will run into problems if you use code taken straight from WYSIWYG HTML editors. Gain some basic knowledge of how to code and using and you will thank yourself later. Also it's great fun

In most use cases, you want to take control over the in your document using the CSS property.

In order to enable CSS for your document, head to the .

Try to structure your workflow in a way so that you build your html document in modules. This is especially useful when you are designing complex documents with several parts. To achieve modularity, you can for example write your CSS code in a , your header code in another script-step and so on. Then in your connector HTML settings, you just end up with the document skeleton. An example of this can be found in the .

Another good practice is to use one machine step per distinct document section (if you build a complex document) and then supply the previous PDF document (file record) as input parameter for the next PDF task (see ).

This string defines the filename-key value of the target .

The connector optionally takes a file record containing a PDF file as an input variable. If suppied, the new page(s) created in the current machine step will be appended to the existing PDF file. The target variable will contain the merged PDF file as a standard .

To keep the file name from the previous PDF step, just re-use the filename value from the previous PDF :

The margin sizes in .

The default setting for page size is A4-format. The page size selector lets you choose from the most common page sizes. The page size can also be defined .

It's possible to set a manual page size in . This setting will override any selection made in the selection drop down menu and you need to clear any values the Width (pts) and Height (pts) to revert back to using the selection menu.

The total page width in = the supplied width + Left + Right

The total page height in (excluding the page contents) = the supplied height + Top + Bottom

If you need to insert images or in your PDF document, you need to make sure to have them available in your workflow as .

Signatures from the provider is by default a file record with some extra fields ("mimeType" and "size") and are supported by the PDF connector as is.

The Images / Signatures field takes either a or a of file records.

To position your image/signature in the document, the tag is used:

The connector supports the .

The document layout is defined using HTML. It's recommended to keep the code as simple as possible and build the layout using a bottom-up approach. If you are new to HTML, visit . However if you use the generated code directly you will get disappointed as there are some important aspects to keep in mind. Most importantly, you need to use percentages instead of absolute values for width. Keep the total width of your columns at about 95%.

The connector supports the , so you can use cascading style sheets to format your PDF documents. Even if you are creating a simple page layout, you will probably still want to use CSS for inside your HTML elements (such as table rows and/or cells).

In addition, there is also support for gradients on backgrounds and :

Note: Since both and syntax uses , the connector leverages a concept called to distinguish CSS from FlowScript. Hence you need to get familiar with these tags in order to be able to use CSS in your layouts.

The CSS property is used by the connector to control how page breaks are rendered. Two values are supported: auto (default) and avoid.

Note: Plain CSS used for clarity. You will need to replace the curly brackets with in your connector markup code.

Magic Tags are a connector specific tag system which enables the usage of both and CSS in the section of the connector settings. This section will walk you through how to enable Magic Tags parsing and how to use them with CSS in your page layouts.

Sample document skeleton including style sheet, header and footer which are defined in in the workflow:

Sample -formatted CSS code defined in a . The output variable name pdf_stylesheet is used and then referred to in the above. Note that here we include the <style /> tags which were excluded in the document skeleton.

Header FlowScript code, referred to as pdf_header in the :

Footer FlowScript code, referred to as pdf_footer in the :

Code referred to as checklist_table in the :

on Wikipedia

A file record is a with two fields: filename and data.

๐Ÿ’ก
signature capture input
HTML IMG
HTML 4.01 specification
WordHtml
rounded corners
page-break-inside
script steps
DTP points
file record
๐Ÿ™‚
HTML Tables
CSS style sheets
HTML
page-break-inside
page breaks
CSS Section
script-step
Layout Examples section
Append to an existing PDF
file record
file record
file record
DTP points
manually
DTP points
Page Size
Page Size
DTP Points
Margin
Margin
DTP Points
Margin
Margin
flow signatures
file records
CSS Level 2 Specification
controlling page breaks
FlowScript
CSS
curly brackets
Magic Tags
Magic Tags
FlowScript
HTML
script step
MagicTag
document skeleton
document skeleton
document skeleton
document skeleton
FlowScript
file record
Adding a table containing images to the Images/signatures input box.
Combining several file records directly in the Images/signatures input box.
table
flow record