Skip to Content

Mobile SAP Applications using DHTMLX Touch

Thanks to all the brilliant blogs that have been posted and most notably John Moy’s series of 5 blogs around JQuery Mobile and SAP. I was inspired to do some more research around the different HTML5 Javascript Frameworks out there, and to my surprise I discovered there are actually very many of them. However, many of them are immature and not overly impressive, and were mostly catering for smartphones, and not as much for tablet devices such as iPads.

There were however 2 alternatives to JQuery Mobile that caught my attention;
Those were DHTMLX Touch and Sencha Touch. More so DHTMLX Touch, hence the reason I decided to start playing around with it and subsequently why I’m writing this blog.

I found DHTMLX Touch contains an extensive library of powerful UI components, components which I found were somewhat lacking in some of the other frameworks. UI Components which are particularly useful for designing complex user interfaces, especially for tablet devices where real estate is not as scarce as on a smartphone.

These UI components are:

  • Layout Component – allows you to design complex multi pane screens. 
  • Accordion Component – similar to the layout component but the views can be collapsed or expanded, both horizontally and vertically. Similar to the Tray UI element in Web Dynpro.
  • Grid Component – this is a table with rows and column, the grid has built in sorting capability by each column.
  • Data View Component – allows you to display a collection of objects in a multi pane view where you can specify the number of columns it is displayed in, as well as the ability to define a custom HTML template for the cells.
  • Chart Component – pie charts, bar charts and a few other types of charts can be displayed using this component

Those are the main components that make it notably different to other  frameworks but it also includes components such as Google Maps, windows, popups, lists, forms( including all HTML5 form components), carrousel, iFrame, calendar,  group list, page list, multi view ( tabbed view), scroll view, template view,  video view and toolbars.

For some good sample screenshots of the components and UI look and feel check out this link:

The framework also includes features such as navigation, pages transitions, touch event, table/list sorting & filtering etc.

An extremely power feature of DHTMLX touch is that many of the UI Components can be directly bound to a data source of any of these 4 formats: XML, JSON, JSArray or CSV. This data source can either be from a file, or from a RESTFul web service call. With minimal effort by just specifying the data source and field names per column, you can easily display the contents of a data source in table format using the grid component.

As a very quick and basic proof of concept, I wrote a few lines of code to populate an internal table from the MARAV view.  I tried using DHTMLX via a BSP, just converting the contents of an internal table into a JSON string, and binding that string to the data grid component and that worked perfectly with no problems at all.

Second task was to try an offline capable version that used a RESTFul web service call into the SAP system, again just populating some data into an internal table from view MARAV view, then converting the contents of the internal table into a JSON string and returning it in the http response. At this point i stumbled upon the issue of a CORS (Cross-Origin Resource Sharing) exception, where the browser restricts an http get/post request from communicating across multiple domains. I managed to overcome this by returning an extra header field in the http response as: Access-Control-Allow-Origin=*

Screenshot of the simple table read app I wrote as a proof of concept:



DHTMLX Touch fully supports iPhone, iPad and Android devices, and may be compatible with some others as well. It is also compatible with Phone Gap, so by using this your apps can be converted into native apps.

Another really cool feature is the online UI Design application that allows you to build your UI through a graphical designer. Very similar to the layout designer offered in Web Dynpro ABAP. You can design your UI with no code at all, and once complete you can then download the application source.
Check it out here:

This is a framework I really see a lot of potential in, so I thought I would just put it out there to let people know it exists.


How to recreate this on your own system

Step 1 

Create HTTP Handler Class implementing IF_HTTP_EXTENSION image


Step 2


Paste the following code into the IF_HTTP_REQUEST~HANDLE_REQUEST method


Step 3

In transaction SICF Create a new service called zget_marav



Setting the handler to ZCL_GET_MARAV_HANDLER image


Lastly, activate the service.




Step 4

