Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

Build SAPUI5 Cordova Barcode Scanner with OData Service

$
0
0

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:

1403304389495.jpg1403304401680.jpg1403304411030.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.

3.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:

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

6.jpg

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

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

5.jpg

 

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

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


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>