xxPDF template elements

Overview

The Flow-FO Designer is a visual PDF builder that enables users to construct complex PDF documents through an intuitive drag-and-drop interface. The designer supports a wide variety of block types, advanced styling, rich data binding, conditional logic, and granular control over layout and export formatting.

All design elements are translated directly into XSL-FO, allowing standards-compliant PDF generation using compatible XSL-FO rendering engines.

Supported Block Types

Each block type maps to one or more XSL-FO elements and has a recommended minimum design size for optimal rendering.

Block Type XSL-FO Element(s) Minimum Size Description
text <fo:block> 120 × 48 px Static or dynamic text with data binding.
label <fo:block> 120 × 28 px Static label text (non-binding).
image <fo:external-graphic> 120 × 80 px Static or data-bound image such as logos or graphics.
table <fo:table>, <fo:table-header>, <fo:table-body>, <fo:table-footer> 240 × 72 px Displays tabular data with repeating rows, filtering, headers, and footers.
divider <fo:leader> 120 × 8 px Horizontal divider with configurable line style.
checkbox <fo:table> (layout) 120 × 28 px Interactive or display-only checkbox with label.
icon <fo:inline>, <fo:block> 48 × 48 px Displays an icon from the predefined PDS icon library.
barcode <fo:external-graphic> 96 × 56 px Generated barcode (Code128, EAN, etc.).
qrcode <fo:external-graphic> 96 × 56 px Generated QR code.
section <fo:table> (layout grid) 260 × 120 px Container for grouping blocks into columns; supports nested content.
field <fo:block>, <fo:inline> 120 × 40 px Form input field with optional label and data binding.
pagebreak <fo:block break-after="page"> 180 × 28 px Forces a page break.
spacer <fo:block> 120 × 16 px Adjustable vertical or horizontal spacing.
pagenumber <fo:page-number>, <fo:page-number-citation> 120 × 28 px Displays the current page number or total page count.
signature <fo:block> (bordered) 180 × 48 px Signature line or signature box.
chart <fo:block> + SVG or embedded image 280 × 200 px Dynamic chart (bar, line, pie, etc.) with data binding support.

Layout Regions

Every document consists of three layout regions that correspond directly to XSL-FO page regions.

Region XSL-FO Mapping Purpose Repeat Behavior
body <fo:region-body> Main document content Every page
header <fo:region-before> Sticky header area Every page or first page only
footer <fo:region-after> Sticky footer area Every page or first page only

Styling and Layout Properties

All blocks inherit or override styling through the FlowStyle interface.

Typography

Property Description
fontFamily Font family (e.g. Helvetica, Arial)
fontSize Font size (e.g. 12pt)
fontWeight Font weight (normal, bold, 700, etc.)
fontStyle Font style (normal, italic)
color Text color
textAlign left, center, right, justify

Spacing

Supported spacing properties include:

  • padding
  • paddingTop
  • paddingRight
  • paddingBottom
  • paddingLeft
  • margin
  • marginTop
  • marginRight
  • marginBottom
  • marginLeft
  • lineHeight

Borders and Shapes

Property Description
border Border shorthand
borderTop Top border
borderRight Right border
borderBottom Bottom border
borderLeft Left border
borderWidth Border width
borderStyle Border style
borderColor Border color
borderRadius Rounded corners
shapeStyle Rectangle, rounded, underline, dashed, dotted, double, capsule, circle, shadow, none

Sizing

Supported sizing properties:

  • width
  • height
  • minHeight
  • boxSizing (content-box, border-box)

Fill and Visual Effects

Property Description
backgroundColor Background fill color
opacity Transparency (0–1)
zIndex Layer stacking order

Text and Flex Behavior

Property Description
whiteSpace Text wrapping (normal, nowrap, pre)
wordBreak Mid-word breaking
overflowWrap Overflow handling
overflow Clipping (hidden, visible)
verticalAlign Top, middle, bottom
alignItems Cross-axis alignment for flex layouts

Data Binding and Conditional Logic

Flow-FO Designer supports powerful data-driven document generation.

Data Binding

bindingPath

Binds a block to a value using XPath-like notation.

{{/root/invoice/amount}}

repeatSourcePath

