All View Components → barcode

Select a view component to see details on how it works:

barcode

An input component that allows the user to scan a barcode.

Example

It is recommended to use a textinput in conjunction with a barcode component so that the user can see the barcode that was scanned, or enter the barcode number into the text input manually if they're unable to scan the barcode:

Code in View XML:

<var name="product_barcode" type="string" />

<barcode bind="product_barcode" label="Scan the Product's Barcode" types="EAN_13" required="true" />
<textinput bind="product_barcode" label="Or, Manually Enter Barcode" required="true" />

Appearance on mobile device:

Configuration:

Option Required? Details

bind required Variable/attribute in which to store the input value of the field.
Must be a variable or attribute of type string or int
(see Attribute & Variable Types for more details)

label optional Label to show on the component. It can be a Format String to make the text dynamic.

required optional Set to true if the barcode must be present before proceeding to another view. Defaults to false.

prompt optional Prompt to display on the barcode scanning screen.

types

optional

Comma-separated list of barcode types to try to scan, for example QR_CODE,UPC_A,UPC_E.

Defaults to QR_CODE,CODE_39,CODE_128.

Tip: It is recommend that you specify only the barcode formats you need (ideally, only one format) since this improves barcode recognition accuracy.

Supported barcode formats:

	Supported on Android:	Supported on iOS:
Product barcodes:	`UPC_A`, `UPC_E`, `EAN_8`, `EAN_13`, `RSS_14` (all variants), `RSS_EXPANDED` (most variants).	`UPC_A`, `UPC_E`, `EAN_8`, `EAN_13`
Other 1D barcodes: (typical for asset management)	`CODE_39`, `CODE_93`, `CODE_128`, `ITF`, `CODABAR`	`CODE_39`, `CODE_128`
2D barcodes:	`QR_CODE`, `DATA_MATRIX`, `AZTEC` (beta quality), `PDF_417`	`QR_CODE`, `DATA_MATRIX`

extensions

optional

Comma-separated list of barcode type extensions.

Supported on Android:	Supported on iOS:
`EAN_2` and `EAN_5`	Not supported on iOS.

on-scan optional Function to call after a barcode is scanned.

show-if

optional

Controls whether the component is hidden or shown. The argument specified to show-if can either be a literal boolean value (true or false), or it can specify a variable, parameter or attribute that can be a string, number, object, etc. that evaluates to false or evaluates to true (see the section Show/Hide Components Dynamically for full details). If the component also specifies required="true", but it is hidden, the validation will be ignored/skipped.

hide-if optional The opposite of show-if (see above).