Skip to Content

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.” – http://phonegap.com/

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 https://build.phonegap.com/
  • Provides a generic Javascript interface to native capabilities of the devices
    http://docs.phonegap.com/en/1.7.0/index.html
  • 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
    https://github.com/phonegap/phonegap-plugins
  • 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 http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

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

Step 1:

Setup a PhoneGap project based on your mobile platform from http://phonegap.com/start .

I’ve used the Android development environment on Eclipse.

Step 2:

Download SAPUI5 beta

Step 3:

Unzip the SAPUI5 beta and the file sapui5-static.zip.

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

/wp-content/uploads/2012/05/phonegap_100692.png

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"
      type="text/javascript"
      src="sapui5/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_platinum"
      data-sap-ui-libs="sap.ui.commons">
</script>

For a full example file that can be used, please see https://gist.github.com/2659702

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 = jQuery.sap.sjax({url:sUrl});
try {
          if (oResponse.success) {
                    var oServerCfg = {};
                    if (typeof oResponse.data == "string") {
                              try {
                                        oServerCfg = jQuery.parseJSON(oResponse.data);
                              } catch(ex) {
                                        jQuery.sap.log.warning("Error when parsing the JSON configuration content from " + sUrl + " : " + ex);
                              }
                    } else {
                              oServerCfg = oResponse.data;
                    }
                    for (var n in M_SETTINGS) {
                              if (oServerCfg[n]) {
                                        setValue(n, oServerCfg[n]);
                              }
                    }
          }
} catch(ex2){
          jQuery.sap.log.error("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

Screenshot_2012-05-11-16-04-43.png

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

Follow the instructions at https://build.phonegap.com/

Conclusion

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.

Screenshot_2012-05-11-16-08-39.png

To report this post you need to login first.

13 Comments

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

  1. Krishnakumar Ramamoorthy

    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.

    Cheers

    (0) 
    1. Dagfinn Parnas

      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.

      Dagfinn

      (0) 
  2. Trond Stroemme

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

    Cheers,

    Trond

    (0) 
    1. Dagfinn Parnas

      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 http://scn.sap.com/community/developer-center/mobility-platform/blog/2012/04/10/developer-announcemnet-third-party-tools . 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 http://scn.sap.com/community/developer-center/cloud-platform/blog/2012/05/25/exposing-a-rest-api-from-sapnwcloud&nbsp; )

      Regards

      Dagfinn

      (0) 
  3. Dagfinn Parnas

    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.

    http://allthatjs.com/2012/02/23/getting-started-with-sapui5/


    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.


    Thanks.

    Noli

    (0) 
    1. Dagfinn Parnas

      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

      http://marakana.com/s/the_financial_times_web_app_and_the_future_of_the_mobile_web,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.

      Regards

      Dagfinn

      (0) 
      1. Noli Sicad

        Hi Dagfinn,

        I tried building your demo to see it myself. I used your gist.

        I used PhoneGap / Cordova 1.7.0 for iOS app – XCode 4.3 for iOS 5.0. (I have been building PhoneGap / Cordova for a while now – (i.e more than 10 months)). However, I can’t make the demo working.

        No errors, just a blank page. I run index.html in Safari desktop first, then run PhoneGap project. It’s all blank – white screen.

        What might be the problem?

        Edit: I just use the accordion.html. I renamed it to index.html and put into my PhoneGap Xcode project. It works.

        However, as I always suspected that the UI elements are not useable. It is too small for touch devices (e.g. iPhone and iPad). Well, at the first place, I think SAPUI5 is not intended to be used for mobile devices (smartphone and tablets).

        I wish SAP could make SAPUI for mobile devices using jQTouch or jqMobi.

        Here are some of my screenshots for jQTouch and jqMobi for SAP. It is very usable. jQTouch and jqMobi are jQuery UI framework.

        https://picasaweb.google.com/116847891529748214201/SAPJQTouchAndPhoneGapNativeControls 

        SAP should make more SAP widgets for jQTouch and jqMobi instead of going to Sencha Touch (not jQuery). Sencha Touch is nice, plenty of nice widgets/controls, however, learning it has steep learning curve. Creating more widgets / UI controls for jqMobi is not really hard to do. It is open source as well.

        Edit: Here are the 2 screenshots of SAPUI5 and PhoneGap in iPad.

        https://picasaweb.google.com/116847891529748214201/SAPJQTouchAndPhoneGapNativeControls#5755953727962563346

        https://picasaweb.google.com/116847891529748214201/SAPJQTouchAndPhoneGapNativeControls#5755953739173931986

        SAPUI5 is unuseable for mobile devices unless you have a mouse and stylus :-).

        Thanks. Noli

        (0) 
          1. Noli Sicad

            SAP has already in-house HTML5,CSS, (jQuery(?) / javascript) framework that works with PhoneGap for mobile devices (e.g. Android). Here is comment of Sarah McMullin,

            “Correction”

            “As part of the development team I wanted to clarify that we did not use the Sencha frameworks as your post alluded to. We used an in-house framework combined with phone gap for the Android HTML5 Recalls Plus mobile application available today on Google Play US marketplace: https://play.google.com/store /apps/details?id=com.sap.recallsplus

            From: http://www.zdnet.com/blog/sybase/sap-ports-first-hana-based-consumer-mobile-app-to-android-in-just-5-weeks/3163

            I wonder when if SAP would be releasing this framework or not.

            Thanks,

            Noli

            (0) 

Leave a Reply