Skip to Content

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)

/wp-content/uploads/2012/07/mobile_pic_121687.png

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:

/wp-content/uploads/2012/07/table_1_121799.png

Table on the right to display key figures by Quarter

/wp-content/uploads/2012/07/table_2_121800.png

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:

/wp-content/uploads/2012/07/class_3_121801.png

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:

/wp-content/uploads/2012/07/method_4_121802.png

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:

/wp-content/uploads/2012/07/handler_5_121803.png

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:

/wp-content/uploads/2012/07/handler_method_6_121804.png

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:

/wp-content/uploads/2012/07/handler_service_8_121805.png

2) Create two subnodes as shown below:

/wp-content/uploads/2012/07/service_subnodes_9_121806.png

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).

/wp-content/uploads/2012/07/bsp_10_121807.png

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.

/wp-content/uploads/2012/07/bsp_attributes_11_121808.png

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.

/wp-content/uploads/2012/07/bsp_oninit_12_121809.png

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:

/wp-content/uploads/2012/07/jscript_call_13_121810.png

…Or directly like this:

/wp-content/uploads/2012/07/jscript_call_14_121811.png

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

/wp-content/uploads/2012/07/jquery_files_15_121812.png

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.

/wp-content/uploads/2012/07/jscript_16_121813.png

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

/wp-content/uploads/2012/07/last_17_121814.png

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.

To report this post you need to login first.

20 Comments

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

    1. Gabriel Alvarez Post author

      Thank you, Abhijeet. Unfortunately, I didn’t invent anything in this case. I’m just basically putting different ideas together to come up with different ways of accomplishing things. At the same time, I really like the idea putting this stuff out there and sharing with the community.

      (0) 
      1. Abhijeet Kulkarni

        Both, the germination of idea, to its assembly into a concrete thing, are equally important, and must be respected. I appreciate your view about sharing, too. We all learn a lot from each other thus. 🙂

        (0) 
  1. Carlos Weffer

    Great Work Gabriel! Thanks for sharing it.

    Could you add some comments around security? How do you handle login/logouts and data access authorisations?

    Cheers,

    Carlos

    (0) 
    1. Gabriel Alvarez Post author

      Hi Carlos,

      In order to gain access to the backend via HTTPS through the BSP, we have to first install our certificate in Safari. Since all the different services in the app are coming from BW, the user has to have at least an information consumer role in order to be able to call up the BW queries.

      Before I wrap the queries data in JSON, I call up the function module RRW3_GET_QUERY_VIEW_DATA, which doesn’t bypass any BW authorization concept already in place.

      I hope this helps. If not, let me know.

      Thanks and Best regards,

      Gabriel

      (0) 
  2. Stars s

    Hi Gabriel,

    Your blog is very good.Actually i implemented Auto complete feature for any input field taking your concepts learned about JSON in this blog.Thanks a lot.Also ,you have mentioned you used single page(gco_mobile.html) to embed all other pages in it.Can you provide code snippet of it or guide me how you achieved it.Your help is appreciated.

    Thanks.

    (0) 
    1. Gabriel Alvarez Post author

      Hi Star,

      sure, no problem. Just let me know where exactly I can help out or where exactly you need help. I would be glad to help out.

      Best regards,

      Gabriel

      (0) 
      1. Bala Manchikalapat

        Hi Gabriel,

        Thanks for your blog. I really appriaciate if you can give me step by step processing of how to implement BSP application in Mobile ( IPHOHEs ).

        Here is my Questions:

        1) Do I need to create UI Elements in SAP?

        2) How to generate HTML Code for my requirement.

        3) how do I need to use JQuery in this.

        My Requirement is Need 3 Buttons Create / Change / REport

        when Create , Need to have 10 fields to be input by user and say CREATE Button, so that it should take all fields and create Order in SAP.

        Please help me in this regard.

        With Bala

        balasankar1974@gmail.com

        (0) 
  3. Abhijeet Kulkarni

    Hi Gabriel,

    I could implement an application and access it via browser – to start with. Many thanks for the pointers.

    However, I had a thought about security. BSP, by design, supports HTTPS. So, the transmission of data is safe. Fair enough. Also, the ‘service’ concept ensures that only the BSP application is exposed and not the entire server. Fair enough. Assuming the programmer writes tightly, only the legit requests with valid request data will be entertained. Fair Enough.

    However, what if the URL so constructed is used as it is in the browser window? We have used anonymous login – the Logon Data tab has a default user-password pre-filled for the service – in order to avoid authentication requirements to be fulfilled each time. Of course, all it would cause is unhindered access to something very specific, that we are anyway allowing to be viewed. The issue is, how to differentiate between person A, who makes a legit request and B, who simply uses the so constructed URL to get the data illegitimately?

    (0) 
  4. DAN HANGMAN

    Hi Gabriel,

    I have a question I am hoping you could answer. Is there a way to add a logoff button that will ensure the user has to log back in if they want to continue to use the application?

    (0) 

Leave a Reply