12. Template gallery

The gallery has 20 ready-made templates for common supply-chain and WMS documents. Each one is a complete, professional design with realistic preview text, a data contract (so the Fields tab is filled in) and sample data for testing. Start from the closest one and adapt it. This is much faster than starting from a blank page.

  1. Click New from template… in the toolbar.
  2. Pick a category on the left (Shipping, Orders, Procurement, Inbound, Warehouse, Inventory, Labels), or All templates.
  3. Or type in Search templates. The search looks in names, descriptions and tags, such as SSCC, HS code or Japanese.
  4. Click a card. The template replaces the current design. If you have unsaved changes, you are asked first: Replace the current design with "…"? Unsaved changes will be lost.

The template gallery

The new design is a copy. Changing it doesn't change the gallery template, so you can always start over from the original.

Note: Template names and descriptions in the gallery appear in the designer's language when a translation is available.

The templates

Shipping

Preview Template
Bill of Lading (VICS) Bill of Lading (VICS) (bill-of-lading)
VICS straight bill of lading: shipper, consignee and third-party bill-to, carrier and PRO barcode, customer order and carrier information tables, freight terms and signatures.
Paper: Letter portrait · Document language: en-US
Highlights: Page header with Code 128 BOL barcode and page X of Y; freight-terms checkboxes; customer order and carrier information tables with grand totals; signature blocks in the report footer.
Packing Slip Packing Slip (packing-slip)
Carton contents with ordered, shipped and backordered quantities, tracking, and a returns QR code.
Paper: Letter portrait · Document language: en-US
Highlights: Ordered / shipped / backordered columns; returns QR code; repeated page header with order barcode.
Commercial Invoice Commercial Invoice (commercial-invoice)
Export commercial invoice for customs: exporter, consignee and importer, HS codes, country of origin, Incoterms, weights, totals and declaration.
Paper: Letter portrait · Document language: en-US
Highlights: HS code and country-of-origin columns, Incoterms, net/gross weights, declaration and signature.
Carrier Manifest Carrier Manifest (carrier-manifest)
End-of-day carrier pickup manifest listing every shipment with tracking / PRO, consignee, service, packages, weight and declared value, plus driver sign-off.
Paper: Letter landscape · Document language: en-US
Highlights: Landscape list of shipments with tracking/PRO, packages, weight and declared value totals; driver sign-off.
Packing Slip (Simplified Chinese) Packing Slip (Simplified Chinese) (packing-slip-zh-CN)
Simplified Chinese packing slip on A4 with Chinese address layout, metric weight and Chinese date format.
Paper: A4 portrait · Document language: zh-CN
Highlights: A4, Chinese address layout, metric weights, Chinese dates; uses Noto Sans SC.
Commercial Invoice (Korean / English) Commercial Invoice (Korean / English) (commercial-invoice-ko-KR)
Bilingual Korean–English export commercial invoice with Korean exporter details, KRW-friendly formatting and USD amounts.
Paper: Letter portrait · Document language: ko-KR
Highlights: Bilingual Korean / English labels, Korean exporter details, USD amounts.

Orders

Preview Template
Sales Order Sales Order (sales-order)
Customer order confirmation with bill-to / ship-to, order terms, priced lines with discounts, and order totals.
Paper: Letter portrait · Document language: en-US
Highlights: Bill-to / ship-to, terms, priced lines with discounts, subtotal, tax and total.
Order Summary Report Order Summary Report (order-summary-report)
Open and recent orders grouped by status, with customer, dates, carrier, line and unit counts and order value.
Paper: Letter landscape · Document language: en-US
Highlights: Orders sorted and grouped by status with per-status subtotals and grand totals.
Sales Order (Spanish – Mexico) Sales Order (Spanish – Mexico) (sales-order-es-MX)
Spanish-language sales order for Mexico with MXN pricing, IVA and day-first dates.
Paper: Letter portrait · Document language: es-MX
Highlights: Spanish labels, MXN currency, IVA (VAT), day-first dates.

Procurement

