Skip to Content

Getting Started with Kapsel – Part 11 — Barcode Scanner (New in SP04)


Barcode Scanner (New in SP04)

This plugin enables the ability to scan and decode a barcode.  It uses the open source BarcodeScanner plugin and has upgraded it to use the 3.0.0 version of the ZXing barcode image processing library on the Android platform and on iOS corrects some warnings associated with deprecated code and fixes an issue where it is not possible to dismiss an alert dialog in a callback method.

There are a lot of acronyms in this area.  The following are some related topics, links and a few brief points on how they compare or relate to barcodes.

UPC or Universal Product Code is a standard way that one dimensional barcodes are encoded.  It represents a 12 digit number.  The site can be used to generate a sample UPC.

QR or Quick Response code is a two dimension bar code.  It can represent numbers and text such as a URL or a person’s contact information.  The ZXing project provides a QR generator and decoder.

RFID or Radio-Frequency Identification is used to transfer data wireless for the purposes of identification.  RFID tags can be used with barcodes.  For example a pallet may be identified by an RFID tag but each item in the pallet may contain a barcode.  Barcodes are less expensive than RFID tags.  RFID tags can be read hundreds at a time whereas barcodes must be scanned one at a time.  Barcodes can be sent via email such as movie ticket or flight ticket and read off of a screen of mobile device.  A RFID chip does not require a line of sight to the reader.  Each RFID chip has a unique identifier.  Many passports include an RFID chip as do electronic toll transponders.  An RFID tag can typically hold a few kilobytes of data.

NFC or Near Field Communication is a set of standards for two devices in close proximity to establish radio communication based on RFID.  NFC can be used to bootstrap more capable wireless connections such as Bluetooth.  It is also used for mobile payment such as PayPass.  It enables two way communication.  iOS does not support NFC.  On Google Nexus devices the feature is called Android Beam.  On Samsung devices it is known as S-Beam.  NFC has a lower transfer rate, requires less power, and sets up more quickly than Bluetooth.

Bluetooth is a wireless technology for exchanging data over short distances similar to NFC.

iBeacon is an indoor positioning system used by Apple Inc.  It uses Bluetooth Low Energy.

For additional details on the Barcode Scanner plugin see the JavaScript file in a project that includes this plugin at


or the JS Documentation at Kapsel Barcode Scanner API Reference.

The following steps will demonstrate an example of using this plugin.  Note, the Kapsel Barcode Scanner requires the Android SDK Build-tools to be >= 19.0.3 otherwise an error of java.lang.NoClassDefFoundError may occur when calling scan.

  • Create the project.
    cordova -d create C:\Kapsel_Projects\BarcodeScannerDemo com.mycompany.barcodescanner BarcodeScannerDemo "{\"plugin_search_path\":\"C:/SAP/MobileSDK3/KapselSDK/plugins/\"}"
    cd C:\Kapsel_Projects\BarcodeScannerDemo
    cordova -d platform add android
    cordova -d create ~/Documents/Kapsel_Projects/BarcodeScannerDemo com.mycompany.barcodescanner BarcodeScannerDemo "{\"plugin_search_path\":\"/Users/i826567/SAP/MobileSDK3/KapselSDK/plugins/\"}"
    cd ~/Documents/Kapsel_Projects/BarcodeScannerDemo
    cordova -d platform add ios
  • Add the device plugin to determine if the device is Android or iOS, and then either the Kapsel or open source barcode scanner.
    cordova -d plugin add 
    cordova -d plugin add
    cordova -d plugin add
  • To workaround a bug on Android that occurs when encode is called (if using open source plugin), modify C:\Kapsel_Projects\BarcodeScannerDemo\platforms\android\res\menu\encode.xml. See also Encode doesn’t work on Android.
    <menu xmlns:android="">
      <item android:id="@+id/menu_share"
      <item android:id="@+id/menu_encode"
  • Replace www\index.html with the contents of index.html.
  • Copy the files to the platform directory by running
    cordova -d prepare
  • Use the Android IDE or Xcode to deploy and run the project.
    Find or create (QR generator) and then scan a barcode.

    Note that on iOS, make sure that the character encoding is set to IOS-8859-1.


    Note that the encode functionality is only available in the Android implementation of the plugin as noted in issue #106 in the barcodeScanner issues list.

    Here is the result of calling encode on a URL.

