scan-barcode
scan-barcode
launches the barcode scanner which opens a camera view with which app users can scan codes.Version and device compatibility
scan-barcode
is supported in all versions of the JourneyApps Container and Runtime.- It is supported on Android and iOS devices.
- It received several visual and functional updates in version 4.80.0 of the JourneyApps Runtime.
Programmatically trigger the barcode scanner
The barcode scanner can be triggered programmatically using
journey.hardware.scanBarcode()
. See more details here.main.view.xml
<var name="product_barcode" type="text" />
<scan-barcode bind="product_barcode" label="Scan the Product's Barcode" />

Version compatibility
align-content
was introduced in version 4.81.0 of the JourneyApps Runtime.Optional
Type:
boolean
Default:
true
Version compatibility
allow-manual-entry
was introduced in version 4.81.0 of the JourneyApps Runtime.On unsupported devices, a text input dialog will display for users to manually enter the data. This dialog can be skipped by setting
allow-manual-entry
to false
.Optional
Type:
string
- can be a named color or #HEX valueDefault:
primary
Button text color
When using named colors (i.e.
primary
, secondary
, positive
, negative
, etc) the corresponding named _text
color will be used as the button's text color. For example, this button:
<button label="My button" color="secondary" on-press="$:doSomething()"/>
Will use the theme's
secondary_text
named color for the button text.When using a #HEX value, a high contrasting color will automatically be selected for the button's text color.
<scan-barcode label="Scan QR code" color="$:getColor()" />
function getColor() {
return "#ffab00";
}
Optional
Default: unset
When the
disabled
attribute is set to true
the component will display the bound state and direct interactions blocked. The component will appear greyed-out. A message will display indicating the message specified.Optional
Type:
EAN_2
, EAN_5
Comma-separated list of barcode type extensions.
Platform compatibility
extensions
are currently only supported on Android.<var name="product" type="text"/>
<scan-barcode bind="product" extensions="EAN_2,EAN_5" />
Optional
Type:
string
Default: Barcode Scanner Icon
Version compatibility
icon
was introduced in version 4.81.0 of the JourneyApps Runtime.The icon to display on the button, it will be placed on the left of the label by default. The icon can be a Font Awesome icon, an Ionicons icon or an icon or image asset.
Optional
Type:
string
Specify the color of the button's icon. The
icon-color
attribute can be a named text-color or #HEX value.When using
icon-color
with image assets, a color mask will be applied to the icon will remove any color variation in the image.Version compatibility
label-case
was introduced in version 4.81.0 of the JourneyApps Runtime.on-scan
is functionally similar to on-change
, however only the current $value
is being passed as an event parameter.Optional
Type:
string
Default: unset
Prompt text to display on the barcode scanning screen. Message will also display on the manual fallback dialog.
Optional
Type:
solid
| outline
Default:
solid
The
scan-barcode
button style conveys importance of a button to the user, and can be set to solid
or outline
.<scan-barcode label="Scan the Product's Barcode" style="outline" />

Version compatibility
text-color
was introduced in version 4.81.0 of the JourneyApps Runtime.Optional
Type:
string
- can be a named color or #HEX valueSpecify the color of the
scan-barcode
button's label. <scan-barcode label="Scan the Product's Barcode" text-color="#ffff00" />

Optional
Comma-separated list of barcode types to attempt to scan.
<var name="product_code" type="text"/>
<scan-barcode bind="product_code" types="QR_CODE,UPC_A,UPC_E" />
scan-barcode
on RealWear devicesBy default
scan-barcode
will open JourneyApps' built-in barcode scanner on RealWear devices. With container version 22.7.2 or greater, it is possible to launch RealWear's native barcode scanner for certain barcode types (which comes with improved UI and voice control). This can be achieved by limiting the list of types
to types that are supported by RealWear's barcode scanner. Supported types are:CODE_128
EAN_8
EAN_13
UPC_A
QR_CODE
DATA_MATRIX
Text | Android | 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: | 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 |
The following component methods are available when an
id
is assigned to the component and component.scanBarcode({id:'my-id'})
is called from JS/TS:Programmatically opens the barcode scanner to allow the user to capture a barcode bound to the
scan-barcode
component.Programmatically scroll until the
scan-barcode
component is visible in the view.Last modified 9mo ago