Preview Template
Purchase Order Purchase Order (purchase-order)
Purchase order to a supplier with vendor and ship-to blocks, terms, vendor part numbers, totals, conditions and authorized signature.
Paper: Letter portrait · Document language: en-US
Highlights: Vendor and ship-to blocks, vendor part numbers, terms and conditions, authorized signature.
Purchase Order (French) Purchase Order (French) (purchase-order-fr-FR)
French purchase order (bon de commande) on A4 with EUR amounts, VAT (TVA) and French number formatting.
Paper: A4 portrait · Document language: fr-FR
Highlights: A4, French labels (bon de commande), EUR, TVA, French number formats.

Inbound

Preview Template
Receiving Report Receiving Report (receiving-report)
Inbound receipt against an ASN / PO: expected vs received quantities, variance, damages, lot and expiry, putaway location and sign-off.
Paper: Letter landscape · Document language: en-US
Highlights: Expected vs received quantities with variance, damages, lot/expiry and putaway location.

Warehouse

Preview Template
Pick List Pick List (pick-list)
Wave / batch pick ticket in pick-path order with location and item barcodes, large quantities, lot and expiry, and confirmation boxes.
Paper: Letter portrait · Document language: en-US
Highlights: Repeater pick lines in pick-path order with location and item Code 128 barcodes, large quantities and confirmation boxes.
Pick List (Japanese) Pick List (Japanese) (pick-list-ja-JP)
Japanese pick list with Japanese item names, labels and date format, ready for Japanese warehouse operations.
Paper: Letter portrait · Document language: ja-JP
Highlights: Japanese labels and item names, Japanese dates; uses Noto Sans JP.

Inventory

Preview Template
Cycle Count Sheet Cycle Count Sheet (cycle-count-sheet)
Count sheet by location with optional blind count, write-in count and recount columns, and counter / verifier sign-off.
Paper: Letter portrait · Document language: en-US
Highlights: Optional blind count (hides expected quantities), write-in count and recount columns, counter/verifier signatures.
Item Master Report Item Master Report (item-master-report)
Catalog of items grouped by category with UPC, unit of measure, case pack, dimensions, weight, status and cost.
Paper: Letter landscape · Document language: en-US
Highlights: Sorted and grouped by category with item counts, subtotals, UPC and dimensions; summary tiles at the top.
Inventory On Hand Inventory On Hand (inventory-on-hand)
Stock by zone and location with lot, expiry and on-hand / allocated / available quantities, subtotaled per zone.
Paper: Letter landscape · Document language: en-US
Highlights: Grouped by zone with on-hand / allocated / available subtotals; lot and expiry columns.

Labels

Preview Template
Shipping Label 4×6 Shipping Label 4×6 (shipping-label-4x6)
Thermal 4×6 in carton label: ship from / ship to, ship-to postal code (GS1-128 420), carrier service and tracking barcode, and GS1-128 SSCC.
Paper: 4 × 6 in · Document language: en-US
Highlights: 4×6 in page; GS1-128 (420) postal code, carrier tracking Code 128, GS1-128 SSCC and a QR code.
Pallet / LPN Label 4×6 Pallet / LPN Label 4×6 (pallet-lpn-label-4x6)
License plate (LPN) pallet label: large LPN with Code 128, item, quantity, lot and expiry, GS1-128 product barcode and SSCC.
Paper: 4 × 6 in · Document language: en-US
Highlights: 4×6 in page; large LPN with Code 128, GS1-128 GTIN/expiry/lot barcode and SSCC.
Location Labels Location Labels (location-labels)
Rack / bin location label strips on Letter sheets: large location code, direction arrow, Code 128 barcode and zone details.
Paper: Letter portrait · Document language: en-US
Highlights: Repeater of full-width label strips with direction arrows and Code 128 location barcodes.

Most adaptations take a few minutes:

  1. Branding. Replace the logo (Quick start, step 4), and change the accent color. Most templates use one accent color in their named styles and heading bars. Edit the named styles on the Report tab to recolor everything at once.
  2. Wording. Change static labels, such as "Customer PO" to "Your reference".
  3. Fields. Your system may use different field names than the template's sample data contract. If your application provides its own data contract, the Fields tab shows your fields. Update the bindings to match, or ask your integrator to map your data to the template's field names.
  4. Columns. Add, remove or reorder table columns in the column editor (Tables).
  5. Paper. Switch Letter and A4 on the Report tab. The layouts leave enough margin for both, but check with Preview PDF.
  6. Language. Set Document language and translate the static labels (International documents).

