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:

Required Components

• Cordova
• Barcode-scanner plugin for Cordova
  Please refer to this blog on how to setup those components: http://scn.sap.com/community/developer-center/front-end/blog/2014/03/14/integrating-barcode-scanner-functionality-in-sapui5-or-cordova-application
• OData service

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.

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:

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

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

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.

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

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.