This page describes the properties of the Code Scanner widget, which is used for scanning barcodes and QR codes.
The following formats for QR and barcodes are supported:
|1D product||1D industrial||2D|
|UPC-A||Code 39||QR Code|
|UPC-E||Code 128||Data Matrix|
These properties are customizable options present in the property pane of the widget, allowing users to modify the widget according to their preferences.
Determines the visual appearance and behavior of the code scanner widget.
- Always On: The code scanner widget is always active and ready for scanning.
- Click to Scan: The code scanner widget acts as a button that is activated only when clicked by the user.
Specifies the label text displayed alongside the scanning widget. This property is only available when the Scanner layout is selected as Click to Scan.
Disabled property to control the widget's disabled state conditionally.
Sets a tooltip that appears when the user hovers over the widget. It enables you to add hints or provide additional information for the button. The icon properties are only available for the Click to Scan Scanner layout option.
When an event is triggered, these event handlers can execute queries, JS code, or other supported actions.
Triggered when a valid code is detected.
Style properties allow you to change the look and feel of the button.
The icon properties are only accessible for the Click to Scan Scanner layout option.
Specifies the icon to be displayed on the widget. Additionally, you can use JS to dynamically set the icon. You can refer to the documentation of blueprintjs to explore a wide range of available icons.
This property allows you to configure the Icon's placement.
- Left: Aligns the icon to the left side of the Text.
- Right: Aligns the icon to the right side of the Text.
Determines the spacing between the Icon and the Text.
- Start: The icon and text appear on the leftmost side of the button.
- Between: The icon and text appear at opposite ends of the button's space.
- Center: The icon and text appear in the center of the button space.
Border and shadow
It reflects the state of the widget's Disabled setting. It is represented by a boolean value, where
true indicates that the widget is disabled, and
false indicates that it is enabled for user interaction.
isVisible property indicates the visibility state of a widget, with true indicating it is visible and false indicating it is hidden.
Retrieves the scanned code value from the widget.
Widget property setters enable you to modify the values of widget properties at runtime, eliminating the need to manually update properties in the editor.
These methods are asynchronous and return a Promise. You can use the
.then() block to ensure the execution and sequencing of subsequent lines of code in Appsmith.
setVisibility (param: boolean): Promise
Sets the visibility of the widget.
setDisabled (param: boolean): Promise
Sets the disabled state of the widget.