scan-barcode

Overview

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.

Basic Example

main.view.xml

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

<scan-barcode bind="product_barcode" label="Scan the Product's Barcode" />

Standard Attributes

bind

pagebind

label

pagelabel

required

pagerequired

Advanced Attributes

align-content

Version compatibility

align-content was introduced in version 4.81.0 of the JourneyApps Runtime.

pagealign-content

align-label

pagealign-label

allow-manual-entry

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.

color

Optional

Type: string- can be a named color or #HEX value

Default: primary

The main color of the scan-barcode button: Background color of a solid button; border and text color of an outline button.

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.

To override the button's text color, set the text-color attribute.

<scan-barcode label="Scan QR code" color="$:getColor()" />

function getColor() {
    return "#ffab00";
}

disabled

pagedisabled

disabled-message

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

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.

extensions

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" />

icon

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.

icon-color

Optional

Type: string

Default: the component's text-color

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.

icon-position

pageicon-position

id

pageid

label-case

Version compatibility

label-case was introduced in version 4.81.0 of the JourneyApps Runtime.

pagelabel-case

label-color

pagelabel-color

on-change and on-scan

pageon-change

on-scan is functionally similar to on-change, however only the current $value is being passed as an event parameter.

prompt

Optional

Type: string

Default: unset

Prompt text to display on the barcode scanning screen. Message will also display on the manual fallback dialog.

show-if and hide-if

pageshow-ifpagehide-if

style

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"  />

text-color

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 value

Default: If the button's color is a named color, its text color defaults to the _text counterpart of the named color. If the button's color is a #HEX value, its text color defaults to a high contrasting color.

Specify the color of the scan-barcode button's label.

<scan-barcode label="Scan the Product's Barcode" text-color="#ffff00" />

types

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 devices

By 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

Supported Barcode Formats

	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

Component Methods

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:

scanBarcode

Programmatically opens the barcode scanner to allow the user to capture a barcode bound to the scan-barcode component.

scrollIntoView

Programmatically scroll until the scan-barcode component is visible in the view.