The Scanner component for Retool Mobile

An interface to scan a barcode or QR code using the device's camera.

Version: Cloud and 3.200 Edge

Demo

Scanner V2 is currently in private beta on Retool Cloud. and on Self-hosted Retool 3.173 or later.

Properties

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

autoClose

Whether to automatically close after input.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector
Default	false

Examples

true

---

buttonSize

The size of the button.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description small Small button. large Large button.

---

buttonText

The text label to display.

Type	string
Format	Plain Text
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Label > Label
Default	null

Examples

"Label"

---

data

The data.

Type	string | number | boolean | object | array
Format	Custom data
Mutability	Control Usage Retool UI Inspector Method copyToClipboard()

---

disabled

Whether input, interaction, selection, or triggering is disabled.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Interaction > Disabled Method setDisabled()
Default	false

Examples

true

---

events

A list of configured event handlers that trigger actions or queries.

Type	array
Array values	object
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers

Array Object Properties

event

The event that triggers the action. Refer to the events section for details of available events for this object.

Type	string
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers > Event

---

method

The JavaScript method to perform when type is datasource, widget, state, or localStorage.

Type	string
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers > Edit event handler > Run script actions

---

type

The type of action to perform.

Type	string
Mutability	Control Usage Retool UI Inspector > Interaction > Event handlers > Edit event handler > Action
Allowed Values	Value Description datasource Control query. widget Control component. script Run script. state Set variable. localStorage Set localStorage. util Perform utility action (e.g., Open URL or Confetti).

---

---

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Mutability	Control Usage Retool UI Inspector > Appearance > Hidden Method setHidden()
Default	false

Examples

true

---

iconBefore

The prefix icon to display.

Type	string
Format	Icon Key
Mutability	Control Usage Retool UI Inspector > Content > Add-ons > Prefix icon
Default	null

Examples

/icon:bold/shopping-gift

---

opened

Whether this object is open.

Type	boolean
Mutability	Read-only

---

ratio

The ratio of width-to-height.

Type	string
Mutability	Control Usage Retool UI Inspector
Allowed Values	Value Description 2 2:1 ratio. 1.3333333333333333 4:3 ratio. 1 1:1 ratio. 0.75 3:4 ratio.

---

width

The width.

Type	number
Format	Integer
Mutability	Control Usage Retool UI Inspector

Examples

1280

---

Methods

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

scanner.clearValue()

Clear the current values.

Definition

scanner.clearValue()

Examples

Clear the current value of scanner.

scanner.clearValue();

---

scanner.close()

Close the component.

Definition

scanner.close()

Examples

Close scanner.

scanner.close();

---

scanner.open()

Open the component.

Definition

scanner.open()

Examples

Open scanner.

scanner.open();

---

scanner.setDisabled()

Set the disabled value to toggle whether the input field is disabled. Defaults to true without a parameter.

Definition

scanner.setDisabled(disabled)

Parameters

disabled

Whether input, interaction, selection, or triggering is disabled.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Disable scanner.

scanner.setDisabled(true);

Enable scanner.

scanner.setDisabled(false);

---

scanner.setHidden()

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition

scanner.setHidden(hidden)

Parameters

hidden

Whether this object is hidden from view.

Type	boolean
Format	True/False
Default	false

Examples

true

---

Examples

Hide scanner.

scanner.setHidden(true);

Unhide scanner.

scanner.setHidden(false);

---

Events

Events triggered by user interactions. You can configure event handlers in the IDE to trigger queries or other actions in response to events.

Event	Description
Capture	A value is captured.

Supported barcode formats

Mobile Scanner supports a range of barcode formats on iOS and Android.

Name	Short name	iOS	Android
Aztec Code	aztec
Codabar	codabar
Code 39	code39
Code 39 with 43 check digit	code39mod43
Code 93	code93
Code 128	code128
Data Matrix	datamatrix
EAN-13	ean13
EAN-8	ean8
Interleaved 2 of 5	interleaved2of5
ITF-14	itf14
MaxiCode	maxicode
PDF417	pdf417
RSS 14	rss14
RSS Expanded	rssexpanded
UPC-A	upc_a
UPC-E	upc_e
UPC/EAN-13	upc_ean
QR	qr