3. The designer workspace

The designer workspace

The workspace has five areas:

  1. Toolbar (top): file, edit, arrange, zoom and view commands, plus Preview PDF.
  2. Left panel: three tabs, Insert, Fields and Layers.
  3. Canvas (center): the page, with rulers, margin guides and bands.
  4. Right panel: two tabs, Properties and Report.
  5. Status bar (bottom): the current band and selection, the page size and the zoom level.

The toolbar

Hover over any button to see its name and shortcut.

The toolbar

Group Buttons What they do
File New blank report Start an empty Letter page (asks first if you have unsaved changes)
New from template… Open the Template gallery
Import PDF Rebuild a page of an existing PDF as a new design (Import a PDF)
Open template JSON Load a template .json file from your computer
Export template JSON Download the current template as a .json file
Save (Ctrl/Cmd+S) Hand the template to your application to store
Edit Undo / Redo Step backwards and forwards through your changes (up to 200 steps)
Cut, Copy, Paste, Duplicate, Delete Work on the selected elements
Align Align left edges, Align horizontal centers, Align right edges, Align top edges, Align vertical centers, Align bottom edges Line up two or more selected elements
Distribute horizontally / Distribute vertically Space three or more elements evenly
Match width / Match height Make the selected elements the same size as the one you selected last
Arrange Bring to front, Bring forward, Send backward, Send to back Change which element is drawn on top
Zoom Zoom out, Zoom (25%–400%), Zoom in, Fit page width Change the canvas magnification
View Show grid Show or hide the dot grid
Snap to grid and guides Snap moves and resizes to the grid and to other elements' edges and centers. Hold Alt while dragging to bypass
Show expressions instead of preview text ({ }) Show the raw bindings, like {{ shipTo.name | Northwind }}, instead of their preview text
Toggle dark theme Switch between light and dark
Preview PDF Render the PDF preview
Help Help (F1) Open this guide in a side panel, at the topic for what you are working on

Tip: The align commands line elements up with the edge of the whole selection. For example, Align left edges moves every element to the left-most edge. Match width and Match height copy the size of the element you Shift-clicked last.

The left panel

Insert tab

The Insert tab

The Insert tab holds the element palette: Text, Field, Image, Line, Rectangle, Ellipse, Barcode, QR Code, Checkbox, Table, Repeater, Page Break and Page No.

The Elements reference explains each element type. The Tips box at the bottom of the tab is a reminder of the main mouse and keyboard tricks.

Fields tab

The Fields tab

The Fields tab shows the data contract, the fields your system sends for this kind of document. Each field shows its type and its title, and you can hover over a field to see its description.

Drag this… …onto Creates
A text, number or date field a band A text element bound to the field, e.g. {{ shipTo.city | Columbus }}
A true/false field a band A Checkbox that is checked when the field is true
A list (array) a band A Table with one column per field of the list items
A field of a list item an existing table A new column in that table

When the data contract gives an example value, the new binding uses it as preview text automatically.

Note: If your application doesn't provide a data contract, the Fields tab shows Fields used in this template instead. You can type bindings by hand at any time.

Layers tab

The Layers tab

The Layers tab lists every element, grouped by band, in drawing order (the last one is on top).

The canvas

The canvas with rulers and bands

Selecting. Click an element to select it. Shift-click (or Ctrl/Cmd-click) adds or removes elements from the selection. Drag across an empty area to draw a selection box. Ctrl/Cmd+A selects everything. Esc clears the selection.

Moving and resizing.

The right panel

The Properties tab

The Properties tab for a text element

Shows the settings of the selected element. The sections depend on the element type (see the Elements reference), but most elements have:

With several elements selected, the panel shows the shared settings. A change applies to all of them (3 elements selected — edits apply to all).

With nothing selected, the Properties tab shows the selected band: its Height and, for page headers and footers, Print on.

Expression boxes check what you type as you type. An error message appears under the box when an expression can't be read, and Preview shows: … tells you what the designer preview will display.

The Report panel

The Report panel

Settings for the whole document:

Section Settings
Page Size (Letter, Legal, Tabloid, A3, A4, A5, B5, Custom), Orientation, Page width / Page height for custom sizes, Margins
Bands Turn each band on or off. Choose Print on for the page header and footer
Records One copy per: render one copy of the document per list item (batches; see chapter 13)
Document language Locale used for formatting numbers, dates and currency, and for choosing Chinese, Japanese and Korean fonts (see chapter 11)
Default text style Font, size and color used by every element that doesn't set its own
Named styles Reusable styles, such as "Label" or "Box heading". See Fonts and typography
Custom fonts Upload TTF/OTF… to add your own fonts
Document Name, PDF title, Author, Subject and Keywords (stored in the PDF's document properties)
Designer Units (Inches, Millimeters, Points) and Grid (pt). These affect only the designer, not the PDF

The status bar

From left to right:

Getting help inside the designer

Press F1, or click Help (F1) in the toolbar, to open this guide in a panel on the right side of the designer. It opens at the topic for what you are doing:

In the help panel:

The help is built into the designer and works without an internet connection. It is in English. In other designer languages, the panel shows the note Help is available in English.

Designer language and theme

The designer's own menus and labels are available in English, Español, Français, Deutsch, Português (Brasil), 简体中文, 繁體中文, 日本語 and 한국어. Your application chooses the language, usually from your browser or user profile settings. Changing the designer's language does not change your documents. For document language, see International documents.

Toggle dark theme switches the workspace between light and dark. The page itself always stays white, as it will print.

← 2. Quick start: your first packing slip4. Page setup and bands →