Barcode New in 1.0.8
Draws a barcode — linear or 2D — from a fixed or bound value, with the check digits validated, for labels, travellers and part marking that a scanner on the line will read.
Reach for it when you need:
- A serial number or lot code under a part, bound to the tag that holds it
- A GS1-128 or GS1 Data Matrix label for a pallet or a pack
- A product label sent to a label printer as SVG
Component name: Barcode · Category: Display
In the palette: Generates a barcode from a fixed or bound value: Code 128, GS1-128, EAN-13/8, UPC-A/E, Code 39/93, ITF, Data Matrix, GS1 Data Matrix, PDF417, Aztec or plain QR. Check digits are validated — an invalid value shows an error (and fires encodeError) instead of a wrong code. Encoded off the UI thread and cached; SVG/PNG download for label printing.
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
format | enum | code128 | Symbology. Code 128 for general text; EAN/UPC for retail; Data Matrix for small part marking; GS1 formats take (AI) syntax. Options: code128 · gs1_128 · ean13 · ean8 · upca · upce · code39 · code39ext · code93 · code93ext · interleaved2of5 · datamatrix · gs1datamatrix · pdf417 · azteccode · qrcode. |
value | string | "" | Data to encode. Bindable — e.g. {{tag.Line1/SerialNumber}}. Must suit the format (EAN-13: 12 digits, or 13 with a correct check digit). |
text | object | {"show":true,"align":"center"} | The human-readable text under 1D barcodes. |
↳ text.show | boolean | true | Print the human-readable text under a 1D barcode (ignored for 2D formats). |
↳ text.align | enum | center | Alignment of the human-readable text. Options: left · center · right · justify. |
colors | object | {"bars":"#000000","background":"#FFFFFF"} | Bar and background colours. |
↳ colors.bars | color | #000000 | Bar/module colour (hex). Keep it dark on a light background. |
↳ colors.background | color | #FFFFFF | Background colour (hex). |
geometry | object | {"height":15,"quietZone":true,"rotate":"N"} | Bar height, quiet zone and rotation. |
↳ geometry.height | number | 15 | Bar height in millimetres for 1D formats (the drawing then scales to the widget box). |
↳ geometry.quietZone | boolean | true | Keep the blank margin scanners need around the code. Turn off only when the surrounding layout provides it. |
↳ geometry.rotate | enum | N | Rotation of the symbol. Options: N · R · I · L. |
allowDownload | boolean | false | Show SVG / PNG download buttons on the code in LiveView (SVG is best for label printers). |
minRefreshMs | number | 250 | At most one re-render per this many ms when the bound value changes fast (the latest value wins). A tag updating 100×/s re-encodes ~4×/s at the default 250. 0 = render every change. |
output | object | {"valid":false,"error":""} | Read-only runtime outputs — bind a leaf by the widget's node id, e.g. {{nodes.<Barcode id>.props.output.valid}}. |
↳ output.valid | boolean | false | True when the current value encoded successfully. |
↳ output.error | string | "" | Why the value could not be encoded, or empty. |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
encodeError | Encode error | Barcode | context.barcode — { value, format, message }. In action fields: barcode.message. |
encodeRecovered | Encode recovered | Barcode | context.barcode — { value, format } now encoding correctly again. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Choosing a format
| Need | format |
|---|---|
| General text and numbers | code128 (the default) |
| Retail products | ean13, ean8, upca, upce |
GS1 application identifiers — (01)…(10)… | gs1_128, or gs1datamatrix in 2D |
| Older readers | code39, code93, and their full-ASCII code39ext / code93ext |
| Numeric pairs, cartons | interleaved2of5 |
| Small part marking | datamatrix |
| Lots of data in a stacked code | pdf417, azteccode |
qrcode is offered too, plain; for a styled QR code use the QR Code widget.
Values are checked, not guessed
The value has to suit the format — EAN-13 takes 12 digits, or 13 whose last is the correct check digit. A value that does not fit draws no code rather than a wrong one, sets output.valid false with the reason in output.error, and fires encodeError once; encodeRecovered fires when a good value arrives. Both hand an action the details as barcode and a script as context.barcode. A scannable wrong code on a label is the failure that matters, which is why there is no "best effort".
Layout
geometry.height is the bar height in millimetres for a linear code; the drawing then scales to the widget box. Leave geometry.quietZone on unless the surrounding layout already gives the blank margin scanners need. text.show prints the human-readable line under a linear code (2D formats have none).
Like the QR Code, it is encoded away from the main thread and cached, minRefreshMs (default 250) caps redraws of a fast-changing value, and allowDownload offers SVG and PNG in LiveView — SVG is what a label printer wants.