Allows tables and sections to iterate through collections.

Example:

/items

Conditional Visibility

Blocks can be displayed or hidden using one of the following visibility modes.

Mode Description
always Always visible
hideWhenBoundEmpty Hide when bound value is empty
hideWhenArrayEmpty Hide when repeat source is empty
hideWhenNumberNonZero Hide when value is not zero
hideWhenBooleanTrue Hide when value is true, 1, or yes
hideWhenNumberGte Hide when value is greater than or equal
hideWhenNumberLte Hide when value is less than or equal
hideWhenNumberEq Hide when value equals comparison
hideWhenNumberNe Hide when value does not equal comparison
custom Evaluate a custom XPath 1.0 expression

Data Formatting

Formatting options provide control over how values are rendered.

Value Types

Supported kinds include:

  • text
  • string
  • date
  • time
  • datetime
  • number

String Transformations

Supported transformations include:

  • Uppercase
  • Lowercase
  • Title Case
  • camelCase
  • PascalCase
  • snake_case
  • kebab-case

Date and Time Formatting

Supports:

Token Patterns

YYYY-MM-DD
DD/MM/YYYY
MMMM DD, YYYY

International Styles

  • full
  • long
  • medium
  • short

Number Formatting

Supported formats:

  • Decimal
  • Currency (ISO 4217)
  • Percent

Locale

Formatting is locale-aware using BCP 47 locale codes.

Examples:

  • en-US
  • de-DE
  • fr-FR
  • ja-JP

Privacy Controls (PII/PHI Masking)

The following block types support privacy masking:

  • text
  • label
  • field

Configuration

Property Description
maskPii Mask personally identifiable information
maskPhi Mask protected health information

Masking Strategies

Strategy Description
PARTIAL_MASK Obfuscates sensitive portions of the value
HASH Replaces the value with a hash
REDACT Completely removes or redacts the value

Table-Specific Features

Tables provide extensive configuration options for presentation, filtering, styling, and pagination.

Data and Visibility

Property Description
showHeader Display header row
repeatHeaderOnPage Repeat header after page breaks
showWhen Table visibility (always, repeatNotEmpty, custom)
rowFilter Filter rows using supported operators
headerPlacement Position header at top, bottom, left, or right

Row Filter Operators

Supported operators include:

  • eq
  • neq
  • gt
  • gte
  • lt
  • lte
  • between
  • in
  • notIn
  • contains
  • startsWith
  • endsWith
  • isEmpty
  • isNotEmpty

Layout and Pagination

Property Description
keepTogether Prevent table from splitting across pages when possible
breakBefore Force page or column break before the table
orphanRows Minimum rows at bottom of page
widowRows Minimum rows at top of next page

Supported breakBefore Values

  • auto
  • page
  • column
  • even-page
  • odd-page

Styling

Global table styling supports:

  • Header colors
  • Row colors
  • Alternating row stripes
  • Font size
  • Font weight
  • Uniform borders
  • Individual side borders
  • Border styles
  • Cell border suppression

Cell-Level Overrides

Tables support:

  • Individual cell styling
  • rowspan
  • colspan
  • Nested tables

Style Merge Modes

Mode Description
merge Cell styles override global styles
override Global styles override cell styles

Document and Page Settings

Global document configuration controls page layout.

Setting Options Description
pageSize A4, Letter, Custom Page dimensions
pageOrientation Portrait, Landscape Page orientation
minimumPageCount Integer Pads the document with blank pages if necessary

Additional Implementation Notes

Nesting Support

The following block types support nested content:

  • Sections
  • Tables
  • Charts (where applicable)
  • Other container-based components

Nested layouts enable the construction of sophisticated multi-column documents and reusable layout structures.

XSL-FO Export

All block definitions, styles, bindings, visibility rules, formatting options, and layout settings are translated directly into XSL-FO during export.

The generated output is compatible with standards-compliant XSL-FO rendering engines.

Extensibility

Flow-FO Designer is designed to be extensible.

The plugin architecture allows developers to introduce:

  • New block types
  • Custom data sources
  • Additional formatting options
  • Specialized rendering behavior
  • Organization-specific components

This architecture enables the designer to evolve without modifying the core application.