Barcode Scanner

1 Introduction

The Barcode Scanner widget enables a barcode scanning functionality within your Mendix web application.

The widget does the following:

• Displays a full-screen canvas overlay that allows the end-user to scan a barcode
• Supports QR codes and a wide range of different barcode types
• Allows for additional styling customizations through Atlas UI

2 Usage

The only requirement for the Barcode Scanner widget is that it needs to be placed inside a data view that provides an object with a string attribute. The barcode detection result (being a string) will be stored in this attribute.

When the widget is placed on a page, it will automatically put a black canvas overlay on top of the entire page. This canvas will provide end-users with the ability to see their device’s camera feed and scan barcodes if they allow the permission request from the application.

2.1 Data Source Tab

• Barcode (required) – the attribute of the data view object that will store the barcode detection result as a string

2.2 Mask Tab

• Show barcode mask (enabled by default) – determines whether the black canvas overlay with a focus square is shown on top of the end-user’s camera feed
  • If this property is disabled, the entire screen will be the end-user’s camera feed when the barcode scanner is open

2.3 Events Tab

These widget properties provide control over situations where the end-user interacts with the widget:

• On detect – an optional event handler that is triggered when the widget detects a barcode
• On close – an optional nanoflow that is triggered once when the end-user closes the black canvas overlay of the widget

3 Supported Barcode Types

4 Styling

Even without additional configuration, the Barcode Scanner widget will work out of the box and contain all the necessary styling

If additional customization or personalization is desired for the black canvas overlay, then installing Atlas UI is required.