Skip to Content
Author's profile photo Bince Mathew

UI5 App With Cordova Plugins

Hi All,

         This blog is related to integrating an UI5 application with Cordova plugins and deploying it as a native application.

The main plugins which i used to integrate with my UI5 apps are

  • Barcode Scanner
  • Camera
  • Google Maps
  • File Uploader

     First of all a short introduction to Cordova Plugins and Kapsel Plugins (there are a lot of detailed documents regarding Cordova and Kapsel plugins in SCN, but for new users who are into UI5 developments i am giving a short introduction).

     UI5 apps are HTML5 based web applications,Like any HTML5 apps it cannot interface with the hardware API’s of a device on which it is running by default.This is where containers like Cordova gives the HTML5/UI5 apps to be embedded within a native application and gives the ability to interact with the device hardwares. Basically cordova plugins are sort of a middlemen between your UI5 apps and the native API’s(like camera,Accelerometer,Location details,Network status etc) of the mobile Operating Systems.

     Cordova also generates a basic skeleton native app for the respective Mobile OS for us through a set of CLI(Command Line Interface) Commands.Once this native skeleton app is generated, we can place our UI5 app’s code (ie the files under the “webcontent” folder of the UI5 apps) into the skeleton app to install and run our UI5 app just like a native application for that mobile platform.Below is a High level overview of  web apps running within a cordova native app.It will be in the Webview layer in that diagram,where our UI5/HTML5 apps will be embedded and interfacing with the device native API’s via cordova’s plugins.

     Kapsel plugins are a set of plugins given by SAP specifically for integerating UI5 apps with SMP by means of Hybrid Apps or also known as Kapsel apps.The plugins provided are

  •     Logon
  •     AppUpdate
  •     Push
  •     EncryptedStorage
  •     Logger
  •     Settings
  •     AuthProxy
  •     Online Application
  •     Toolbar
  •     Barcode Scanner
  •     Application Preferences
  •     Cache Manager
  •     SAP Fiori Client
  •     Offline OData
  •     End-To-End Trace
  •     Attachment Viewer
  •     Calendar
  •     Printer

More details regarding Kapsel plugins and developments can be found in this link

                                                   High Level Overview Of Cordova Running Web-based Apps



To install cordova you will need

Currently cordova supports the following platform SDK’s

  • iOS (Mac)
  • Amazon Fire OS (Mac, Linux, Windows)
  • Android (Mac, Linux, Windows)
  • BlackBerry 10 (Mac, Linux, Windows)
  • Windows Phone 8 (Windows)
  • Windows (Windows)
  • Firefox OS (Mac, Linux, Windows)

Once Cordova is installed, make sure your android sdk path is mentioned in the environment variables of your system properties.


Once the sdk path is registered, we can start creating the skeleton app.


Create a cordova project from command line using the following code in command line

“cordova create MyUI5App MyUi5App”



Navigate into the project folder in cmd


Add phonegap barcode scanner plugin

cordova plugins add com.phonegap.plugins.barcodescanner

you can search for cordova plugins using

cordova plugins search “name”. Example:  cordova plugins search barcode



Cordova plugins i have installed into my app are

  • cordova plugin add
  • cordova plugin add org.apache.cordova.geolocation
  • cordova plugin add org.apache.cordova.device
  • cordova plugin add org.apache.cordova.file
  • cordova plugin add
  • cordova plugin add org.apache.cordova.battery-status
  • cordova plugin add org.apache.cordova.device-motion
  • cordova plugin add org.apache.cordova.device-orientation
  • cordova plugin add org.apache.cordova.console
  • cordova plugin add org.apache.cordova.inappbrowser

Additional plugins that you can explore are

  • cordova plugin add
  • cordova plugin add
  • cordova plugin add org.apache.cordova.file-transfer
  • cordova plugin add org.apache.cordova.dialogs
  • cordova plugin add org.apache.cordova.vibration
  • cordova plugin add org.apache.cordova.contacts
  • cordova plugin add org.apache.cordova.globalization
  • cordova plugin add org.apache.cordova.splashscreen

Type “cordova plugins” to get the list of cordova plugins added to your project


Add the required platforms to your project


You can get the list of supported platforms using “cordova platform”


Once the platform is added,When you open the actual project folder you can see the following folder structure,


contents inside the “www” folder of the cordova project.


Prepare the cordova project


on triggering prepare command, cordova will copy all the files in the “www” folder into the “platforms” folder.

If you have added two platforms(for example android and ios) then their will be two folders within the platforms folder named “android” and “ios” with its own folder structure within it.But both platforms will be having a “www” folder in it.

