brad.pokroy

2 Posts

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: http://www.dhtmlx.com/blog/?p=668

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:

image

 

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: http://www.dhtmlx.com/touch/designer/

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

image

Paste the following code into the IF_HTTP_REQUEST~HANDLE_REQUEST method

 

Step 3

In transaction SICF Create a new service called zget_marav

image

 

Setting the handler to ZCL_GET_MARAV_HANDLER image

 

Lastly, activate the service.

image

 

 

Step 4

Download the following file http://dev.abap.me/get_marav.html 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 http://www.dhtmlx.com/x/download/dhtmlxTouch/dhtmlxTouch_10rc_110527.zip

Or you can download just the codebase directory zipped (174KB) that is needed from here dev.abap.me/codebase.zip

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: http://dev.abap.me

 

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

 


Like the idea of HCM Processes and Forms but not so keen on Adobe Interactive Forms?

 

There are other options! It is possible to enhance the HCM P&F Framework to cater for Web Dynpro based forms. The enhancement to the HCM P&F framework creates an alternative route and loads a custom Web Dynpro based form while still entirely utilising the HCM framework and all of the functionality that it offers, such as user events, validations and much more. This can be done using the SAP Standard Enhancement Framework available to Web Dynpro ABAP. All enhancements are recorded in the Enhancement implementation. Absolutely no modifications to SAP standard objects are necessary. Enhancements implementations can be easily activated or de-activated if necessary using the Switch Framework.

 

The only real change is around the UI layer and how the information is presented to the user. The framework and backend logic remains the same. The configuration around the HCM Processes & Forms Design Time remains the same and the Web Dynpro based forms will continue to use the settings in the config in the same manner as the Adobe Interactive forms are using them. In fact, you can even convert existing Adobe Interactive forms into Web Dynpro forms using the same config as the Adobe Interactive Form. This does not have to be a replacement for Adobe Interactive forms, but can be used in conjunction with Adobe Interactive forms.

 

Any Web Dynpro ABAP UI elements can be used within these forms, such as tabstrips, roadmaps, Collapsible Trays, Groups and even flash islands if that was required.  Tab strips, roadmaps or collapsible trays can make it easier for the user to navigate within extremely large forms. Standard features in the Web Dynpro ABAP Framework can be used, such as F4 search helps, field validations and OTR (Online Text Repository). UI control can be handled easily via UI element property bindings and the use of action handlers. The WD form can also fire user events to be handled by the backend just as you would in an Adobe Interactive Form.

 

 

The SAP Standard Adobe Interactive Forms route

Start the standard Process Execute application HRASR00_PROCESS_EXECUTE

image

 

Search for an employee using the standard employee search screen

image

 

Select the Bonus Payment process in the standard process selection step

image

 

The Process Execute application then loads up the Bonus Payment Adobe Interactive form.

image

 

The Web Dynpro Forms route

Now going back to the Process selection, this time select the Voluntary Terminations process which has been setup in configuration to be a Web Dynpro based form.


image


Now still within the Process Execute application the Adobe Interactive form is now replaced by a Web Dynpro ABAP Form.

image

 

Due to the size of this form it has been done using Tab Strips to avoid the need for scrolling. Note that as part of the enhancement a print button has also been added that loads an Adobe print form in a popup window.

image

 

In the print form popup the form can now be printed or saved if necessary

image

 

The user can then hit the "Check and Send" button and submit the process for approval, utilising the framework and workflows exactly the same as an Adobe Interactive form would.

 

This process works perfectly end to end and performance on the Web Dynpro Forms is quite impressive.

Actions