It is also possible to use the SAPUI5 sap.ndc.BarCodeScannerButton.  This is part of the sap.ndc package which has controls with native device capabilities.
Here is a simple example index2.html that makes use of this control and a few screenshots demonstrating how it looks.


Note if the Barcode scanner is unable to successfully complete the scan, the following dialog appears to enable manual entry.


Another example is available at BarCodeScannerButton.

Back to Getting Started With Kapsel

You must be Logged on to comment or reply to a post.
  • Hi Dan,

    I am getting below error when i imported android project into workspace:

    (modified encode.xml file, replaced index.html file, ran cordova prepare)


    Did i miss something?



  • Great series of tutorials Dan! Thanks for taking the time to identify all of the installation, setup and configuration steps needed to get these demos to work. Really saved me a lot of time and frustration.

    Can you turn your attention to as in-depth a tutorial on creating Agentry apps please? 🙂

  • The plugin is working but I have a problem in SMP 3.0, or even if I just add the logon plugin

    Why do I always go to the lockscreen when I use the logon plugin with the barcode scanner?

    Is there a way to skip the lockscreen?

    • Yes, there is a passcode policy that is read from the SMP 3.0 server after the registration occurs.  If the setting Default password allowed is checked, then on the set app passcode screen shown following the registration screen it is possible to  press the Disable Passcode button after which there will be no lockscreen shown.


      It is also possible to skip the Set App Passcode screen by adding some custom JavaScript code to your app.  See

      (search for This code will enable the Registration screen and the passcode screen to be skipped)

      or if you are using the SAP Fiori Client have a look at Getting Started with Kapsel - Part 14 -- SAP Fiori Client (New in SP04)

      (search for It is possible to not show the Set App Passcode screen by making the below modifications to either fioriclient.js file)

      Finally, if you are calling sap.Logon.initPasscodeManager(successCallback, errorCallback, appId, null, passcodePolicy, context);

      and not registering with an SMP server you can provide the passcode policy.  There is an example of this in sample for this section.


      Dan van Leeuwen

  • Hi Dan,

    Can we use Kapsel with UI5 on Hand Held Devices for Radio-Frequency Identification??? HHT does not have any Camera which I talking about. Eg Motorala MC3000 or MC2180.



    • Hi Dan,

      Is the new BarCodeScannerButton control supposed to work with iOS? When I try it on my iPhone (still running iOS 8) I get the dialog to enter the barcode and a message that says Scanner is not available. Can it use the camera of the device as a scanner?



      • That normally means that the barcode scanner plugin has not been added to your cordova project.  I would try adding the kapsel barcode scanner plugin.  If it is still not working, let me know versions of the SDK and Cordova are you using and I can give it a quick try.  Note, the SP09+ version of this guide is available at Getting Started with Kapsel - Part 1 (SP09+)


        Dan van Leeuwen

        • Oh I see. I was testing with the link you provided at BarcodeScannerButton - sap.ndc and didn't realize that it required the Cordova plugin (still sleepy I guess). What is interesting is if you try that link on a Mac, it launches the camera but doesn't scan.

          Do you know of any other documentation on the sap.ndc library than what is in the JsDoc report? Its a little thin.



  • Hello Dan,

    I use the SAPUI5 sap.ndc.BarCodeScannerButton   API to Implementation the function ,but I run into a problem , whether in my PC or Android mobile phone ,  the system can't detect my camera and give a dialog to input it . I use the SAP WEB IDE to development , I can run it in my own project base on cordova and barcodeScanner plugin , I'd like to ask what I didn't expect,thank you !

    • Is this a web application?  If so, it would need to be opened in a SAP Fiori Client that contains the cordova plugins and the barcode scanner plugin.

      Alternatively, you could place your html file inside of a Cordova app that includes the barcode scanner plugin.

      The sap.ndc.BarCodeScannerButton will only invoke the camera of the device if it detects the presence of the barcode scanner plugin.

      Hope that helps,

      Dan van Leeuwen