Skip to main content

Code Scanner (ALPHA)

BusinessEnterprise
Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Code Scanner widget reads QR codes and barcodes with the device camera. It stores the decoded text so you can use it in queries and other widgets. The camera turns on only in the deployed app.

note

Treat the scanned text as untrusted input. Do not navigate to it or show it as HTML without checking it first.

Widget type: WDS_CODE_SCANNER_WIDGET

Code Scanner widget in a Responsive app
Code Scanner widget

Content properties​

These properties appear in the Content tab of the property pane.

Basic​

Scanner layout string​

Sets how the scanner works. You cannot bind this property. Options:

  • Always on (default): the scanner stays visible and keeps scanning.
  • Click to scan: shows a button that opens the scanner in a dialog.

Values: ALWAYS_ON, CLICK_TO_SCAN.

Text string​

Sets the label of the scan button. Default: Scan a QR/Barcode. Shows only when Scanner layout is Click to scan.

General​

Default mobile camera string​

Sets which camera to use first on mobile devices. If that camera is not available, the browser uses any camera it can find. Options:

  • Front (Selfie): user
  • Back (Rear) (default): environment

Visible boolean​

Controls whether the widget is visible. Default: on.

Disabled boolean​

Turns off the widget. The camera does not run while it is disabled. Default: off.

Animate loading boolean​

Controls the loading animation of the widget. Default: on.

Events​

onCodeDetected​

Sets the action that runs when the scanner finds a code. See Events.

Reference properties​

Reference properties let you read the widget's state in bindings and code, for example {{CodeScanner1.isVisible}}. You cannot set them directly.

value string​

Holds the decoded text of the last code. It is empty until the scanner finds a code.

Example:

{{CodeScanner1.value}}

scannedText string​

Holds the same text as value. It is an empty string until the scanner finds a code.

Example:

{{CodeScanner1.scannedText}}

isVisible boolean​

Shows whether the widget is visible.

Example:

{{CodeScanner1.isVisible}}

isDisabled boolean​

Shows whether the widget is disabled.

Example:

{{CodeScanner1.isDisabled}}

Methods​

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise​

Shows or hides the widget.

Example:

CodeScanner1.setVisibility(false)

setDisabled (param: boolean): Promise​

Turns the widget on or off.

Example:

CodeScanner1.setDisabled(true)

Events​

onCodeDetected​

Runs when the scanner finds a code. Read the text in {{CodeScanner1.value}}.