Barcode-scanner control for canvas apps

Scans barcodes, QR codes, and data-matrix codes on an Android or iOS device. Not supported in a web browser.

Description

The control opens a native scanner on an Android or iOS device. The scanner automatically detects a barcode, a QR code, or a data-matrix code when in view. The control doesn't support scanning in a web browser.

Key properties

Value – Output property that contains the text value of the code that was scanned most recently.

Text - Text that appears on the button that activates the scanner.

OnScan – How an app responds when a barcode is successfully scanned.

Additional properties

BarcodeType - The barcode type to scan. You can target multiple barcode types by concatenating them. Ex. BarcodeType.Code128 & BarcodeType.Code39 Default: Auto

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

FlashlightEnabled - Whether the flashlight is enabled automatically when the scanner is opened.

Height – The height of the button that activates the scanner.

PreferFrontCamera - Whether the front-facing camera, when available, is used for scanning.

Tooltip – Explanatory text that appears when the user hovers over a control.

Type - The type of code that was detected in the scan that succeeded most recently.

Visible – Whether a control appears or is hidden.

Width – The width of the button that activates the scanner.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Accessibility guidelines

The same guidelines for the Button control apply to the Barcode scanner control because it's a button that launches the scan.

Visual alternatives

  • The barcode scanner is a button that doesn't display the scan result. Consider showing the scan result with a Label control. Set the label's Text property to the barcode scanner's Value property. Set the label's Live property to Polite so that screen-reader users are notified of changes. This change makes the scanned value accessible to everyone, regardless of visual ability.

  • Users who have visual and motor disabilities might prefer not to point the camera at a barcode. Consider adding another form of input, such as a Text input control, for users to enter barcodes.

Barcode Availability by Device

Barcode Type Android iOS
QR_CODE
DATA_MATRIX
UPC_A
UPC_E
EAN_8
EAN_13
CODE_39
CODE_93
CODE_128
CODABAR
ITF
RSS14
PDF_417
RSS_EXPANDED
MSI
AZTEC

NOTE: PDF_417 and AZTEC are not supported in Auto mode