Skip to Content
Author's profile photo Ferry Gunawan

Build SAPUI5 Cordova Barcode Scanner with OData Service

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.

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Thanks Ferry, I really need this. I will give a try and come back if any concern.

      Many Thanks,

       

      Warm Regards

      Hemendra

      Author's profile photo Ferry Gunawan
      Ferry Gunawan
      Blog Post Author

      Your welcome Hemendra. Please try it and let me know if you have any issue.

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

      Hi Ferry, Wonderful.

       

      I have a Motorola Barcode scanner/gun with Windows Embedded OS. Do you think Cordova should work there? Any suggestions?

       

      Thanks

      Krishna

      Author's profile photo Ferry Gunawan
      Ferry Gunawan
      Blog 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

      Author's profile photo Joao Sousa
      Joao Sousa

      Thanks a lot.

      Author's profile photo Former Member
      Former Member

      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.

       

      Author's profile photo Ferry Gunawan
      Ferry Gunawan
      Blog Post Author

      Hello, That's great!! Thank you too

      Author's profile photo Ferry Gunawan
      Ferry Gunawan
      Blog Post Author

      I have created similar blog to use the Cordova Barcode scanner plugin with SAP Screen Personas: http://scn.sap.com/community/gui/blog/2014/10/06/build-cordova-barcode-scanner-for-sap-screen-personas

      Author's profile photo Rauf Shaikh
      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

      Author's profile photo Former Member
      Former Member

      This is exactly what I have been looking for! Looking forward to pulling down your GitHub repo and having a play with it!

       

      Thank you for sharing!

      Lindsay

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Diana Pascu
      Diana Pascu

      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

      Author's profile photo Charan Naidu
      Charan Naidu

      Hi Ferry,

      I was trying to do this application building with my oData and I'm getting the .APK file but it is not triggering the views of the UI5 application. Now we are using the application using SAP WebIDE. hep me with this. How to do the application