QR Code

The QR Code block renders a scannable QR code from one of three content types: plain Text, a URL, or a Visiting Card (a contact card built from name, phone, email, company, address and website fields that phones recognise as a contact when scanned). You can overlay a logo image at the centre, and the block automatically strengthens error tolerance so the code stays scannable underneath the logo.

Tip: When to use QR Code: Let users scan a link on a kiosk, poster or receipt screen (URL type, typically bound to a dynamic value). Share contact details a phone can save directly (Visiting Card type). Encode any arbitrary string — ticket ID, Wi-Fi payload, coupon code — (Text type). To read codes rather than display them, use the Scanner block instead.

Properties

Content — Type and Value

Appearance

Behavior & Gotchas

Warning: A Visiting Card with no name renders nothing. The block renders nothing to scan if both firstName and lastName are empty. Always ensure at least one name field is populated.

Note: Logo overlay increases error correction automatically. When a logo is enabled, the code's error correction level is raised so it remains scannable even with the logo covering the centre cells.

Examples

Barcode

The Barcode block renders a scannable barcode from a text value, in any of 16 formats — CODE128 (the default) and its A/B/C variants, EAN13, EAN8, UPC, CODE39, ITF14, ITF, MSI family, and Pharmacode. Dropping the block creates a small stack: the barcode graphic and a separate caption text block underneath, both prefilled with a sample value.

Tip: When to use Barcode: Print or display scannable identifiers — SKUs, asset tags, ticket numbers — bound to your data. For QR codes (two-dimensional, URL-friendly), use the QR Code block. The Barcode block draws one-dimensional bar formats only.

Properties

Content

Appearance

Behavior & Gotchas

Warning: Each barcode format has strict character and length rules. EAN13 requires exactly 12 digits (the 13th is a check digit computed automatically). EAN8 requires 7 digits. UPC requires 11 digits. CODE39 supports uppercase letters, digits, and a small set of special characters. Binding a value that doesn't meet the format's rules renders a broken or blank barcode.

Note: The caption text block is separate. The barcode and the human-readable text below it are two sibling blocks in a stack. Edit the caption block independently — it doesn't automatically stay in sync if you change the barcode binding.

Scanner

The Scanner block opens a live camera feed and decodes barcodes and QR codes the moment they enter its framed scan region. It decodes continuously by default, keeping a running list of every value it reads. Turn on Pause after scan for single-shot capture, or set a delay between reads to throttle continuous scanning. Each accepted read fires an On Scan event and appends the raw decoded text to the block's data list. Duplicate reads are skipped by default.

Tip: When to use Scanner: Read barcodes or QR codes from physical items with the device camera — inventory intake, ticket check-in, asset lookup, coupon redemption. To render a code from a value, use the Barcode or QR Code block instead. To capture a photo, use the Camera block.

Properties

Content

Events

Methods

Exposed State

Behavior & Gotchas

Note: The scanner requires camera permission. On first use, the browser or mobile OS prompts the user for camera access. If permission is denied, the scanner block shows an error state. Design your flow to handle the case where permission is not granted.

Note: Pause after scan freezes on the first successful read. When enabled, the scanner stays frozen until you programmatically resume it with the Resume Scanner method — or the user takes a manual action if you've added resume controls.

Warning: Ignore duplicate codes compares against the current session's data list. If you clear the data list (via Clear Data method), previously scanned codes become eligible for re-scanning. This is useful for workflows where items need to be re-scanned in a new pass.

Examples

Frequently Asked Questions

Can I bind the QR code's URL to a record's field so each row shows a different code?

Yes. Set Type = URL and bind the Text/URL property to a field expression like {{ currentItem.detailUrl }}. When used inside a Repeatable or data table row, each instance resolves its own binding independently, so every row shows a different QR code.

My barcode renders blank — what's wrong?

The most common cause is a value that doesn't meet the chosen format's character and length rules. EAN13 requires exactly 12 digits, EAN8 requires 7 digits, and UPC requires 11 digits. CODE128 is the most permissive — if your value works there but not in another format, check that format's specification. Also verify the bound expression actually resolves to a string, not null or undefined.

How do I stop the scanner from accepting the same barcode twice during a scanning session?

Leave Ignore Duplicate Codes turned on (it is on by default). The scanner compares each new decode against the current contents of {{ id.data }} and skips any value already in the list. If you want a fresh session (for example, after a batch is submitted), call the Clear Data method to reset the list — previously seen codes become eligible again.

Can I use the Scanner on a web app, or is it mobile-only?

The Scanner block works on both web and mobile apps. On web, it uses the browser's camera API and requires the user to grant camera permission. On mobile apps, it uses the device's native camera. The back camera (environment) is the default for scanning physical barcodes and QR codes.

What's the difference between using QR Code type URL and type Text?

Both encode a string into the QR matrix. The difference is semantic: URL type is intended for web addresses (phones typically auto-open the URL when scanned). Text type is for arbitrary strings — ticket IDs, coupon codes, encoded data — that should be interpreted by your own app's scanner rather than opened as a URL. The code format itself is identical; the type only affects how the block presents the input in the inspector.

Related Blocks