Parent | Child | Previous | Next
 

PhoneGap - Scan Barcode

Description

Barcode scanning can be added to any Cordova app using the PhoneGap - Scan Barcode action javascript.

Discussion

The "PhoneGap - Scan Barcode" action allows you to scan barcodes in a Cordova application.

images/scanBarcodeAndroid.png
Barcode scanner on an Android Device

A barcode is a way to encode information, such as a URL, item price, or airplane ticket information, as a black and white image. QR Codes are popular form of barcode, often used in advertisements to encode a URL to a website. A mobile device with a barcode scanner can be used scan the QR Code and then navigate to the URL, making it easy for people to visit a website without having to manually type the URL into a web browser.

images/scanBarcodeiOS.png
Barcode scanner on an iOS Device

A variety of Cordova plugins are available for adding barcode scanning to a mobile application. The phonegap-plugin-barcodescanner is integrated into Alpha Anywhere as an Action Javascript action available in the UX Component. By adding the PhoneGap - Scan Barcode action to the click event for a button or image, you can quickly integrate barcode scanning to any mobile app.

When you build the Cordova application be sure to select the Bar Code Scanner plugin in the Third Party Plugins section.

The plugin is configured using properties. These properties are explained below.

images/barcode.png

Scan Barcode Properties

Prefer front camera

If checked, the front camera (the camera on the front of the device) will be used to scan barcodes if the device has a front camera. Otherwise, the barcode scanner will use the back camera.

Show flip camera button

If checked, a button for swapping between the front and back camera will be added to the barcode scanner.

Prompt

Android only. On Android devices, you can specify a prompt that is shown when the scanner is opened. The Prompt property can be used to define the prompt to be shown when the scanner is opened.

Orientation

Android only. On Android devices, the barcode scanner can be configured to use a fixed orientation or rotate with the device. If set to Portrait or Landscape, the Android device will use a fixed orientation (portrait or landscape, respectively.) Selecting Rotate will cause the scanner to rotate with the device's orientation.

Javascript Properties

You can define an event handler for the onSuccess and onFailure Javascript events.

  • onSuccess

    If you want to do anything with the scanned barcode data, you must define an event handler for the onSuccess event. The onSuccess event is triggered if the scan is successful. Your JavaScript can reference result.text, result.format, and result.cancelled:

    result.text

    The text representation of the barcode data.

    result.format

    The barcode format. For example, "QR_CODE" or "CODE_128". For a list of supported barcode formats for various devices, see the NPM plugin documentation for phonegap-plugin-barcodescanner

    result.cancelled

    Specifies whether or not the action was cancelled. If the value of result.cancelled is 0, the scan was successful. If the value is 1, the user cancelled the scan.

  • Your JavaScript can, for example, check the barcode format and perform validation. If the barcode format is correct, then the decoded data can then be processed. For example, UPC_E codes are commonly used for POS Retail systems. The following JavaScript could be added to the onSuccess event to insert UPC_E data in to a list after a barcode was scanned:

    if (result.cancelled == 0) {
	if (result.format == "UPC_E") {
		// Append entry to List
		var obj = {dialog.object}.getControl("PRODUCTS");
		if (obj) {
			var data = {};
			data["ITEM"] = result.text;
			obj.appendRows(data);
		} else {
			alert("List 'PRODUCTS' does not exist.");
		}
	} else {
		alert("Barcode is incorrect format. Format was '"+result.format+"'. Expected 'UPC_E'.");
	}
}

  • Download sample component (requires Alpha Anywhere 4.5.0 or newer.)

  • onFailure

    The onFailure event is triggered if the barcode scan fails. The error parameter passed to the event contains additional information about why the scan failed. This can be used to provide additional information to the user. For example:

    alert("An error occurred while scanning the barcode. Error was " + error);

See Also