Cordova will be copying the sample code in the main “www” folder into these individual platform’s “www”  folders.

For my tutorial i have only added Android platform.So it has only “android” folder within the “platforms” folder.





Now we will compile the Cordova project to generate the .apk (installer file for android)



After compiling you will get the apk file for android in the “ant-build” folder


Install it in your android device.The output will be like the following


Now you can see the Skeleton Cordova App in your device.Our aim is to replace this splash screen with our our UI5 code and on starting of this application it should load the “index.html” of our custom UI5 app.

So now we need to import the cordova application code into eclipse.

Import the project as an existing android project into eclipse



Uncheck the “CordovaLib” from the list. We will add this to the project later.


Now go to properties of the project you imported

Go to java build path->click on Source tab->Add Folder->Select the “CordovaLib” folder


Now go to Resource->Resource Filters on the same window and delete all the exclude filter values

copy paste the webcontent folder contents of your SAPUI5 app into the cordova imported project’s “www” folder under assets->www


Now open the index.html of from the “www” folder of your cordova project. Overwrite its contents with your ui5 app’s “index.html” and additionally add reference to cordova libraries in the file.


Once the reference of the cordova plugins is done in the index.html,now you can access the cordova plugin methods for each hardware API’s in your UI5 application.

Example:  For getting the geolocation details of the device, you can call the following method in your required UI5 page.

navigator.geolocation.getCurrentPosition(onSuccess, onError);

onSuccess  : This method accepts a Position object, which contains the current GPS coordinates

onError: Catches errors like incase location services are disabled in your phone or any other excpetions.

Further API sample reference codes can be found in Apache Cordova API Documentation

After the coding is done, go to command Line of cordova and navigate to the cordova project path as i previously described.

Type the command “cordova compile” in the CLI. you will get the .apk file of your native cordova app with UI5 source code embedded in it.

Install the apk on your device and you will get your UI5 apps start screen instead of the default cordova splash screen.


Assigned Tags

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

      Hey Bince, great tutorial, thank you! But how can the app run in android emulator without integrating the SAP UI5 library files into the project? Thank you, Yannick

      Author's profile photo Bince Mathew
      Bince Mathew
      Blog Post Author

      Hi Yannick,
      This app is not having the UI5 Library within its source code, I am just referring the UI5 js files in the Index.html ( src="" ) for the app to download it directly from the server at runtime. If I include the UI5 Library in the source code, then the file size of the apk will be much higher.


      Author's profile photo Saurabh Singh
      Saurabh Singh

      Can you please share the contents of webcontent folder for reference purpose?

      Author's profile photo Bince Mathew
      Bince Mathew
      Blog Post Author

      Hi Saurabh,
                         You can access the source code from my Book’s Source Code page (Its under Chapter 9 Source code), The concept is similar to this, but that app has much more features like barcode scanning, camera integration etc using cordova.


      Author's profile photo Mathew Davis
      Mathew Davis

      Hi Bince

      Thanks for this great blog...!!!

      I have a requirement to track a user location. Can you guide me what is the best way to do?

      Thank you

      Author's profile photo Ankit Garg
      Ankit Garg

      Hi Bince,


      Thanks for sharing such a well explained blog.




      Author's profile photo Former Member
      Former Member

      Hi Bince,

      Thank you much for sharing your knowledge, I would like to know how oData connections will be done using mobile app i.e how will android .apk file will fetch the data from SAP system. Kindly help  me in that process

      Author's profile photo Former Member
      Former Member

      Hi Bince,

      thanks for your nice post!

      I tried to run the export-Example (export table as csv)

      It works in the browser but not on my android device. Do you have an idea how to configure cordova to run the export-functionality?





      Author's profile photo Former Member
      Former Member

      Hi Bince Mathew

      Really Helpful Blog!... Thanks

      Author's profile photo Kaan Ozdogan
      Kaan Ozdogan


      That's very helpful.

      I want to ask question.

      Can I deploy this project my SAP system from eclipse submit property?

      If yes How can I? I try it but I get this error


      "Problems reported while synchronizing ABAP File Repository Subscriber. 0 of 1 resources were synchronized.
      An error occurred synchronizing /barkod sapui5 v2: Could not fetch remote data for P/barkod sapui5 v2
      Could not fetch remote data for P/barkod sapui5 v2
      Error fetching repository backend URI from discovery document"





      Author's profile photo sagar u
      sagar u

      For logging out of cordova app use this guide. Make note of this you will thank later

      You can use window.cache.clear(success, error); and below link as alternative too