HTML5 Mobile with SAP – A lot easier than you think part II

In my previous blog HTML5 Mobile with SAP – A lot easier than you think,

I talked about a simple straightforward alternative to a native app by using JQuery Mobile and BSP. Since the response to that blog was very positive, I said I would do a follow up to demonstrate just how easy this is actually is.

Please keep in mind that I am not endorsing HTML5 Mobile as being the best approach in every situation. The best approach always depends on the evaluation of your customer’s requirements. So, listen to your customer and ask a lot of questions.

Anyhow, below is a screen shot of a prototype I did before we started with the mobile part of our ADRM (Automated Deal Roadmap) project. In this blog, I will not cover all the details of developing a chart in HTML5, but I will provide a couple of links that will provide some very detailed information on how to do this yourself. The actual purpose of this blog is just to share the basic idea and fundamental steps involved in creating a mobile web app.

1. Data Model (sample)/Data Access Layer
2. Service Layer
3. BSP Application (Application frame)
4. Presentation Layer (HTML5/JQuery Mobile)

1) Data Model/Data Access Layer

Every good application starts with a solid data model. For demo purposes, I created a couple of tables that will store some of the aggregated data that will be displayed later in our HTML5 Charts.

Table on left side to display key figures by Region:

Table on the right to display key figures by Quarter

Now that we have our tables created, we can create our data access layer. Since we want to consume our data via JSON (JavaScript Object Notation), we might want to split this up into two parts:

1. Data Access
2. Data transformation (e.g., xml or json)

To do this, I created the following class that does both:

The “GET_<keyfigure>_JSON method calls the corresponding data access method that picks up the data directly from our tables and transforms the data into the JSON (JavaScript Object Notation) format:

2) Service Layer

Of course, there are several ways to expose your services (Web Services, Gateway, and even a BSP, etc…), however; for purposes of this blog, we will create a simple HTTP Handler and register our service in the transaction SICF. Before we register the service, let’s create our HTTP Handler first, which implements the interface IF_HTTP_EXTENSION:

As you can see, we have two service methods and they both do nothing but call our JSON methods from our Data Access Layer and return the string results:

Now that we have both of our service methods implemented, we need to implement the IF_HTTP_EXTENSION~HANDLE_REQUEST method, which is our service entry point whenever one of our services is called. In this method, we basically double check if the ICF nodename that is requested is indeed active and exists, and then we make a dynamic call to our service method. The return type of your service method is a simple JSON string, which we then put into the server response. Incidentally, I learned this trick originally from Brian McKellar who is absolutely amazing. If you get a chance, please check out some of his content on SCN: http://scn.sap.com/people/brian.mckellar/content

* Process command (WHEN OTHERS not required, because of security check above)
CALL METHOD (function)
EXPORTING
server = server
RECEIVING
value    = json.

* Set the MIME type correctly
server->set_compression( EXCEPTIONS OTHERS = 99 ).
server->response->set_status( code = 200 reason = ‘OK’ ).
server->response->set_header_field( name = 

       if_http_header_fields=>content_type value = lv_content_type ).
server->response->set_cdata( json ).

* Tell ICF framework we handled the request
me->if_http_extension~lifetime_rc =

  if_http_extension=>co_lifetime_keep.
me->if_http_extension~flow_rc     = if_http_extension=>co_flow_ok.

Now that we have our HTTP Handler, we can 1) create our service node and 2) ceate two subnodes that correspond to our our service methods in SICF:

1) Create Service and maintain our service handler that we created above:

2) Create two subnodes as shown below:

Notice that the subnode names we created correspond directy to our services methods in our HTTP Handler. As mentioned above, the name is pulled directly from the URL in our IF_HTTP_EXTENSION~HANDLE_REQUEST method and then the service method is called dynamically sending in a reference to IF_HTTP_SERVER and returning the JSON string.

3) BSP Application

If you read my first blog, you might recall that I included a link to some BSP resources and documenation. And if you read through some of the material, you might have noticed that there are several ways to implement a BSP application.

For example, you can implement several BSP Classes to fully enforce the MVC (Model View Controller) pattern or you can create an application with embedded event handlers (i.e., Pages with Flow Logic). For the purpose of this example, I created an application (i.e., zadrm_gcofc) with a single page (i.e., gco_mobile.html) that contains all my flow logic and acts as a web container for our mobile app (JQuery Mobile, CSS, Java Script).

Once we have finished creating our BSP application, we will create a couple of attributes that will be used to store our JSON strings as shown below.

After we’ve done that, we can go into the “OnInitialization” Event Handler of our Page to make a call to our data access layer methods as shown below.

This event handler is only called once as soon as the application is called up in the browser. Additional calls for drilling deeper into your data can be done by calling our service methods in JavaScript using the JQuery Mobile AJAX API like this:

…Or directly like this:

One huge advantage with the JQuery Mobile API is that it provides a high-level API that allows you to issue the request without having to first determine what type of browser is being used to view your app. The main difference between the two examples above is that the first one will run on just about any browser, whereas the second one will only work on certain browsers like Safari and Firefox.

The next thing we need to do is clean up the layout of our BSP. When you created your page, you might have noticed that the system automatically generated some <HTMLB> tags. You can go ahead and get rid of that, along with the HTMLB extension tag at the top, but leave the ABAP language tag.

5) Presentation Layer (HTML5/JQuery Mobile)

Now that we have our BSP set up, we will include the JQuery Mobile files between our <HEAD> tags as described in the JQuery Mobile quick start guide:

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

Below we will assign the values of our ABAP Page attribute that we created above and filled with data in our “OnInitialization” event handler to some JavaScript variables.

With this in place, you can start using JQuery Mobile syntax to create your page content. I suggest you take the time to go through some of the examples on the JQuery site to get yourself familiar with the syntax and concept. In a nutshell, you will be placing your own content (i.e., charts and images) between <DIV> tags that carry a special syntax that is recognizable and rendered by the JQuery library

To create the chart above in the screenshot of the prototype I put together, I simply used some sample code from David Pallmann and just added the Touch event for the Region drilldown at which point I refresh the data for the chart on the right hand side by calling our service methods in JavaScript. To download the sample code for the chart, please visit David’s web page using the following link:

http://davidpallmann.blogspot.de/2011/10/adventures-in-html5-bouncy-bar-chart.html

Another option is to use an open-source charting library like jqPlot, which is what I did for the actual project.

http://www.jqplot.com/index.php

This is a very simple approach. In your JQuery Mobile page, between the data-role content <DIV> tag, you can include a marker for your Chart by creating another <DIV> tag and assigning it a unique ID. Then, in JavaScript, you can use your Data Arrays to fill it up with life.

Here’s a nice detailed blog from Steffen Fröhlich on how to work with jqPlot within BSP:

http://scn.sap.com/community/ui-technology/blog/2012/06/11/jqplot-with-bsp-pages#comment-313774

So, that’s pretty much it. Once you have the following 4 fundamental steps in place, you will be able to easily create content like charts and other UI controls.

1. Data Model (sample)/Data Access Layer
2. Service Layer
3. BSP Application (Application frame)
4. Presentation Layer (HTML5/JQuery Mobile)

As always, I hope this blog was helpful and informative. I’m currently working on a project to build a native iOS App for the iPad using the SAP Mobile Application Platform (Sybase Relay Server, SUP, NW Gateway). So, I’m thinking my next blog might be on something like that.