Barcode scanning in SAP MDK

There have been lot of ask from our customers on how SAP Mobile Development Kit (MDK) supports Barcode scanning, this post covers different available options.

Please note: This post is currently only meant for mobile clients (android and iOS).

MDK supports barcode scanning in a number of areas:

• Out of the box
  • From a search bar to scan a value into the search input
  • From a Form Cell Simple Property control (text input) to scan a value into the field
  • Using MDK Barcode scanner action
• Custom development – integrating a hardware scanner

From a search bar to scan a value into the search input

You can enable a BarcodeScanner search in a list that will allow you to scan a value from a search bar and the scanned result will appear into the search input.

For example,  I can search all the products belong to a category (MP3 Players) by just scanning a barcode.

From a Form Cell Simple Property control (text input) to scan a value into the field

FormCell Simple property control allows you to enable alternate input as Barcode.

For example, to input a category value, rather than inputting it via keyboard, I can just scan a barcode and the resulted value will be inputted into the field.

Using MDK Barcode scanner action

MDK barcode scan action displays the camera scanner and you can then return the result to use in a rule after the scan completes.

For example, I am calling the Barcode scanner action on press of an action bar item, it opens camera scanner and the value is set into a Note FormCell control.

{
    "ActionResult": {
        "_Name": "BarcodeScanner"
    },
    "OnFailure": "/BarcodeScanning/Actions/BarcodeScanner/OpenBarcodeScannerFailure.action",
    "OnSuccess": "/BarcodeScanning/Rules/BarcodeScanner/BarcodeScanResult.js",
    "_Type": "Action.Type.OpenBarcodeScanner"
}

//BarcodeScanResult.js 

export default function BarcodeScanResult(context) {
    var actionResult = context.getActionResult('BarcodeScanner');
    var scannedResult = actionResult.data;
     var noteFormCell = context.evaluateTargetPath("#Page:BarcodeScannerResult/#Control:FormCellNote0");
//setting the scannedResult into Note FormCell control
  noteFormCell.setValue(scannedResult);
}

another use case could be opening a Product details page on upon scanning a Product ID

{
    "_Type": "Action.Type.OpenBarcodeScanner",
    "ActionResult": {
        "_Name": "OpenBarcodeScanner"
    },
    "OnFailure": "/BarcodeScanning/Actions/BarcodeScanner/OpenBarcodeScannerFailure.action",
    "OnSuccess": "/BarcodeScanning/Rules/BarcodeScanner/BarcodeResult_OpenProductDetail.js"
}

//BarcodeResult_OpenProductDetail.js

export default function BarcodeResult_OpenProductDetail(context) {
    let pageProxy = context.getPageProxy();
    var message = '';
    var actionResult = context.getActionResult('OpenBarcodeScanner');
    var scannedResult = actionResult.data;
    return context.read('/BarcodeScanning/Services/sample.service', 'Products', [], `$filter=ProductId eq '${scannedResult}'`).then((results) => {
        if (results && results.length > 0) {
            let prod = results.getItem(0);
            pageProxy.setActionBinding(prod);
            return pageProxy.executeAction('/BarcodeScanning/Actions/Products/NavToProduct_Detail.action');
        } else {
            message = `Product with ID (${scannedResult}) not found`;
            return context.executeAction({
                "Name": "/BarcodeScanning/Actions/GenericToastMessage.action",
                "Properties": {
                    "Message": message

                }
            });
        }
    });

}

Custom development – integrating a hardware scanner

If you have a requirement to integrate a hardware scanner (e.g., Honeywell, Panasonic, Symbol, Zebra OR others) in your MDK app, you need to first investigate the specifics of the device you are planning to use to determine the best approach for this integration as each scanner manufacturer has their own API and feature set. How you integrate a hardware scanner into your MDK application is determined by what the hardware exposes. Some scanners are configured as a keyboard wedge where as long as the cursor is in an input field a hardware button scan will “paste” the result into the current field. Others can be setup to emit a broadcast event that you can listen for. Most all have a specific scanning SDK you can use in an extension control  to configure and initialize the scanner so that the event will trigger within your MDK application.

If you are looking for using the hardware scanner, you have 3 options.

1. Keep the input field (as either a simple property or other type) and use the keyboard wedge feature of the scanner to trigger your OnValueChange event. You can use the OnRendered event to call the setFocus to put the cursor in the right field.
2. Write a rule to register a receiver for the Broadcast event. When the rule is triggered, similar to BarcodeScanResult.js (example shown above), you act on value received
3. Create a plugin that exposes the hardware scanning APIs into your MDK application. This would allow for scanning without having an input field since the scan event would trigger your code directly.

New to MDK development?

Follow these tutorials to get your hands dirty and learn more about Mobile development kit!

Further Information:

You can learn more in documentation :

• MDK Guides
• API references
• MDK Samples GitHub repositories

I am looking forward to your feedback/comments.

Jitendra