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.
Thanks Ferry, I really need this. I will give a try and come back if any concern.
Many Thanks,
Warm Regards
Hemendra
Your welcome Hemendra. Please try it and let me know if you have any issue.
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
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
Thanks a lot.
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.
Hello, That's great!! Thank you too
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
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
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
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
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
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