Skip to Content

Phonegap + OpenUI5 = App published on Play store [Packaging SAPUI5 application]

This blog will help you quickly understand the end-to-end packaging and publishing of SAPUI5 / OPENUI5 apps .This blog will be using Demokit Icon Explorer as the sample UI5 project to be packaged and published to Play Store. Here is a quick outline of the content :

  • Node / Phonegap / Cordova installation .
  • Android project creation using command line.
  • Importing project and integrating SAPUI5 code.
  • Build apk and publish on Play Store.

Node / Phonegap / Cordova installation

To start the development process of making a using a hybrid app using phone gap . Node js installation is required . You can download and install the node from the following link : node.js . Once the installation is done, install the cordova and phonegap using the following commands

on OS X and Linux:

$ sudo npm install -g cordova

on Windows:

C:\>npm install -g cordova
C:\> npm install -g phonegap 

Once installation completes, you can invoke phonegap on command line for further help.

Android project creation using command line:

To create a project for android platform use the follwing set of commands :

    $ cordova create hello com.example.hello HelloWorld
    $ cd hello
    $ cordova platform add android
    $ cordova build

More information can be found at the following url : PhoneGap API Documentation

Importing project and integrating SAPUI5 code:

  1. Launch the Eclipse application.
  2. Select the New Project menu item.
  3. Choose Android Project from Existing Code from the resulting dialog box, and press Next:
  4. If you’re using the CLI, navigate to the hello directory you created for the project, then to the platforms/androidsubdirectory. Alternately, if you use the create shell utility, simply navigate to the hello directory.
  5. Press Finish.

Now that the Phonegap project is ready and imported into the Eclipse IDE , time for some SAPUI5 action .

Set-up UI5 Resources :

The most basic requirement for UI5 application is to have resources in place .  Download the resources from OpenUI5 site and place in your imported project in the folowing hierarchy .


Once the resources are available , adjust the index file to load the UI5 Bootlader.

<!DOCTYPE html>



  <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

  <meta charset=”UTF-8″>

  <title>OpenUI5 Icon Explorer</title>

  <script type=”text/javascript” src=”cordova.js”></script>

  <script type=”text/javascript” src=”js/index.js”></script>

  <script id=”sap-ui-bootstrap”






  <link rel=”stylesheet” type=”text/css” href=”css/style.css”>


  <body class=”sapUiBody” id=”content”>



Load the application after the phonegap is ready (deviceready event ) . You incorporate this by modifying the index.js file

onDeviceReady: function() {



    // Update DOM on a Received Event

    receivedEvent: function(id) {

    // Tell UI5 where to find application content



    sap.ui.localResources(“util”);‘Application’, ‘Application’);

    // Launch application“Application”);

    var oApp = new Application({

    root : “content”


        console.log(‘Received Event: ‘ + id);


Build apk and publish on Play Store

Follow the link to publish the application Play Store : Publishing Overview | Android Developers

I will share the code on GitHub Shortly .

You can get the Icon Explorer app on Play Store (UI5 Icon Explorer – Android-Apps auf Google Play ) or scanning the QR Code below


You must be Logged on to comment or reply to a post.