I would like to share how easily to integrate the Cordova barcode-scanner plugin with the SAPUI5 app and connect to the OData back-end service to retrieve the material number and description.

We will deploy the SAPUI5 app on the Android and use it to scan the barcode label. Once the barcode label is recognized, we pass it to the OData request to get the description of the material number.

The app screenshots will look like as below:

/wp-content/uploads/2014/06/1403304389495_480853.jpg/wp-content/uploads/2014/06/1403304401680_480911.jpg/wp-content/uploads/2014/06/1403304411030_480912.jpg

Required Components

OData Service


I am using the customized OData service ZGW_MATERIAL_SRV that is calling the BAPI_MATERIAL_GET_DETAIL with material number as an input. You may refer to other blog how to setup the OData service.

/wp-content/uploads/2014/06/3_480249.jpg

Execute http://sapgatewayserver.com/sap/opu/odata/sap/ZGW_MATERIAL_SRV/Materials(‘<material_number>) in the Chrome browser to get the input.

The sapgatewayserver.com is your SAP Netweaver Gateway server and the material number, for my case is 0009620-081.

The OData output format will look like as per below screenshot:

/wp-content/uploads/2014/06/1_480269.jpg

Barcode Scanner Function


The doScan method performs the barcode scanning. It is calling the cordova plugin barcodeScanner to get the barcode number in result.text. Then pass this parameter to the OData query string to perform the OData query. The response  (i.e., response.data.Material & response.data.MatlDesc) will be captured and printed in the scanresult page.


doScan: function() {
  cordova.plugins.barcodeScanner.scan(
  function (result) {
  jQuery.sap.require("sap.ui.model.odata.datajs");
  var sUrl = "http://sapgatewayserver.com/sap/opu/odata/sap/ZGW_MATERIAL_SRV";
  var oModel = new sap.ui.model.odata.ODataModel(sUrl, true, "username", "password");
  oModel.read(
  "/Materials('" + result.text + "')",
  null,
  null,
  true,
  function(oData, response) {
  console.log(response.data.Material);
  var oMatID = []; var oMatDescr=[];
  oMatID.push(response.data.Material);
  oMatDescr.push(response.data.MatlDesc);
  var data = [];
  for(var i = 0; i < oMatID.length; i++) {
  data.push({"MatID": oMatID[i], "MatDescr": oMatDescr[i]});
  }
  var oModel1 = new sap.ui.model.json.JSONModel({ "zgwmat": data });
  sap.ui.getCore().setModel(oModel1, "zgwmatmodel");
  var bus = sap.ui.getCore().getEventBus();
  bus.publish("nav", "to", {
  id : "scanresult",
  });
  },
  function (err) {
              alert("Error in Get -- Request " + err.response.body);
                  console.log(err.response.body);
             }
  );
       },
     function (error) {
        alert("Scanning failed: " + error);
    }
  );
  },















The complete source code is available in the Github: https://github.com/ferrygun/SAPUI5CordovaBarcodeScanner


Create Cordova Project

Make a folder programs in your C:\ drive and create the cordova project by executing the following command:

  • cordova create C:\programs\barcodeScanner com.enterprisemobility.barcodeScanner barcodeScanner
  • cd barcodeScanner
  • cordova platform add android

Then copy all your files (except META-INF and WEB-INF) in Eclipse barcode-scanner WebContent folder to C:\programs\barcodeScanner\www

/wp-content/uploads/2014/06/6_480921.jpg

The final structure in C:\programs\barcodeScanner\www will be like this:

/wp-content/uploads/2014/06/7_480920.jpg


Build the Cordova Project

Execute the following command to build the cordova project under C:\programs\barcodeScanner

  • cordova build

If it’s successful, you will get the debug APK file (barcodeScanner-debug.apk) in C:\programs\barcodeScanner\platforms\android\ant-build.

Copy this APK to your Android device to test the app.

Generate Barcode

Please visit the http://www.barcode-generator.org/ to generate the online barcode to test the app.

Select a barcode: Code 128, enter the barcode number 0009620-081 and click on Create Barcode.

/wp-content/uploads/2014/06/5_480652.jpg

You will get the following barcode image. Print it, we will use it to scan the barcode label using our app.

/wp-content/uploads/2014/06/2_480220.jpg

Demo Video

I hope you enjoy and successful implementing the barcode plugin with your SAPUI5 app. Please feel free to drop any comment/feedback.

Thanks for reading my blog.

To report this post you need to login first.

12 Comments

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

    1. Ferry Gunawan Post author

      Thanks Krishna

       

      I never tried using the Windows Embedded OS. Maybe you could have a try and let us know if the Cordova works on that platform.

       

      Regards,

      Ferry

      (0) 
  1. Al Fortuner

    Hi Ferry! I just referred one of our customers to this page as a reference. He’s using our barcode scanners but wants the option of allowing his users to use the camera if they choose. With this example he was able to do the integration of the “soft” scanner in less than an afternoon! Thanks again.

     

    (0) 
  2. Rauf Shaikh

    Hi Ferry,

     

    Thanks a lot for sharing your knowledge.

     

    Can you please explain more about from where and how to copy SAPUI5 libraries like sap.ui.core.js etc to www folder.

     

     

    Regards,

    Rauf

    (0) 
  3. mounika k

    Hi Ferry,

     

    I have tried exactly what you said above.when I am  trying to build cordova ,iam facing with following error as “you may not have the required environment or os to build this project cordova” . Can you please explain what do you mean by this and help me in resolving it.

     

    Thanks in Advance

    mounika

    (0) 
  4. Diana Ciorcas

    If anyone may support with an indication on this, I would be very grateful.

     

    Is there a possibility to work with the Cordova Barcode Scanner offline? Or is it just working online?

     

    Thank you and regards,

    Diana

    (0) 

Leave a Reply