Skip to Content

/wp-content/uploads/2014/06/sap_logo_333927.png

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  http://www.barcoding.com/upc/#.U3Di1_ldUtI 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

project_name\plugins\com.sap.mp.cordova.plugins.barcodescanner\www\barcodescanner.js

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.
image4.PNG

  • 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 https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git 
    cordova -d plugin add com.sap.mp.cordova.plugins.barcodescanner
    or
    cordova -d plugin add
    https://github.com/wildabeast/BarcodeScanner
  • 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="http://schemas.android.com/apk/res/android">
      <item android:id="@+id/menu_share"
            android:title="@string/menu_share"
            android:icon="@android:drawable/ic_menu_share"
            android:orderInCategory="1"
            android:showAsAction="withText|ifRoom"/>
      <item android:id="@+id/menu_encode"
            android:title="@string/menu_encode_vcard"
            android:icon="@android:drawable/ic_menu_sort_alphabetically"
            android:orderInCategory="2"
            android:showAsAction="withText|ifRoom"/>
    </menu>
  • 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.
    image1.PNG

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

    image2.PNG

    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.
    image3.PNG

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.

image5.PNG

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

image6.PNG

Another example is available at BarCodeScannerButton.

Back to Getting Started With Kapsel

To report this post you need to login first.

20 Comments

You must be Logged on to comment or reply to a post.

  1. Jitendra Kansal

    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)

    BarCodeScanner.PNG

    Did i miss something?

    Rgrds,

    JK

    (0) 
    1. Daniel Van Leeuwen Post author

      Which Barcode scanning plugin are you working with?

      Are you using the open source one or the Kapsel one?

      C:\Kapsel_Projects\BarcodeScannerDemo\platforms\android\assets\www\plugins\com.phonegap.plugins.barcodescanner

      or

      C:\Kapsel_Projects\BarcodeScannerDemo\platforms\android\assets\www\plugins\com.sap.mp.cordova.plugins.barcodescanner

      Note the steps vary slightly depending on which one you are working with.

      Dan van Leeuwen

      (0) 
        1. Daniel Van Leeuwen Post author

          Only one is required.  I would remove one of them by typing

          cordova plugins

          and the then

          cordova plugin remove <id of plugin to remove>

          cordova prepare

          Note the step of modifying the encode.xml is only required if you use the open source plugin.

          (0) 
  2. Dave Fish

    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? 🙂

    (0) 
  3. Niki Vandersteen

    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?

    (0) 
    1. Daniel Van Leeuwen Post author

      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.

      See http://scn.sap.com/docs/DOC-50247#passwordpolicy

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

      http://scn.sap.com/docs/DOC-49524#custom

      (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. 

      http://scn.sap.com/docs/DOC-49530

      Regards,

      Dan van Leeuwen

      (0) 
  4. Nagesh Caparthy

    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.

    Regards,

    Nagesh

    (0) 
    1. David Fish

      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?

      Thanks,

      Dave

      (0) 
      1. Daniel Van Leeuwen Post author

        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+)

        Regards,

        Dan van Leeuwen

        (0) 
        1. David Fish

          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.

          Thanks,

          Dave

          (0) 
  5. 大灵 钟

    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 !

    (0) 
    1. Daniel Van Leeuwen Post author

      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

      (0) 

Leave a Reply