Skip to Content
Technical Articles
Author's profile photo Jitendra Kansal

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:

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 :

I am looking forward to your feedback/comments.

Jitendra

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Francisco Acuña
      Francisco Acuña

      Very clear and straight forward blog Jitendra! We've been using the barcode scanner functionalities included in searchbars and they have proven to be very useful, both implementing them and making use of them is very intuitive as well. In a future it would be great if they also supported QR code scanning as a lot of companies are moving away from barcodes into that format now!

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Francisco Acuña

      You should be able to scan the QR code as well.

      What is that didn't work for you OR you find missing?

      Author's profile photo Francisco Acuña
      Francisco Acuña

      Jitendra Kansal

      The standard barcode scanner functionality included in search bars doesn't recognize QR codes for us (testing with MDK 5.12 at the moment). I just tested a barcode and a QR code containing the exact same string and the barcode gets immediately recognize but the QR does not.

      Author's profile photo Jitendra Kansal
      Jitendra Kansal
      Blog Post Author

      Francisco Acuña

      I would suggest you to try once with latest MDK version to see if you still see this behavior. If so, i suggest you raise a support ticket, our engineers will look into it.

      Author's profile photo Alicia Delgado
      Alicia Delgado

      Thank you for such great explanation! 👍

      Author's profile photo Sahil Dudeja
      Sahil Dudeja

      Very well explained blog

      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      Thank you for the blog post. I have a few questions:

      • Is there a list of barcode types/formats that MDK supports?
      • What library does MDK use for scanning QR and barcodes?

      Update: asked in this separate question.