Skip to main content

Code Scanner

Barcodes and QR codes are now found on a wide range of goods, including health bands, rental cars, checked baggage, and clothing purchased from supermarkets or retail stores. They each identify a thing or a person and encode significant information.

The Code Scanner widget allows you to scan a variety of barcodes and QR codes. Using this widget, you'll be able to enhance internal business operations and provide excellent customer service.

Usage

QR/Barcodes have taken off because they offer a clear and fast return on investment. It eliminates manual entry of product information at receiving, meaning there are far fewer opportunities for error. Let's look at some scenarios where a code scanner can be helpful:

  • Warehouse- Companies need to know not just their current inventory levels, but the location of those products, always. With the help of a code scanner widget, employees can keep track of their warehouse inventories. They can use a code scanner in their app to scan codes rather than manually entering them.
  • Asset Management- The most widely used system by businesses for tracking equipment, vehicles, and computers to support their everyday operations is the usage of barcodes. With the code scanner widget, you can keep track of equipment and the location of the assets and keep any pertinent maintenance and repair records.
  • Logistics and Transportation industries- Effective track and trace methods offer logistics teams the ability to locate, track, and identify objects in real-time, providing better business insight and quicker problem-solving. QR-based tracking eliminates paperwork, reduces errors, and increases productivity.

Supported QR/Barcode Formats

We support the following formats for QR and barcodes:

1D product1D industrial2D
UPC-ACode 39QR Code
UPC-ECode 128Data Matrix
EAN-8ITFAztec
EAN-13RSS-14PDF 417

Properties

Properties allow you to edit the widget, connect it with other widgets and customize the user actions.

PropertyTypeDescriptionCode Snippet
TextFormattingSets the label text of the widget.NA
VisibleBinding & FormattingControls widget's visibility on the page. When turned off, the widget won't be visible when the app is published. Learn more about [Visible Property](/reference/widgets/#visible{{CodeScanner.isVisible}}
DisabledBinding & FormattingDisables input to the widget. The widget will remain visible to the user but a user input won't be allowed. Learn more about Disable Property{{CodeScanner.isDisabled}}
Animate LoadingFormattingControls the loading of the widget.NA
TooltipFormattingIt sets a tooltip for the widget. You can add hints or extra information about the required input from the user. Learn more about TooltipNA
ValueBindingFetches the value of scanned code{{CodeScanner.value}}

Text

Text/Label is a widget property that lets you set the text inside the button, describing the function it performs. It displays static text on the button. For example, you can enter "Scan Menu" as the label for a button that scans the restaurant menu.

How to use Text Property

Value

Value is a binding property that fetches the response from the scanned code. To bind the value of the code scanner widget to another widget, open the property pane, and add the code snippet given below:

{{<your_widget>.value}}

For example, let's take a Code Scanner widget (CodeScanner1) and bind its value to a text widget. Drag a text widget onto the canvas and add the following code:

{{CodeScanner1.value}}
How to use Value Property

Events

You can define functions that will be called when these events are triggered in the widget. For example, you can navigate to another page, show alert messages, open and close modals, and store data in local storage.

EventDescription
onCodeDetectedTriggers an action when a valid code is detected. See a list of supported actions.

onCodeDetected

When a valid barcode or QR code is detected, this event triggers an action. The Appsmith framework allows triggering actions for widget events and inside JS Objects. Let’s take an example to understand how the onCodeDetected event works.

In this example, we will use the Modal widget to display the code response.

  • Set the onCodeDetected event to open a New Modal, and choose to Create New.
  • This will open up a new modal; lets drag the text widget into the modal.
  • In the property section, add the following code:
{{CodeScanner1.value}}

Whenever a valid code is detected, a modal window displaying the code response will show up. The video below demonstrates how to achieve that.

onCodeDetected

Styles

Style properties allow you to change the look and feel of the widget.

StyleDescription
IconSets an icon to be included in the input field.
PositionSets the label position of the widget.
PlacementSets the label alignment of the widget.
Button ColorAllows you to set color for the button.
Border RadiusAllows you to define curved corners.
Box ShadowAllows you to choose from the available shadow styles.

What's next?

The following resources will come in handy as you need to learn new tricks:

Troubleshooting

If you encounter any errors during this process, check out our guide on debugging deployment errors. If you are still facing any issues, please reach out to support@appsmith.com or join our Discord Server to speak to the Appsmith team directly!