5. Elements reference
This chapter describes every element in the Insert tab and every setting in the Properties tab.
| Element | Use it for | Can grow? |
|---|---|---|
| Text | Labels, field values, paragraphs, addresses | Yes, with Stretch to fit content |
| Field | A text element pre-bound to a data field | Yes, as Text |
| Page No. | Page {{page}} of {{pages}} |
No |
| Image | Logos, signatures, product photos, hazmat diamonds | No |
| Line | Rules, dividers, signature lines | No |
| Rectangle | Boxes, form frames, shaded headings | No |
| Ellipse | Circles, stamps, badges | No |
| Barcode and QR Code | Order, item, location, tracking and SSCC barcodes | No |
| Checkbox | Freight terms, hazmat, yes/no fields | No |
| Table | Line items, any list of rows and columns | Yes, one row per item |
| Repeater | A free-form block repeated per item (cards, labels, pick lines with barcodes) | Yes, one block per item |
| Page Break | Force the following content onto a new page | n/a |
Settings every element has
Position & size
| Setting | Meaning |
|---|---|
| X, Y | Position of the top-left corner, measured from the top-left of the band (the page corner for the Background band) |
| W, H | Width and height |
| Rotation (degrees) | Rotates clockwise around the element's center. Use negative values for counter-clockwise. Rotated elements don't grow |
| Opacity (%) | 100 = solid, 0 = invisible. Use 10–20% for watermarks |
The name box at the top of the panel (Element name) is the label shown in the Layers tab. Give important elements names like "Ship-to address" so they are easy to find.
Behavior
| Setting | Meaning |
|---|---|
| Visible if | An expression. The element prints only when it is true. Empty means always. Example: hazmat |
| Link | A web address. Clicking the element in the PDF opens it. Allowed: https://…, http://…, mailto:… and tel:… links. Can contain bindings: https://track.example.com/{{ trackingNumber }} |
| Pinned (not pushed down by growing elements) | Report Header, Body and Report Footer only. Keeps the element at its designed position even when elements above it grow (see chapter 4) |
| Locked in the designer | Prevents moving or resizing the element by accident. It has no effect on the PDF |
At the bottom of the panel, ID: … shows the element's internal ID. Warnings in the preview refer to elements by this ID.
Text
The workhorse element. A text element can hold static text, bindings, or a mix of both:
Ship to: {{ shipTo.name | Northwind Retail #1187 }}Text settings
| Setting | Meaning |
|---|---|
| Text | The content. Press Enter for a new line. Use {{ … }} for data (see chapter 6) |
| Overflow | What happens when the text doesn't fit the box. See below |
| Min. size | With Shrink to fit, the smallest font size the text may shrink to (default 4 pt) |
| Stretch to fit content (can split across pages) | The box grows downward to fit all lines, and pushes the content below it down. Available in the Report Header, Body and Report Footer |
Overflow modes:
| Mode | Behavior | Good for |
|---|---|---|
| Wrap (default) | Breaks into lines at spaces. Lines that don't fit are cut off at the bottom of the box (unless Stretch is on) | Addresses, descriptions, notes |
| Clip (single line) | One line, cut off at the right edge | Codes in tight columns |
| Ellipsis (…) | One line, ending in "…" when too long | Item descriptions in narrow cells |
| Shrink to fit | Reduces the font size until the text fits (down to Min. size) | Customer names on labels, big headline numbers |
Style settings
These are in the Style section and apply to text, tables (as Table font) and the box of most elements.
| Setting | Meaning |
|---|---|
| Named style | Apply a reusable style defined on the Report tab (Named styles) |
| Font family | Bundled, custom or template fonts. The list is grouped into Latin, Greek & Cyrillic, Chinese, Japanese & Korean and Template fonts. Default font uses the report's default text style |
| Font size (pt) | 0.5–1000 pt. Body text is usually 8–10 pt, headings 12–24 pt |
| Bold, Italic, Underline, Strikethrough | Font styles |
| Text color | Any color. Type a hex value like #0f4c81 or use Pick a color |
| Align left, Center, Align right, Justify | Horizontal alignment. Justify stretches every line except the last one of each paragraph to the full width |
| Top, Middle, Bottom | Vertical alignment within the box |
| Line (line height) | Multiple of the font size; default 1.2 |
| Spacing (letter spacing) | Extra space between characters in points, e.g. 1 for spaced-out headings |
| Case | As typed, UPPERCASE, lowercase or Capitalize Words. Applied to the printed text, including data |
| Padding (pt) | Space between the box edge and the text, per side |
| Background | Box fill color |
| Borders | Each side (T, R, B, L) can have its own width, color and Solid / Dashed / Dotted style. Click a side to Edit the … border |
| Radius | Rounded corners (when all four sides have the same border) |
Tip: Draw form boxes with text borders instead of rectangles behind text. A text box with borders grows with its content, and the text and frame can't drift apart.
Field
A Field is a text element that starts out bound to a field. Click Field in the Insert tab to add {{field}}, then edit the text to the
right path, or drag the field from the Fields tab instead. Everything in Text applies.
Page No.
A text element preset to Page {{page}} of {{pages}}, right-aligned, 9 pt. Change the wording freely. For example, {{page}}/{{pages}} and
Seite {{page}} von {{pages}} both work.
Image
| Setting | Meaning |
|---|---|
| Source | A web address, an embedded image (shown as (embedded image)), or a binding such as {{ company.logo }}. Bindings let your system send a different image per document: a data URI, or a URL your administrator has allowed |
| Embed image… | Choose a PNG or JPEG from your computer. It is stored inside the template |
| Fit | Contain (whole image, keeps proportions; default), Cover (fills the box, may crop), Stretch (fills the box, may distort), Original size (each image pixel is printed at 96 dpi) |
Note: For security, the render service fetches images from web addresses only when your administrator allows the site. Embedded images and images sent in the data as data URIs always work. Very large images (over 25 megapixels) are skipped with a warning.
Example: a hazmat diamond only for dangerous goods. Add an image, embed the diamond PNG, and set Visible if to hazmat.
Line
A straight line from one end to the other. Drag either end on the canvas. Hold Shift to keep it horizontal or vertical.
| Setting | Meaning |
|---|---|
| Stroke | Color, Width (pt) and Solid / Dashed / Dotted |
Example: a signature line. Draw a horizontal line 2.5 in long with width 0.75 pt. Put a small text "Shipper signature / Date" under it.
Rectangle
| Setting | Meaning |
|---|---|
| Fill | Inside color (none = transparent) |
| Stroke | Outline color, width and dash style (none = no outline) |
| Radius | Rounded corners in points |
Use rectangles for shaded heading bars (dark Fill with white text on top) and fixed form frames.
Ellipse
Same settings as a rectangle, without Radius. Make W and H equal for a circle.
Barcode
| Setting | Meaning |
|---|---|
| Format | The symbology: Code 128, GS1-128, Code 39, Code 93, EAN-13, EAN-8, UPC-A, UPC-E, ITF-14, Interleaved 2 of 5, Codabar, QR Code, Data Matrix, GS1 Data Matrix, PDF417 or Aztec |
| Value | What to encode. Usually a binding, e.g. {{ bolNumber | BOL2026102001 }} |
| Bars | Bar color (default black) |
| Background | Background color (default transparent) |
| Human-readable text | Print the value under 1D barcodes |
| Quiet zone | Add the blank margin scanners need inside the box. Otherwise, leave space around the barcode yourself |
The barcode is scaled to fill its box exactly. See Barcodes and QR codes for which format to use, GS1-128/SSCC, check digits and sizing.
QR Code
A Barcode with Format set to QR Code, square by default. Use QR codes for URLs (returns portals, tracking pages) and for packing lots of data into a small space.
Checkbox
A small box that is checked when an expression is true. Bills of lading use them for freight terms, COD and hazmat.
| Setting | Meaning |
|---|---|
| Checked if | An expression. Examples: freightTerms == 'prepaid', hazmat, cod.amount > 0 |
| Mark | ✕ Cross (default), ✓ Check mark or ■ Filled |
| Box | Box outline width and color |
Example: freight charge terms on a BOL. Add three checkboxes labeled Prepaid, Collect and 3rd Party, with Checked if set to:
freightTerms == 'prepaid'
freightTerms == 'collect'
freightTerms == 'thirdParty'Note: In the designer preview, a checkbox is checked only when its expression is literally
true, because the preview has no data.
Table
Prints one row per item of a list, with optional header, footer (totals), grouping and subtotals. Tables have their own chapter: Tables.
Repeater
Repeats a free-form block of elements once per list item, stacked vertically. Use it when a table is too rigid, for example pick lines with barcodes or one label per carton. See Repeaters and labels.
Page Break
A dashed PAGE BREAK line. Content below it continues at the top of the next page. It works only in the Body band. See Page setup and bands.