Flow Help
NovacuraRoadmap
Flow Classic Help
Flow Classic Help
  • What is Novacura Flow?
  • 📓System requirements
  • Release information
    • Main Flow releases
      • Release notes 6.13
      • Release notes 6.14
      • Release notes 6.15
    • Flow service packs
      • 6.10
        • 6.10.35
      • 6.11
      • 6.12
        • 6.12.19
        • 6.12.20
      • 6.13
        • 6.13.7
        • 6.13.8
        • 6.13.9
        • 6.13.10
        • 6.13.11
        • 6.13.12
        • 6.13.13
        • 6.13.14
        • 6.13.15
        • 6.13.16
        • 6.13.17
      • 6.14
        • 6.14.1
        • 6.14.2
        • 6.14.3
        • 6.14.4
        • 6.14.5
        • 6.14.6
        • 6.14.7
        • 6.14.8
        • 6.14.9
        • 6.14.10
        • 6.14.11
        • 6.14.12
        • 6.14.13
        • 6.14.14
      • 6.15
        • Server
          • 6.15.1
          • 6.15.2
          • 6.15.3
          • 6.15.4
          • 6.15.5
          • 6.15.6
          • 6.15.7
          • 6.15.8
          • 6.15.9
          • 6.15.10
          • 6.15.12
          • 6.15.13
          • 6.15.14
          • 6.15.15
          • 6.15.16
          • 6.15.17
        • Studio
          • 6.15.1
          • 6.15.2
          • 6.15.3
          • 6.15.4
          • 6.15.5
          • 6.15.6
          • 6.15.7
          • 6.15.8
          • 6.15.10
          • 6.15.11
          • 6.15.12
          • 6.15.13
        • Installer
          • 6.15.1
          • 6.15.2
          • 6.15.6
    • Connector services
      • IFS OData Connector
        • 2.1.33
        • 2.1.29
        • 2.1.28
        • 2.1.27
        • 2.1.26
        • 2.1.25
        • 2.1.24
        • 2.1.23
        • 2.1.22
        • 2.1.21
        • 2.1.20
        • 2.1.19
        • Earlier releases
          • 2.1.18
          • 2.1.17
          • 2.1.16
          • 2.1.15
          • 2.1.14
          • 2.1.13
          • 2.1.12
      • SFTP Connector
        • 2.1.0
      • M3 Rest Connector
        • 2.1.4
        • 2.1.2
      • File System Connector
        • 2.1.3
        • 2.1.2
        • 2.1.1
        • 2.0.0
      • Microsoft Active Directory
        • 2.1.3
    • Android client
    • iOS client
    • Portal 2
      • 2020.13.2
      • 2020.13.3
      • 2020.13.4
      • 2020.13.5
      • 2020.14
      • 2020.14.1
      • 2020.14.2
      • 2020.14.3
      • 2020.14.4
      • 2023.1
      • 2023.2
      • 2023.3
      • 2023.4
      • 2024.1
      • 2024.2
      • 2024.3
      • 2024.4
      • 2025.1
      • 2025.2
    • Web client
      • 1.1
      • 1.2
      • 1.3
      • 1.4
      • 1.5
      • 1.6
      • 1.7
      • 1.8
      • 1.9
      • 1.10
      • 1.11
      • 1.12
      • 1.13 and up - Change log
    • Integration Engine
      • 2024-10-08
      • 2024-11-26
      • 2024-11-12
      • 2024-12-10
      • 2025-01-13
      • 2025-03-05
      • 2025-03-27
  • 🎣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
    • Performance Guidelines
    • FlowScript
      • Variables
      • Operators
      • Functions
        • Text functions
          • Chr
          • DecodeText
          • Guid
          • InStr
          • IsNull
          • Left
          • Len
          • Lower
          • Mid
          • Split
          • RegexMatch
          • RegexMatches
          • RegexReplace
          • Replace
          • Right
          • Trim
          • URLEncode/URLDecode
          • Upper
        • Number functions
          • Ceil
          • Floor
          • Format
          • IsNaN
          • IsNumber
          • Max
          • Min
          • Pow
          • Round
          • Str
          • Maths
            • Abs
            • Acos
            • Asin
            • Atan
            • Cos
            • Cosh
            • Sin
            • Sinh
            • Tan
            • Tanh
            • ToDegrees
          • Val
          • Random
        • Date functions
          • Date
          • Format
          • Now
        • DateTime module
        • JSON module
        • Other
          • Base64DecodeText
          • Base64Encode
          • Case/When/Then
          • Default
          • Empty
          • Group by
          • In
          • Inner Join
          • Non-Boolean values
      • Table
        • All
        • Any
        • Count
        • CSVFill
        • Eval
        • First
        • FirstOrDefault
        • FirstOrEmpty
        • Last
        • Skip
        • Sum
        • Take
        • XMLFill
        • Table queries
      • Programs
      • Formats
      • Script examples
        • SQL Join equivalent
      • AD sync scripting
    • Studio
      • Installation and log in
        • OpenID Connect
      • Applications
        • Menu
          • Inbox
            • Public variables
        • 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
            • Data grid
            • Calendar
            • Image selection input
            • 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
          • Event
          • Checkpoint
          • Split
          • Join
          • Script item
          • Log point
          • Annotation
          • End step
          • Included workflow - fragments
          • Offline resource
          • Swimlanes
          • Offline workflow
            • Create an offline workflow
            • Create an offline resource
            • Create an offline seed inbox
            • Create offline transactions
          • Source Code Editor
        • 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
    • Portal 2
      • Getting started
      • General
        • Add pages and portlets
        • Edit pages
        • Navigation
        • Style
        • Settings
          • Global Variables
          • List of values management
          • Time offset
          • Presentation mode
      • Portlets
        • Basic
          • Data tree
          • Document viewer
          • Filter
          • HTML Advanced
          • HTML table
          • Record viewer
          • Table
          • Text
        • Workflow
          • Inbox
          • Workflow
        • KPI
          • KPI card
          • Speedometer
        • Visual planning
          • Gantt
          • Kanban
          • Map
          • Scheduler
        • Chart portlets
          • Bar chart
          • Column chart
          • Line chart
          • Pie chart
        • Common configuration
          • Visual planning input data
      • Portal Push Notifications
    • 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
      • Icons
    • Integration Engine
      • Get Started
        • Set up Flow 6 Server connection
        • Create an integration
          • Webhook trigger
            • Try the webhook
          • Schedule trigger
        • Turn on diagnostics
        • Add data processing
        • Inspect history and retry execution
        • Monitor all executions
  • 🔌CONNECTORS
    • Overview
    • Installation
      • System Requirements
      • Install
        • Windows Service
      • First-time Setup
      • Tuning performance
    • Areas
      • Business systems
        • Database
          • Oracle
          • SQL Server
        • IFS Applications
          • IFS OData
            • Authentication in IFS Cloud
            • Obtaining end-point info from IFS Cloud
            • Configuring IFS OData connector
            • Configuring databases
            • Operations
              • Create
              • Read
              • Update
              • Delete
              • Get by key
              • Actions
              • Functions
              • Batch
              • Custom request
          • IFS Applications 9/10
        • Infor M3
          • M3 Infor API
          • Infor M3 REST
            • Obtaining end-point info from Infor ION API
            • Configuring Infor M3 REST connector
            • Technical Details
        • 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
            • Getting started
            • Operations
              • Parameters
                • Computed parameters
              • Outputs
            • Models
              • Custom model member
            • Model transform
            • Global output
            • Global parameters
            • Authorization schemes
            • Enumerations
            • Tools
        • Web service
          • Example
            • Webservice example: Connector to Microsoft Dynamics AX
        • OPC UA Connector
      • Printing
        • BarTender 2016
          • Print
          • Manually select
          • Print from BTXML script
          • Print from BTXML script
          • List printers
        • NiceLabel
        • Html to PDF
      • Utility
        • Flow environment
        • Custom .NET
        • Google API
        • Generate Xml Data
        • Generate text
        • File System
          • Connector service
            • Configuration
            • Operations
            • Flow Integration
            • API Access
            • Triggers
          • Embedded connector
            • Configuration
            • Directory operations
            • File operations
            • Zip operations
  • 📱Clients
    • Mobile clients
      • Get started
      • Miscellaneous
      • Mobile Device Management
        • Microsoft Endpoint Manager
      • Offline
      • Scanning
    • Web client
      • Get started
      • Miscellaneous
      • Offline
      • Scanning
      • Self hosting
    • Windows 10 client
    • Android legacy client
    • iOS legacy client
    • Web legacy 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
  • Operation / Output
  • Design
  • Page Layout
  • Manual Page Layout
  • Page Margins
  • Images / Signatures
  • Controlling the layout
  • CSS / Styling
  • Images
  • Flow Variables
  • Table Iterator
  • Designtime Tag
  • Barcodes
  • Manual Page Break
  • CSS Property: page-break-inside
  • Headers, footers and watermarks
  • Adding Fonts
  • Reference
  • DTP Point
  • File Record

