Using Camera as Barcode scanner on your mobile device in SAPUI5 app
One question that I get very often form my customers is: “How can I use all this mobile device functions like camera, GPS and all the other stuff in a Web Application?”.
As you might know the browser runs the Webpage in a sandbox for safety reasons. Direct access to devices like camera is not possible. Because of that reason we need to run the webpages in a native app.
For a prove of concept I choose the SAP Fiori like App from this great tutorial:
Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises
After finishing this Exercises I have a nice Fiori like app that is running in a browser. What I want to do is to use the camera of my iPad as a Barcode scanner. This are two tasks in one step. First we have to use the camera to scan the barcode an second the barcode must be translated from a picture to a value. That seems to be a good testcase.
I was surprised how easy it was to build this function. I will show the steps and the needed code.
At the end the application will look like this:
After pressing the Camera next to the Search Field, the Camera will be started and you can start to scan the Barcode. The result will be written into the Search Field and filter the list.
Some information of my environment. I run Eclipse on a Mac. We bring the App on an iPad and using the camera of the iPad. To do this you need to install Xcode on you Mac and you need a membership of the Apple Developer Program, what costs 80 Euro for one year.
This app won’t run in the simulator of Xcode, because you can’t use the camera in the simulator.
I expect that the shown solution also runs on android or other devices, but I didn’t test it. I would be happy for every feedback.
Create a Cordova Project from our SAP Fiori like App
We start at the point when you finishing the development of the SAP Fiori liked App. The next step is to install Apache Cordova. How to do this and how to create a Cordova Project is described on the following page:
Installing and running the command line interface of Apache Cordova
The next steps are very easy and straight forward. Copy all files of the “WebContent” folder of your Eclipse project into the “WWW” Folder of your Cordova project. Furthermore we need the resource files of SAPUI5. What I have done is to download the OPENUI5 runtime from OPENUI5 on GITHub.This project is able to run with OPENUI5, what is even more cooler.
Copy the recource Folder of OPENUI5 into the “WWW” Folder of the Cordova project. There are probably better solutions than to copy the folder in every project, but for this proof we use this very easy solution.
We are already at the point, where you can run out Fiori like app as a native app on your device. With the following command Cordova will build an iOS Xcode project:
$ cordova platform add ios
Open the new Xcode project that is created in the folder “platforms” of your Cordova project and run it. You can run it direct on your iPad or in the simulator. At this point we can run it in the simulator, because we don’t use the Camera so far.
If you want to build a native app on other platforms you can create it in the same way.
If you added the platform once, you should never change the source in the platform folder. After changing the source in the “WWW” folder of your Cordova project, you can update the platform depended code with:
$ cordova build ios
The Barcode scanner
Now we can start to develop the Barcode scanner. Actually we don’t develop it by our own, we use a Cordova plugin. First of all you have to add the Plugin into your Cordova project. The following page is a good starting page, if you need a Barcode scanning example that is running on its own:
As described on this page, we add the needed Plugin to our Cordova project with the following command line
cordova plugins add https://github.com/wildabeast/BarcodeScanner.git
Now we are at the most interesting part. We want that our SAP Fiori like App and the Barcode Scanner are playing together.
First we have to change the index.html. We have to add the Cordova Script
The next step is to add the Button next to the Search field. We do this in the Master.View.xml
The last but important changes are in Master.Controller.js.
– We build a handle for the Camera button
– We separate the filter in an own function, that it can be called after the scan
– We use sap.m.message.toast to output messages
Here are the changes of Master.Controller.js form the top
First we add the sap.m.MessageToast library
Second we change the handleSearch, that it calls our new function doFilter. The app should run without this change, but I love clean code:
Next we build the new handleCamera, that is called after pressing the Camera button. Here you can see that most of the work is done by the Plugin.
And last we build our new function doFilter that is called by handleSearch and handleCamera
Copy all that changes into your Cordova project, build the platform depended code again as describe, start Xcode and run this project on your iPad.
Very nice blog. Tried it and works perfect on ios device. Thank you.
Thanks for the feedback! Comments like yours motivating me ...
Hi Renald Wittwer,
Its very nice blog. But I am new in using Sapui5 and also don't have any knowledge on corvoda.
Can you plz share your "Cordova" and "Sapui5" project code? Its very help full to me.
Thanks & Regards,
Hi Renald Wittwer,
it is really nice blog.
I have a question: is this bar code scanner will scan long distance bar codes,
i.e in ware house,operator is standing and trying to read a bar code which is 6 to 10 meters on top of him.
is it depends on Camera zoom or cordova plugin has any capability of reading long distance bar codes.
to be honest, I don't know if the bar code scanner will scan long distances.
I think 6 to 10 meters could be a problem. But this depends on the camera and the size of the barcode.
Thank you very much for sharing this post. I try it on Android and it works perfect.
Hi Vojtech Licka,
What did you use to developed it in android?
I m apologize for my late response, bud I just used the steps, which Renald descriped in that blog. I only needed cordova android platform for my hybrid apps.
but Now I would recommend to you use HANA Cloud Platform WebIDE, where you can develope a hybrid app via HAT (Hybrid app Toolkit).
look at the Open SAP Course "Developing Mobile Apps with SAP HANA Cloud Platform"
Developing Mobile Apps with SAP HANA Cloud Platform - Jeff Gebo and Dhimant Patel
you should open a thread / discussion, that your question is searchable and can be answered by everybody.
I have no idea how this should work w/o Xcode.
I used the Xcode to developed the same example and it is running fine from the iPad. when we moved the same code into the SAP Fiori client 1.6 it doesnot work.
Please guide us how to move the Xcode code into the ABAP Repository and can used through Launchpad.
I have tried the same code for android platform and its working fine. It triggers my camera and scan the code as well. but it just shows the code in MessageToast after that it doesn't take the input to filter in search filed. I have created the code exactly as u have shown. Please suggest what am i missing?
I am trying same with Android, but when i am executing it is giving me the below image only. I have used cordova on android platform.
Can you please help me to execute this App
i have used cordova plugin in sap fiori client to scan barcode using tablets camera. The camera is opening in landscape mode, is it possible to open camera in potrait mode?
i have used this link for coding reference :
Please reply as soon as possible.
Great document, now I can see better how API's and SAPUI5 work together.
I have followed the guidelines to create a bar code scanner application that should look like
The steps that I have followed are:
1. Installed Node.js (version 6.9.2), Cordova (version 6.4.0), Android Studio (version 2.2.3) for Android SDK and Java 1.8
2. Created one cordova project “hello” on D drive in a particular folder.
3. Added phonegap barcode scanner plugin.
4. Added Android platform and did the build phase (cordova build android)
This resulted in the following file structure getting created
When I run this from Cordova CLI I am getting the expected file on my android emulator.
All is fine till here.
However, after adding my SAPUI5 code into www folder
and running the cordova project, I start getting a blank screen on the emulator.
Although on Eclipse my SAPUI5 app shows the fist screen
Following are my Eclipse Codes (Index, view & controller):
To figure out what went wrong I tried to run the index file in web browser (chrome & firefox both). Here the file gives 3-4 pop up messages and hangs up.
What could be missing??
Very nice blog, thank you.
Are u also familiar with generating a barcode in a UI5-App running on the FLP? I have a string and I need to generate a barcode (code 128) out of this string.
Any suggestions would be nice!
Hello is there any new update to this app?
I try this but How can I deploy this project ABAP server?
Is it possible?
this solution is intend to run as an application, not as a web page.
HI Renald Wittwer sir,
I have created Bar-code program in ECC using screen programming and use this T code from fiori where user read Bar-code through there scanner in table control and its working fine. now they want to scan Bar-code through TAB and mobile camera because they can not take there scanner to every where ..i don't know how i implement this code in my scenario. Any help will appreciated... ...
Hi,what about for QR Code will the above code works for this as well.