Tip: Each template's preview text was generated from its sample data, so Preview PDF shows a realistic document even without data.

Template data contracts and sample data

Each gallery template comes with:

File Contents Used for
template.json The design What the gallery loads
schema.json The data contract (JSON Schema) with field titles, descriptions and examples The Fields tab, and for your integrator to know what to send
sample-data.json A realistic example document's data Testing a real render (Quick start, step 9)

They are in the product package under packages/designer/templates/<template id>/. Your integrator can map your system's data to these contracts.

Your application can add its own templates to the gallery, for example your company's approved BOL and label designs, and can hide the built-in ones. Company templates appear next to the built-ins, in their own categories. Ask your administrator.

Import a PDF

Already have the document as a PDF, for example a packing slip from your current system? Import PDF rebuilds one page of it as a new design, so you don't have to draw it again.

  1. Click Import PDF in the toolbar.
  2. Click Choose a PDF file. For a PDF with several pages, choose the Page to import.
  3. Optional: tick Also add the page as a tracing image to keep a faint copy of the original behind the page (The tracing image).
  4. Click Import. The page replaces the current design. If you have unsaved changes, you are asked first: they will be lost.

The PDF never leaves your computer: the import runs in the browser.

What comes in:

In the PDF In the design
Text Text boxes in the same place, with the same size, bold or italic and color. The lines of a paragraph or address come in as one multi-line text box. The font is the same one when the designer has it, or one with the same widths (Arial → Arimo, Times New Roman → Tinos, Calibri → Carlito), otherwise the default font, slightly smaller where it is wider
Lines, boxes, rounded boxes, circles Lines, rectangles and ellipses
Logos and pictures Images
Code 128, GS1-128, Code 39, EAN-13, UPC-A and QR codes Barcode elements with the value they encode, read from the barcode itself. The text printed under a barcode comes in as a text box of its own
Other barcodes (Data Matrix, PDF417, …) and other drawn shapes One image each: a picture as it was printed
Tables with a header row A Table bound to a list named items: one column per column of the PDF, with its header, widths, alignment, colors, grid, striped rows and totals row. Each cell shows the PDF's first row as its preview text: {{ item.description | Organic cotton crew tee }}
Other tables (no header row, headers on two lines, rows of different heights, group rows) Separate lines and text boxes

A message after the import says how many elements were created and what was left out, such as rotated text or gradients.

The imported page is static: every value is the one printed in the PDF. To turn it into a template:

  1. Replace the sample values with fields. Select a text box, for example the one with the order number, and type the binding, keeping the old value as preview text: {{ orderNumber | SO-104412 }}. Or drag the field from the Fields tab and delete the old text box. Do the same for each barcode's Value (Barcodes).
  2. Point the tables at your data. A recognized table reads from items, and each column from the field named after its header (item.unitPrice for Unit price, item.col1 when the header has no letters). Change the table's Data to your list, for example order.lines, and each column's value to your field (Tables). A totals row comes in with the printed totals as plain text: replace them with {{ sum(rows, 'qty') }}.
  3. Rebuild other repeated rows as a table where the import left lines and text boxes: delete them and add a Table bound to the list.
  4. Turn on Stretch for text boxes whose values can be longer than the sample, so they wrap instead of overflowing.

Note: The import works best with PDFs made by software: exports from your ERP or WMS, Word or Excel documents saved as PDF, browser printouts. A scanned page has no text to read. It comes in as a tracing image only, and you draw the design on top of it.

The tracing image

The tracing image is a faint copy of the original page behind your design. It is there only while you design: it is never printed, and it doesn't appear in Preview PDF or in the documents your application renders. Use it to check that the rebuilt page matches the original, or to trace a scanned page.

On the Report tab, Tracing image sets its Opacity, and Remove deletes it. Remove it when you're done: it makes the saved template larger.

← 11. International documents13. Preview, export and rendering →