Download the following file by either right clicking on the link, and saving target, or by going to the link and viewing the source of the page. You will not be able to see anything as the file only has a place holder server url and user and password. Replace the server URL on line 14 with your own server, and on line 36 replace the user, password and client.

I am unable to paste the code here as some of the characters get changed.


Step 5

Either download the entire DHTMLX Framework (17MB) from here

Or you can download just the codebase directory zipped (174KB) that is needed from here

Place the codebase directory which contains the DHTMLX JavaScript library into the directory where you have created the get_marav.html file.


Online Demo

To view the above app on a mobile device or via a compatible web browser (Chrome, Safari or Firefox) go to:


Additional Reading

I recommend reading the below blogs by John Moy on JQuery Mobile and SAP, as he goes into alot more detail on creating BSP applications, using PhoneGap and more.

Build your first Mobile web app using jQuery Mobile and ABAP – Part 1

Build your first Mobile web app using jQuery Mobile and ABAP – Part 2

Build your first Mobile web app using jQuery Mobile and ABAP – Part 3

Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features – Part 1

Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features – Part 2


You must be Logged on to comment or reply to a post.
  • We ran into the same issue when we using Web Services calls for our HTML5 mobile application, I hope this works as it will really help us. thanks for the post..
  • Hi Brad,

    Thanks for sharing this with the community.  I must admit it isn’t one that I have seen before (I’m probably too deep in jQuery Mobile at the moment).  The support for data integration looks great.  I’ll have to look into it more when I have some time.

    For some reason, the final link you provide doesn’t seem to work for me.  Is this connected to an ABAP server you have in the cloud?



    PS.  Thanks for the mention!

    • Hi John,

      No problem, thanks for leading the way with your blogs! I found them extremely helpful!

      Yes is connecting to abap server in the cloud, user and password are harcoded against that service. The server was temporarily down the other day when you tried. I didnt put sufficient error handling in the demo to error if the connection failed. Try again now, it should work.


  • The blog is very nice, thanks for doing this. I tried to access your site to download the code but i cannot access the site its just times out, is it down?



    • Hi Anand,
      just tested now, it seems to be fine for me, try right click on the link and choose save target as, let me know if that works.
  • Thanks for bringing this to our attention. Data binding is super cool. Will play around this. Nice to have an alternatives but sometimes I wonder why they had to build their own framework instead of enhancing jQuery. More alternatives brings more maintenance work. Especially with jQuery gaining a lot of traction within SAP landscape like the Sybase Web Container…
    • Hi KK,

      DHTMLX is a company that have many other products, they aren’t SAP oriented, and DHTMLX Touch was not designed with SAP in mind at all, it was designed to build rich mobile applications for smart phone and tablets. DHTMLX touch is their mobile html5 framework, there are many others out there as well.

      This blog is just a proof of concept to show that their framework can be used to create mobile apps that integrate with SAP.


  • Can´t wait to try this!!  I´m trying to find a framework to do my own mobile aplications… but there´s so many frameworks… I don´t know how or what to choose…
    I´ll try this today… :):)
  • Hi,

    I new on Mobile SAP Apps but i try create this example, but the code retreive me a sintax error because the cl_trex_json_serializer Class is don’t exists.

    Can you tell me if this class don’t exist for the SAP System Version? i or if i need install a patch?
    Thanks and i hope your comments.

    • Hi Adrian,

      I don’t think that class exists prior to Netweaver 7 Enhancement pack 1. If you can get access to a system that version or later you can just copy it and create it as a z class on your system.


  • Hi Brad,
    I’ve copied your coding and settings to our system, however, it doesn’t work:
    -) SICF service “ZMAYS” returns material values if called -> seems to be ok
    -) Web page brings message “Values are realtime from SAP”, however, no data is being displayed.

    Do you have any idea what might went wrong? Any chance to debug whether the call of the SICF service to retrieve material data works out of the web page?

    Many thanks & regargs