Was this helpful?

  1. CONNECTORS
  2. Areas
  3. 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

  • Do not use borders on table elements, instead specify borders on the table cells (<th/>, <td/>). This will prevent unwanted borders from being displayed when a page-break occurs inside a table.

Settings

This chapter describes the available settings in the PDF connector.

Operation / Output

Design

This is the default operation mode. The output PDF will contain the pages generated from your HTML/CSS code.

Design and...

Merge

Use this operation mode to merge two PDF file records to a single PDF file. Select a file record containing a PDF file on the PDF 1 and PDF 2 tabs.

If you want to use specific pages from a PDF, uncheck the "Use all pages" checkbox and enter the page numbers in the Start-/End Page fields. These also supports Flow Script.

If nothing is entered in the Start-page input field, the first page will be used.

If nothing is entered in the End-page field, the last page will be used and if a page number higher than the total number of pages is entered - the last page will also be used.

Output PDF File Name

Design

HTML/CSS Editor

Preview Layout

Tip: While editing your layouts it can be really helpful to set up the default pdf viewer application next to the Flow Studio application window.

Page Layout

Page Size

Page Orientation

Choose between Portrait (default) and Landscape orientation.

Manual Page Layout

Note:

Page Margins

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)

Controlling the layout

CSS / Styling

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

