Skip to Content

Building awesome mobile apps with SAPUI5 and PhoneGap

Overview and why SAPUI5 is awesome

In a recent blog, DJ Adams points out that SAPUI5 represents a fundamentally different direction than existing SAP UI technologies. One of the goals of SAPUI5 can be seen as to facilitate and catalyze innovation around the core business systems that SAP delivers. For this to work, SAP must embrace the prevalent technologies and patterns that have gained momentum on the web. With SAPUI5 the “not invented here” syndrome has been surpressed, and for a lot of scenarios this approach gives significant benefits:

  1. Developers do not need SAP specific skills, but can instead use HTML5 and javascript competence a lot of them already have.
    In effect this means better capacity and lower costs
  2. Developers can continue to use frameworks that they know and love. Frameworks such as jQuery, backbone, underscore and PhoneGap, but also the new killer framework that will be invented sometime in 2013 (let’s call it aWes_ome)

In my company bouvet, we want to test out the second benefit and choose to the experiment with PhoneGap (aka. Apache Cordova). PhoneGap allows us to create mobile apps with HTML5 and Javascript and package it as native app to all major mobile platforms (iOS, Android, Windows phone ++)

Hope you enjoy this simple proof of concept mobile app with SAPUI5 and PhoneGap.

Let’s get started.

Why PhoneGap is awesome

“PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript.” –

Hybrid web containers such as PhoneGap are an alternative to both native mobile app development (different for each mobile platform) and mobile-enabled web sites. Here is why you should care about PhoneGap:

  • Develop application in HTML5 and Javascript
    (no new competence required for each mobile platform)
  • Behaves as a native app with an app icon, update via app store etc
  • Package and deploy the same app to all major mobile platforms.
    There is even a build services that automates the process
  • Provides a generic Javascript interface to native capabilities of the devices
  • Possible to implement native plugins for each mobile platform and call it from javascript.
    For those case when the javascript device API is not sufficient; for example push notifications
  • Cross-origin resource sharing will work automatically since there is no domain conflict
    (As PhoneGap html files are hosted under the file protocol).
    Great for consuming SAP NetWeaver Gateway services
    More about Cross-origin resource sharing at

Step-by-step guide for being awesome with SAPUI5 and PhoneGap

Step 1:

Setup a PhoneGap project based on your mobile platform from .

I’ve used the Android development environment on Eclipse.

Step 2:

Download SAPUI5 beta

Step 3:

Unzip the SAPUI5 beta and the file

Copy the resources folder to \project\assets\www\sapui5\

In addtion, I’ve created the

  • Folder \project\assets\www\phonegap for the phonegap javascript api
  • Folder \project\assets\www\app_resources for specific web resources for my app

At this moment my project’s file system is like this


Step 4:

Create the file \project\assets\www\index.html

This is the starting page for your app

Here you should refer to both PhoneGap and SAPUI5 javascripts. Please note that you should not include a / at the start of the reference

<script type="text/javascript" charset="utf-8" src="phonegap/cordova-1.6.0.js"></script>
<script id="sap-ui-bootstrap"

For a full example file that can be used, please see

Step 5:

There is a small bug in SAPUI5 beta that you’ll experience if you run the app at this time.

The message you get is ” Uncaught TypeError: Cannot read property ‘theme’ of nul at file:///android_asset/www/sapui5/resources/sap-ui-core.js:12931″

The error is at line 12931 of the file /projectasset/www/sapui5/resources/sap-ui-core.js .

My workaround was to edit this file by adding try catch clause, and this stopped the problem..

Here is the code I ended up using

