Skip to Content

HTML5 Mobile with SAP – A lot easier than you think

In this blog, I would like to share some of my experience in developing and working with HTML5 Mobile Web Apps using Business Server Pages (BSP).  This is mostly based on a recent project I worked on, in which our team had the requirement to develop a custom mobile app for one of our sales reporting solutions (Automated Deal Roadmap) running on BW 7.30 powered by HANA.

/wp-content/uploads/2012/06/photo_114616.png

For more information about the ADRM project and architecture, please take a look at a great blog from Matthias wild:

http://scn.sap.com/community/data-warehousing/netweaver-bw/blog/2011/10/02/how-does-analytics-look-like-on-bw-powered-by-hana

Hopefully, I will be able to provide a couple of helpful tips and a nice alternative to a native iOS app. Depending on the response of this blog, I will post a follow up to provide a step-by-step example of putting all the pieces together.

Lately, HTML5 has been making a lot of headway in the mobile scene, especially since it poses the very attractive notion that you can target all platforms with a single development. In fact, there are several open source libraries out there like Zepto and XUI that help you get started with this right out the box.

For our project, we went with JQuery Mobile.  JQuery Mobile provides a complete generic framework for developing sophisticated HTML5 mobile web apps, and at the same time, saves the developer the trouble of having to write platform specific code (JavaScript & CSS).

If you’re interested in learning more about JQuery Mobile, you can visit their site and take a look at the “Quick start guide”. From there, you will find all the information you need in order to quickly understand what resources are needed and how to get up and running with this amazing framework.

http://jquerymobile.com/demos/1.1.0/docs/about/getting-started.html

Let’s face it; there’s way more people out there who know JavaScript and HTML/HTML5 compared to Objective-C (programming language for the iOS/OS platform).  Also, if you’re reading this blog, chances are very strong that you’re already a pro at working with ABAP Objects. If not, don’t worry; ABAP is not at all complicated. The following link will give you a good overview of ABAP objects and also provide you with a number of other resources to get started:

http://wiki.sdn.sap.com/wiki/display/ABAP/ABAP+Objects

On the other hand, if you’ve already worked with ABAP, than you’re probably already familiar with Business Server Pages (BSP), which is a page-based programming model with server-side scripting as well as server page technology for developing Web Applications using HTML, JavaScript, and CSS (Cascading Style Sheet).  This means not only can you use the BSP framework to include all the necessary JQuery Mobile resources (JavaScript and CSS files), but In my follow up blog, I will show you how you can use it to create your service layer to retrieve data from your ABAP system in JSON or XML format. Also in the follow up blog, I will demonstrate how you can easily consume your services in JavaScript using the JQuery Ajax (Asynchronous JavaScript and XML) library.

Although BSP technology has been around for quite a while, it offers so much flexibility to accomplish a wide variety of different tasks. It seems like every time I get the feeling that I’ve reached a dead-end in a project, I can always count on BSP to get me out of the jam. For more information about Business Server Pages, including information on where to find sample applications in your system, visit the following link:

http://www.sdn.sap.com/irj/sdn/index?rid=/webcontent/uuid/8020ca24-b0f7-2c10-1aa8-94f052f54316

Finally, I hope I was able to provide some helpful information for people contemplating the idea of building a mobile app, but who would like to leverage their existing knowledge base in ABAP and, most of all, their existing SAP system landscape. Like I said, depending on the response, I would really like to post a follow up to give you an easy step-by-step on how to put all the pieces together.

