2. Quick start: your first packing slip

In about 10 minutes you will start from the built-in Packing Slip template, rebrand it, add a field, add a message that only appears when something is backordered, preview the PDF, and produce a real PDF with data.

Before you start: open the screen in your application that hosts the Report Designer. Your administrator can tell you where it is. The designer looks like the screenshot in the Introduction.

Step 1: Start from a template

1. In the toolbar, click New from template… (the icon next to New blank report).
2. In the gallery, click Shipping in the category list on the left, or type packing in Search templates.
3. Click the Packing Slip card.

The packing slip opens on the canvas. If you had unsaved changes, the designer asks before replacing them.

Note: On the canvas, bindings (data placeholders) are highlighted in bright blue and show their preview text. In the PDF they print in the element's own color. Click Show expressions instead of preview text ({ } in the toolbar) to see which texts are bindings and which are static.

Step 2: Look at the bands

The page is divided into labeled bands:

• Page Header holds the logo, company name, the "Packing Slip" title and the order-number barcode. It repeats on every page.
• Report Header holds the order date, ship date, PO, ship-via, tracking boxes and the ship-to and sold-to addresses. It prints once, on page 1.
• Body holds the Shipped items table. It grows with the number of lines and continues onto more pages if needed.
• Report Footer holds cartons, weight, notes, the returns QR code and the thank-you message. It prints once, after the table ends.
• Page Footer holds contact details and Page {{page}} of {{pages}}. It repeats at the bottom of every page.

You'll learn more about bands in Page setup and bands.

Step 3: Change the title

1. Click the Packing Slip title in the page header. Handles appear around it, and the Properties panel on the right shows its settings.
2. In Properties → Text, replace Packing Slip with Packing List.
3. While the title is still selected, go to the Style section, set Text color to your brand color, and set Font size (pt) to 22.

The canvas updates as you type. Every change can be undone with Undo (Ctrl/Cmd+Z).

Step 4: Replace the logo

The logo box is bound to {{ company.logo }}, so your system can send a different logo per warehouse or brand. To use one fixed logo instead:

1. Click the logo box (top left).
2. In Properties → Image, click Embed image… and choose a PNG or JPEG file.
3. Set Fit to Contain so the whole logo shows without distortion.

Tip: An embedded image is stored inside the template. Keep logos small (under 200 KB). A 600×200 pixel PNG is plenty.

Step 5: Add a field from the data contract

The company address block has no country line yet. Add one:

1. Open the Fields tab on the left. It lists every field your system sends for packing slips.
2. Expand company and find country.
3. Drag country onto the page header, just below the company's city line.
4. A new text element appears, bound to {{ company.country }}. Resize it to match the address lines above. On the toolbar, use Align left edges with both elements selected (Shift-click) to line them up.

Note: If your application provides no data contract, the Fields tab lists the fields the template already uses. You can always type a binding by hand. Insert a Text element and type {{ company.country | USA }}.

Step 6: Add a backorder notice that appears only when needed

1. In the Insert tab, click Text. A text element is added to the selected band. Drag it into the Report Footer, above the notes box.

2. In Properties → Text, type:

   Some items are on backorder and will ship separately at no extra charge.

3. Set Text color to red and turn on Bold.

4. Scroll to Behavior → Visible if and type:

   sum(lines, 'backordered') > 0

Now the notice prints only when at least one line has a backordered quantity. Visible if takes an expression without braces.

Step 7: Preview the PDF

Click Preview PDF (top right). The designer renders a real PDF with the preview text and shows it in a window:

• The header shows the page count and render time, for example 1 page · 120 ms.
• Download PDF saves the preview.
• Refresh renders again after more changes.
• The preview carries a light PREVIEW watermark: it is for checking the layout. The final documents come from the render service. See Licensing.

Note: In the preview, Visible if conditions count as true so you can see every element, and tables show a few placeholder rows. The real data decides what prints. See Preview, export and rendering.

Step 8: Save or export the template

• Click Save (or press Ctrl/Cmd+S). This hands the template to your application, which stores it. Where it is stored depends on your application.
• Click Export template JSON to download the template as a .json file, for example to send it to a colleague or to the render service. Open template JSON loads such a file back.

Step 9: Render a real PDF with data

Your system normally does this for you. To try it yourself, use the sample data that comes with the template (packages/designer/templates/packing-slip/sample-data.json in the product package) and the render service's address (ask your administrator; here it is http://localhost:8080):

curl -sS -X POST http://localhost:8080/api/v1/render \
  -H 'Content-Type: application/json' \
  -d "{\"template\": $(cat Packing_Slip.json), \"data\": $(cat sample-data.json)}" \
  -o packing-slip.pdf

Open packing-slip.pdf. The preview text has been replaced by the sample customer, the table has real lines, and the backorder notice appears only if the data has backorders.

What's next

• Take a tour of every button and panel: The designer workspace.
• Learn how headers, footers and page breaks behave: Page setup and bands.
• Learn to write bindings: Data binding and expressions.