// 2. read server wide sapui5 configuration
var sUrl = "/sap-ui-config.json"; // TODO: make configurable
var oResponse ={url:sUrl});
try {
          if (oResponse.success) {
                    var oServerCfg = {};
                    if (typeof == "string") {
                              try {
                                        oServerCfg = jQuery.parseJSON(;
                              } catch(ex) {
                              "Error when parsing the JSON configuration content from " + sUrl + " : " + ex);
                    } else {
                              oServerCfg =;
                    for (var n in M_SETTINGS) {
                              if (oServerCfg[n]) {
                                        setValue(n, oServerCfg[n]);
} catch(ex2){
"Error when parsing the JSON configuration content from " + sUrl + " : " + ex2);

Step 6: Profit !

Build the android app and deploy the application to mobile device.

This a screenshot from the app you’ve now hopefully built


Step 7: (optional) Package for all other mobile platforms

Follow the instructions at


Hopefully, you’ve seen how easy it is to integrate SAPUI5 with PhoneGap and I think this applies to alot of the other de-facto standard frameworks on the web.

SAPUI5 works very well with mobile devices, though not all components and aspects of it are yet optimized for mobile.

I’ll leave you with a more advanced example, showing the Feed component. Don’t forget to be awesome.


You must be Logged on to comment or reply to a post.
  • Pretty cool Dagfinn. Thanks for this blog. I just bought a Android device as well. The emulator was always an issue for me and now with a real device, it should be OK to quickly test.


    • Thanks KK,

      Would have liked to include the Android app (.apk  file) in the post, but I assume the sapui5 beta license would not allow me to do it.


  • Great blog. Can anyone explain how this relates to SAP's own SUP solutions? Is it a completely parallel approach to mobile development, or should they be considered as complimentary? I don't see any integration with any SAP ERP backend here...?



    • Hi,

      The main point of this blog is to show that sapui5 is very versatile and is suitable for

      mobile usage. It focuses only on the front-end mobile interface, and not the backend.

      SAP is already going the same direction with SUP. They've partnered with Adobe, and are bringing phonegap support to SUP (as a hybrid webcontainer) ref . I assume sapui5 will also be made available from SUP developer tools, but it may take some time (since it is a Javascript library this should be easily achiveable without tool support as well). It is natural that SUP MBOs will be made available from phonegap, and this therefore solves the back-end part of the solution.

      SUP is definitively going to be the recommended solution by SAP for the mobile approach.

      However, as I've tried to demonstrate, the new technology components from SAP are flexible and can be "architectured" in many different ways.

      Here's an example to demonstrate the above.

      I could use Phonegap with sapui5 on a mobile device and use a REST API on sapnwcloud . This REST API could through the cloud connector be connected to an SAP onPremise system. Or in another case it could be connected to salesforce.

      (More info on sapnwncloud  )



  • Comment from the github gist

    In the current status SAPUI5, I wonder if you can really create an SAP iOS ap for Apple Store and SAP android app for Android Market place? I see that SAPUI5 is based on jQuery. However, I don't see SAPUI5 being a "touch" framework for mobile devices. It lacks mobile UI and touch events at the moment, I think.

    Yes, any UI (JS + HTML) framework can be compiled with PhoneGap including Tweeter Bootstrap but it is useful in mobile devices, this is big question. Tweeter Bootstrap + PhoneGap is not usable in mobiles devices as well.

    Please note that PhoneGap is not GUI. PhoneGap needs UI Touch web framework (e.g. JQTouch, jQueryMobile, jqMobi, etc) to be useful.

    I think SAPUI5 is designed for desktop as mentioned in this blog.

    BTW, thanks for posting this example.

    I hope SAPUI5 will works with UI "touch" framework for mobile devices especially scrolling.  BTW, JQuery Mobile + PhoneGap is slow, jQTouch and jqMobi are acceptable with PhoneGap.

    SAPUI5 + PhoneGap responsiveness in scroll list? I see in "Experiment #5 there is contacts.html, how the scroll on the contacts table in iOS or Android simulator?

    BTW, I maybe mistaken that there is UI "touch" framework including in SAPUI5 that works well with mobile devices (iOS and Android).

    I like to know more on SAPUI5 for (JS + HTML + PhoneGap) mobile devices.



    • Hi,

      In the current status SAPUI5, I wonder if you can really create an SAP iOS ap for Apple Store and SAP android app for Android Market place?

      Yes, from a technical point of view this is fully possible with the approach written above. I haven't investigate if there are any license issues you need to handle.

      However, I don't see SAPUI5 being a "touch" framework for mobile devices. It lacks mobile UI and touch events at the moment, I think.                  

      My impression is that sapui5 is positioned to support desktop, tablets and mobile devices. Desktop has probably had the highest focus so far, but from a strategy point of view sapui5 needs to cover all devices that can render HTML5 and javascript.

      Most of the UI components will work very well on desktops,tablets and mobile devices. The may not have the native look and feel of an iOS or Android UI component, but will work well. Some adjustments may be required in order to get the right touch feeling.

      However, already now the swipe touch events are being produced from the framework and you can connect behaviour to them (for example through CSS transformations).

      I do agree that there is currently HTML based mobile apps are not as responsive as the native counterpart. However, this trend is changing and some have done great work in this area. One example is Financial Times, have a look at this video from htmldevconf,1195/index.html

      Some of the more advanced UI component in sapui5 (such as Shell and Thinginspector) are suitable for desktop and tablets, but not for mobile (due to screensize). I expect that in the future sapui5 will contain a version of these components that works well on mobile. If SAP uses responsive web design it may be possible to have one code base for all of the three different platforms.

      It will be interesting to follow how sapui5 evolves with regards to mobile devices. The snappiness test would be very interesting to use more time to test.