29 Comments
You must be Logged on to comment or reply to a post.
    • Thanks for your comments Steve and good question. At the time, it seemed like the best choice based on the customer’s requirements and the fact I did not have a MacBook at the time. 🙂

      Also, to add to that, we had some pretty aggressive timelines in the project and did not have a lot of time to compare different libraries or mobile platforms.

  • I am wondering, how long did it take to develop the web interface? Because, you probably did a big job trying to support different mobile browsers (e.g. for iOS and Android).

    Is not it a secret, how many web pages does your application have? I want to imagine the application, since there is no even a video demo 🙂

    • Hi Vladislav and thank you for your questions. It took approximately 20 development days to do the frontend. Of course, it took a few days to get used to the framework and get a feel for all the JQuery Mobile APIs. The good thing about JQuery Mobile is that you don’t have to write any platform specific code to target a specific browser. However, this doesn’t include your own scripting code. That’s where you really have to pay attention.

      The good thing about our project is that we specifically targeted the iPad device, which made it a lot easier for us.

      For our app, we had a total of 5 pages, which are split up by <div> tags. I will try to explain this a bit more in detail in the follow up blog.

  • Hi Gabriel,

    Good job, looks great!  Interested to know, did you use NetWeaver Gateway to serve any of the REST APIs?  And I presume since this is using BSP, there is no SUP (SAP Mobile Platform) being used here, right?

    Regards

    John

    • Hi John,

      Thanks for your comments. No, we did not use Gateway nor did we use SUP for this project. However, I’m currently working on another native iOS mobile project, in which we will be using Gateway and SUP.

      Thanks and Best regards,

      Gabriel 

  • The application looks great. Interested in learning the framework you used, JSON usage in your application etc. Please post your step by step blog link here, so that we all will be notified. Thanks for sharing your experience. Very much appreciated.

    Raja

    • Hi Raja, Thank you so much for the positive feedback on my first blog. This really means a lot. I have already started working on the follow up to this, which should be ready in the next couple of days.

  • Very informative  for a novice like me .. I have been looking for some good articles on mobile programming and discovered this  😳

    I guess the follow up article would tell us  more about how to create a service layer, consuming those services through  jQuery framework..

    As you said,  it took 20 development days to do the frontend part for this apps. Won’t it be more faster to develop if we consider SUP?

    thanks..



    • Hi Tilak,

      I’m glad to hear it was informative to you. In fact, that was the main point…to share information about some of the different implementation possibilities out there. This, of course, is just one of many.

      I’m not exactly sure, if going through SUP would save on development time since in that system you are basically registering your service. Everything else up to that point has to already be in place. At any rate, I’m currently working on a project where we are making full use of the SAP Mobility Platform. This is also the reason, why it is taking much longer to post my follow up… sorry about that, but I do hope to post it very soon.

      Thanks to all for your patience and understanding.

      Best regards,

      Gabriel

  • Great blog. I would like to read more of this. Maybe you could also give some references on how to access the BI data (maybe as JSON).

    Thanks a lot, Vanessa

  • Hi

    Great Blog ! It is very informative and am excited to learn the way the solution was designed and built.

    Thanks for sharing.

    Regards

    Raj

  • This is a great article! I hope you decide to continue with this. Many developers out there still think SAP works with closed technologies. Way to go!

  • Gebriel,

    May be you can shed some light on this issue. We developed the App using HTML5. But it’s asking for credential again, when ever we revisit the web app (even in 2 minutes) after doing something in iPhone home screen. Of course users might not like to enter the login data every now and then unless its timeouts after prolonged period.

    Do you know how to resolve this issue?

    Raja

  • Thanks a lot Gabriel!!!

    I’m waiting for Dahsboards and mobile apps in HTML5 in order to show them on the IPAD. Unfortunately I couldnt make the time to code because of the several projects we’re finishing right now. But this post gave me some motivation to begin as soon as possible. Please keep on posting your experiences since this area is still kind of new for many of us.

    Best regards!

    Cristian

  • Hello Gabriel,

    I read ADRM project in http://scn.sap.com/community/data-warehousing/netweaver-bw/blog/2011/10/02/how-does-analytics-look-like-on-bw-powered-by-hana.

    In this

    Q1.How did you fetch data from BW system to ECC ?

    Q2.Did you use Bex query ,if so how did you consume Bex query results from BW to ECC side?

    Note:

    1.I am interested in developing a custom dashboard using BSP. Is it possible to do it with pie charts and all stuffs to deploy in iPad.

    2.I opt to develop dashboard because Xcelsius dashboards cant be deployed in iPad.

    As always your suggestions are always helpfull and means a lot to me.

    Thanks