Images

Image from Base64 encoded data

<img src="data:image/png;base64,iV...CC" height="40" />

Image from URL

<img src="http://www.myserver.com/images/myimage.jpg" width="100" />

Image from NAS

<img src="\\myserver\myshare\myimage.jpg" width="80" />

Image from Flow Server hard drive

<img src="d:\images\myimage.jpg" height="50" />

If the file cannot be accessed during runtime, a red cross will be displayed on the PDF file in place of the image. Therefore Base64 is the most "secure way" of adding images because the image data will be stored within the HTML code.

Flow Variables

To insert a flow variable anywhere in your HTML code, type a starting curly bracket to display a list of available flow variables:

Table Iterator

You can easily iterate flow tables in the HTML code.

With the cursor placed just before the HTML code you want to repeat for each row in the flow table: Press Ctrl+Space to trigger the context-sensitive autocomplete menu and select the <iterate /> tag:

Move the ending tag (</iterate>) after the HTML code block you wish to repeat.

This is how it would look for a HTML table:

The next step is to select the flow table. Place the cursor in between the quotation marks for the table attribute and press Ctrl+Space to display a list of available flow tables. Use the arrow keys on the keyboard to select the table variable and then press enter to insert it into the HTML code.

Next let's replace our static column values with values from the flow table. Place the cursor where you want the column data to appear and press Ctrl+Space to display the available table columns. And as before use the arrow keys and enter to select the variable.

Change the "preview" attribute to a suitable number which represents the real world data and use the Preview Layout button to see how your document will be rendered.

Designtime Tag

The Designtime tag can be used during the design process if you quickly want to see how a block of html code would be rendered if you were to add more of it. It is very similar to using the <iterate /> tag - but all contents will be removed during runtime.

Barcodes

There is built-in support for adding barcodes straight from your HTML code. To use it, add a <barcode /> tag using the autocomplete menu (Ctrl+Space).

Note that the cursor needs to be outside any <iterate /> and <designtime /> tags for the main context menu to work - it's context based.

To select barcode type; move the cursor inside the quotation marks on the type="" attribute and press Ctrl+Space.

We'll then set the value of the barcode. To see a valid example value for the selected barcode type, place the cursor inside the barcode tag value and press Ctrl+Space:

