Skip to Content
Author's profile photo Renald Wittwer

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.

This is exactly was Apache Cordova does. You can run your Webpages in a native app and access all devices via JavaScript. One other big advantage is, that all pages are on your device, so the performance is higher than in a browser.

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

The Idea

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.


The Environment

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:

GitHub Barcode Example

As described on this page, we add the needed Plugin to our Cordova project with the following command line

$ cordova plugins add

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


That’s it!

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.

Have fun!

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Gopi Nidjelli
      Gopi Nidjelli

      Very nice blog. Tried it and works perfect on ios device.  Thank you.

      Author's profile photo Renald Wittwer
      Renald Wittwer
      Blog Post Author

      Thanks for the feedback! Comments like yours motivating me ...

      Author's profile photo Vishnu Pankajakshan Panicker
      Vishnu Pankajakshan Panicker




      Author's profile photo Former Member
      Former Member




      Author's profile photo Former Member
      Former Member

      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,

      Meenakshi I

      Author's profile photo Former Member
      Former Member

      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.



      Author's profile photo Renald Wittwer
      Renald Wittwer
      Blog Post Author

      Hello Uma,

      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.

      Best regards


      Author's profile photo Vojtech Licka
      Vojtech Licka

      Hello Renald,

      Thank you very much for sharing this post. I try it on Android  and it works perfect.



      Author's profile photo Former Member
      Former Member

      Hi Vojtech Licka,

      What did you use to developed it in android?



      Author's profile photo Vojtech Licka
      Vojtech Licka

      Hi Kenzi,

      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

      Author's profile photo Renald Wittwer
      Renald Wittwer
      Blog Post Author

      Hello Pad,

      you should open a thread / discussion, that your question is searchable and can be answered by everybody.

      Best regards


      Author's profile photo Renald Wittwer
      Renald Wittwer
      Blog Post Author

      Hello Pad,

      I have no idea how this should work w/o Xcode.

      Best regards


      Author's profile photo Former Member
      Former Member

      Hello Renald,

      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.

      Thanking you.



      Author's profile photo Chetan Mahamune
      Chetan Mahamune

      Hello Renald,

      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?

      Author's profile photo Dhruv Shah
      Dhruv Shah

      Hello Chetan,

      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

      Author's profile photo Saurabh Singh
      Saurabh Singh


      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.



      Author's profile photo Arthur Fuscella Silva
      Arthur Fuscella Silva

      Great document, now I can see better how API's and SAPUI5 work together.

      Author's profile photo S M Firoz Ashraf
      S M Firoz Ashraf

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


      Author's profile photo Michael Dräyer
      Michael Dräyer

      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!




      Author's profile photo Former Member
      Former Member

      Hello is there any new update to this app?

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan


      Nice blog,

      I try this but How can I deploy this project ABAP server?

      Is it possible?



      Author's profile photo Renald Wittwer
      Renald Wittwer
      Blog Post Author


      this solution is intend to run as an application, not as a web page.

      Best regards



      Author's profile photo sumit balaiya
      sumit balaiya

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

      Author's profile photo Former Member
      Former Member

      Hi,what about for QR Code will the above code works for this as well.