You can define the size of the generated barcode using the height and width attributes. If you need to change the barcode color, place the cursor after the last attribute in the <barcode /> tag, type a space and then press Ctrl+Space to display attributes which can be added:

Use the Preview Layout button to preview any changes you make.

Let's insert a flow variable as the barcode value: Remove the example value if you inserted any and then type a starting curly bracket to display a list of available flow variables:

If you want to display the barcode inside an iterator this is also possible. Now when it's been created, you can easily cut the whole tag and paste it inside a <td></td> tag for example. Then use the autocomplete menu to insert a table column variable:

Manual Page Break

CSS Property: page-break-inside

Two values are supported: auto (default) and avoid.

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 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:

Tip: To prevent unwanted borders to be displayed on the rest of the page after a page-break - disable borders on the table element and only use borders on the table cells.

Headers, footers and watermarks

An HTML element with the CSS property position: fixed; will be rendered on every page (up until any usage of the special <pagebreak /> tag) and can therefore be used as headers/footers or watermarks.

Important: These elements will ignore the page margins. 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;
}

Note:

Example HTML document using the header and footer:

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

    <p>
        page content...
...

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 and use the preview button frequently. 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. Also set the border-collapse property to collapse borders.

In this operation mode, you can select to prepend and/or append a PDF file record to your designed PDF file. The prepend/append file works exactly as in the operation mode.

This string defines the filename-key value of the target and is required to have a value.

The connector supports the .

The document layout is defined using HTML/CSS. 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. Another great resource is .

More information about the HTML/CSS editor features can be found in the chapter.

Clicking the Preview Layout button will create a PDF file using designtime data and open it in your default PDF viewer application. On most computers, the default browser will open PDF files. If you do not have any PDF viewer installed you download and install for free.

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 .

You can define a manual page size in . If enabled, these settings will override any selections made in the selection drop down menus. Note that you will most probably have to adjust your if you are defining a small layout.

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

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

The margin sizes in . Note that you will need to adjust the default values to fit your selected page size. Use the to find out the correct settings for your specific layout.

If you need to insert images or in your PDF document which are retrieved from within your workflow - you need to make sure to have them available 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:

For other ways of adding images to your design you can checkout the section under .

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 :

Learning HTML and CSS is out of scope of this documentation. However if you have issues getting your document layout to look as you expect - try to simplify the code and make sure you are not using any syntax feature outside of the supported specifications ( and ). Keep it simple and try to make use of CSS classes to separate your styling from your content.

Here are some example methods of adding images to your design in addition to using images from flow as described in the setting section.

Tip: You can easily find which can encode images to Base64 string.

To insert a page break anywhere in your HTML code, use the autocomplete menu to select the <pagebreak /> tag. Now the HTML code coming after this tag will appear on a new page. Note that any "fixed" elements such as will be cleared after the page break and therefore you need to redefine any header/footer HTML after the <pagebreak /> tag.

The CSS property is used by the connector to control how page breaks are rendered for certain html elements.

on Wikipedia

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

🔌
HTML 4.01 specification
WordHtml
W3Schools
Acrobat Reader
signature capture input
HTML IMG
rounded corners
CSS Level 2
HTML 4.01
tools online
page-break-inside
DTP points
file record
🙂
HTML Tables
CSS style sheets
HTML
page-break-inside
page breaks
merge
file record
Controlling the layout
manually
DTP points
Page Layout
page margins
DTP Points
Margin
Margin
DTP Points
Margin
Margin
DTP points
preview feature
flow signatures
file records
Images
Controlling the layout
CSS Level 2 Specification
controlling page breaks
file records
Images / Signatures
header and footer
FlowScript
file record
table
flow record
Html2Pdf Task Editor
The default PDF viewer placed next to the Flow Studio window
Adding a table containing images to the Images/signatures input box.
Combining several file records directly in the Images/signatures input box.
The CSS Stylesheet Editor
Selecting the flow table to iterate
Selecting the table column variable
The designtime tag is available in the autocomplete menu (Ctrl+Space)
Selecting the <barcode /> tag
Selecting barcode type
Selecting an example value using autocomplete
Selecting the textcolor attribute
Selecting a flow variable as value for the barcode