Build your first Mobile web app using jQuery Mobil...

former_member182638 · ‎11-21-2010

Following on from Part 1 (Build your first Mobile web app using jQuery Mobile and ABAP - Part 1), we now explore the coding required to develop a Mobile web app using jQuery Mobile and ABAP BSP, for DISPLAY scenarios.

The business scenario we will cover is HCM employee self-service on your Smartphone. This will enable you to see your organisation details, address details, and your absence bookings. Many more scenarios can be easily added using the same techniques described here.

Firstly, some pre-requisites required for this are as follows:

You need to develop this in a ERP system, which supports Business Server Pages
It is assumed you have employee records in your development system with appropriate data including org assignment (infotype 0001), personal data (infotype 0002), address (infotype 0006), and absence data (infotype 2001)
Your user ID needs to be associated with an employee (HCM) record in the system via infotype 105 subtype 0001, using transaction PA30. If you are not sure how to accomplish this, speak to someone familiar with SAP HCM.
To view the result with the best interactivity from your desktop, you need to have a decent browser such as Safari installed. Note that Internet Explorer (IE6, IE7, IE8) do NOT have good support for HTML5 and therefore the user experience is poor (this is not as much of an issue for smartphones and tablets, because the installed base of IE is much lower than for desktops).
To view the result from your smartphone or tablet, you will need to have network access from that device to your SAP server. This blog does not cover how to accomplish this and the security aspects, because that is another topic altogether.

I also assume you know how to create classes, methods etc.

OK, now for the design. I have elected to build this using stateless Business Server Pages and with MVC. I know that MVC may not be as beneficial for stateless scenarios, nonetheless I felt that since my iPhone apps were built using MVC (in Objective-C) I should preserve the same approach. I have also elected not to use HTMLB in the scenario, because HTMLB is not fully supported for the breadth of browsers that we may be concerned with (at the time of writing, HTMLB is not even supported for Safari until NetWeaver 7.02) - refer OSS Note 598860.

For the code that follows, this is what I have assembled in as quick and succinct a format as possible so that it can be documented in the form of a blog. However I have intentionally left out error handling etc, that you would ordinarily include. Also the code could be improved through re-factoring to improve robustness and flexibility to add more scenarios. I am simply sharing my experience of building a simple application, and this code would need additional work to be deployable.

MODEL

Start by building the model. We will simplify things here just for the blog by building a single model class which encapsulates all the data and business logic pertaining to what is to be displayed by the entire app (in practice you could choose to break this out into separate classes to maintain a separation of concerns).

Create a class ZCL_MOBILE_DEMO_MODEL using SE24. This class should have a superclass of CL_BSP_MODEL. 0.1. Add the following instance attributes to the class ...

Create one instance method REFRESH_MODEL_DATA for the class with PUBLIC visibility, with the following code ...

METHOD refresh_model_data.

* event handler for data retrieval

DATA: lv_uname TYPE syuname,

lv_error TYPE retco.

DATA: lt_org_data TYPE TABLE OF bapip0001b INITIAL SIZE 1,

lt_personal_data TYPE TABLE OF bapip0002b INITIAL SIZE 1.

*

* Get the user name .

*

lv_uname = cl_abap_syst=>get_user_name( ).

*

* Get the employee number.

*

CALL FUNCTION 'BAPI_USR01DOHR_GETEMPLOYEE'

EXPORTING

id = lv_uname

begindate = sy-datum

enddate = sy-datum

IMPORTING

employeenumber = m_emp_number.

*

* Get general employee data.

*

CALL FUNCTION 'BAPI_EMPLOYEE_GETDATA'

EXPORTING

employee_id = m_emp_number

TABLES

org_assignment = lt_org_data

personal_data = lt_personal_data.

* We should only have one record for each table returned

READ TABLE lt_org_data INDEX 1 INTO m_org_data.

READ TABLE lt_personal_data INDEX 1 INTO m_personal_data.

*

* Get the address data

*

DATA: lt_addressempkeytable TYPE TABLE OF bapipakey.

DATA: lv_addressempkey TYPE bapipakey.

CALL FUNCTION 'BAPI_ADDRESSEMP_GETLIST'

EXPORTING

employeenumber = m_emp_number

subtype = '1' "Only interested in permanent address

timeintervallow = sy-datum

timeintervalhigh = sy-datum

TABLES

addressempkey = lt_addressempkeytable.

* At today's date, we should only have a single permanent address

READ TABLE lt_addressempkeytable INDEX 1 INTO lv_addressempkey.

* Prepare the initial address details

MOVE m_emp_number TO m_address_data-pernr.

MOVE '0006' TO m_address_data-infty.

MOVE lv_addressempkey-subtype TO m_address_data-subty.

MOVE lv_addressempkey-objectid TO m_address_data-objps.

MOVE lv_addressempkey-lockindic TO m_address_data-sprps.

MOVE lv_addressempkey-validbegin TO m_address_data-begda.

MOVE lv_addressempkey-validend TO m_address_data-endda.

MOVE lv_addressempkey-recordnr TO m_address_data-seqnr.

*

* Get the address data details

*

CALL FUNCTION 'BAPI_ADDRESSEMP_GETDETAIL'

EXPORTING

employeenumber = m_address_data-pernr

subtype = m_address_data-subty

objectid = m_address_data-objps

lockindicator = m_address_data-sprps

validitybegin = m_address_data-begda

validityend = m_address_data-endda

recordnumber = m_address_data-seqnr

IMPORTING

streetandhouseno = m_address_data-stras

city = m_address_data-ort01

postalcodecity = m_address_data-pstlz

state = m_address_data-state.

*

* Get the absence history

*

CALL FUNCTION 'BAPI_ABSENCE_GETLIST'

EXPORTING

employeenumber = m_emp_number

TABLES

absenceempkey = m_absence_list.

ENDMETHOD.

Activate the model class

CONTROLLER

Now we build the BSP application and controller.

Create a new BSP application ZMOBILE_DEMO using transaction SE80
Right click on the BSP application ZMOBILE_DEMO and select to create a controller. Name the controller 'mobilemain.do' and enter a description.
For the controller, enter the class as ZCL_MOBILE_DEMO_CONTROLLER. Using forward navigation by clicking into this class name, create the controller class. When you do this, the controller class should automatically inherit from CL_BSP_CONTROLLER2 (if instead you create the class via SE24, you need to explicitly assign this superclass).
Add the following 2 instance attributes to the class ...

Reimplement the controller class method DO_INIT, and insert the following code ...

METHOD do_init.

* Create and register model instance

m_mobile_model ?= create_model( class_name = 'zcl_mobile_demo_model'

model_id = 'demo_model' ).

m_mobile_model->refresh_model_data( ).

ENDMETHOD.

Reimplement the controller class method DO_REQUEST, and insert the following code ...

METHOD do_request.

* Data declaration

DATA: l_view TYPE REF TO if_bsp_page,

ls_field TYPE ihttpnvp,

lt_fields TYPE tihttpnvp.

request->get_form_fields( CHANGING fields = lt_fields ).

*

* Determine whether there are any input fields to process

*

IF lt_fields IS INITIAL.

* Default to display main page

* Instantiation

l_view = create_view( view_name = 'main.htm').

* Set the attributes

l_view->set_attribute( name = 'lv_pernr' value = m_mobile_model->m_emp_number ).

l_view->set_attribute( name = 'ls_org_data' value = m_mobile_model->m_org_data ).

l_view->set_attribute( name = 'ls_personal_data' value = m_mobile_model->m_personal_data ).

l_view->set_attribute( name = 'ls_address_data' value = m_mobile_model->m_address_data ).

l_view->set_attribute( name = 'lt_absencelist' value = m_mobile_model->m_absence_list ).

* Call the view

call_view( l_view ).

ELSE.

* Process input fields

* Ignore this at this stage for Part 2 of the blog

ENDIF.

ENDMETHOD.

Activate the controller class and the BSP application

VIEW

Here we create a view and finally we are able to leverage the jQuery Mobile framework.

Right click on the BSP application ZMOBILE_DEMO and select to create a Page. Enter the page name as 'main.htm', enter a description, and select the page type as View.
For the page, select the tab Page Attributes and enter the following attributes ...

For the page, select the tab Layout and overwrite the default HTML with the following ...

<!DOCTYPE html>

<html>

<head>

<title>Mobile Demo</title>

</head>

<body>

<h1 id="jqm-logo"><div style="color:#ffffff; background-color:#aec5db">Mobile Demo</div></h1>

<p>

Welcome <%= ls_personal_data-firstname %> <%= ls_personal_data-last_name %> <br>

Personnel No. <%= lv_pernr %>

</p>

</div>

<li><a href="#emp_svc">Employee Services</a></li>

</ul>

<li><a href="#about" data-transition="flip" data-rel="dialog">About</a></li>

</ul>

</div>

</div>

</div>

<h1>Emp Services</h1>

</div>

<li data-role="list-divider">Employee Information</li>

<li><a href="#emp_org">Org Assignment</a></li>

<li><a href="#emp_address">Address</a></li>

</ul>

<li data-role="list-divider">Time and Leave Information</li>

<li><a href="#emp_lvebook">Leave Bookings</a></li>

</ul>

</div>

</div>

</div>

<h1>Org Assignment</h1>

</div>

<li data-role="list-divider">Organisational Unit</li>

</ul>

<li data-role="list-divider">Position</li>

</ul>

<li data-role="list-divider">Cost Center</li>

</ul>

</div>

</div>

</div>

<h1>Address</h1>

</div>

<li data-role="list-divider">Main Address</li>

<li>

</li>

</ul>

</div>

</div>

</div>

<a href="#emp_address" data-icon="delete">Cancel</a>

<h1>Update Address</h1>

</div>

<label>Street</label><br>

<label>State</label><br>

</fieldset>

</form>

</div>

</div>

</div>

<h1>Leave Bookings</h1>

</div>

<li data-role="list-divider">Leave History</li>

<% field-symbols: <ls_abs_line> like line of lt_absencelist.

data: lv_absencetext type atext.

data: lv_countrycode type molga.

select single molga from T001P into lv_countrycode

where werks = ls_org_data-pers_area

and btrtl = ls_org_data-p_subarea.

loop at lt_absencelist assigning <ls_abs_line>.

select single atext from T554t into lv_absencetext

where SPRSL = sy-langu

and MOABW = lv_countrycode

and AWART = <ls_abs_line>-subtype. %>

<small>

<div class="ui-li-aside">From: <%= <ls_abs_line>-validbegin+6(2) %>.

<%= <ls_abs_line>-validbegin+4(2) %>.

<%= <ls_abs_line>-validbegin(4) %>

<br>

To: <%= <ls_abs_line>-validend+6(2) %>.

<%= <ls_abs_line>-validend+4(2) %>.

<%= <ls_abs_line>-validend(4) %>

</div>

</small>

</li>

<% endloop. %>

</ul>

</div>

</div>

</div>

<h1>About</h1>

</div>

<p>John Moy, November 2010.</p>

<p>This is a demonstration of a basic web mobile application using jQuery Mobile (Alpha2 version) connected to an

SAP Web Application Server using Business Server Pages.</p>

</div>

</div>

</div>

<p>This Web application requires an internet connection to operate. The performance of the application may vary

depending upon connection speeds.</p>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Now for the explanation of the layout definition ...

You will see at the top of the HTML that the jQuery framework libraries are referenced. You can choose to use the hosted versions, or alternatively download these and serve them directly from your mimes directory. Here we are using the hosted versions.
Note that we are referencing the Alpha 2 version of the jQuery Mobile library. This may need to be updated to the latest release. Check the website here.
A single page in jQuery Mobile is identified by the attribute data-role="page". Within each such declaration, a page can declare a header region (data-role="header"), a content region (data-role="content"), and a footer region (data-role="footer"). If you inspect the HTML closely, you will see that the following pages have been marked-up into the entire HTML file ...

Home Page	This is the initial default page. It simply serves as a menu page because it incorporates links to other pages. Notice that at the top of the page we incorporate some BSP page attributes to display the employee number. Notice also that the links to the pages About and Help have an explicitly defined animation transition of 'flip'. This is how we get the effect shown in the Flash video from Part 1 of this blog, when clicking on these links. Simply declare data-transition="flip", and the framework handles the rest.
Employee Services Page	This serves as a menu page, linking to the 3 detail pages Org Assignment and Address, and Leave Bookings which are all declared in the same file.
Org Assignment Page	This page provides details of the employee's organisational assignment. Notice the BSP page attributes referenced here.
Address Page	This page provides details of the employee's main address. Notice the BSP page attributes referenced here. This page also links to the Update Address Page via a declaration in the header region to display an 'Edit' button, with an explicit animation transition of 'slideup'.
Update Address Page	This page provides details of the employee's main address in form edit mode. At this point in time, pressing the Save button will have no effect. Enabling this is the focus of Part 3 of this blog.
Leave Bookings Page	This page lists the absence bookings for you. Note that the attribute data-filter="true" has the effect of the framework automatically inserting a filter bar at the top of the list. This filter provides client-side filtering and is fully functional.
About Page	This page provides basic information in the content area.
Help Page	This page provides basic information in the content area

Additionally, you may have noticed the declaration of a Message 'dialog' using an attribute of data-role="dialog" (instead of "page"). Linking to this has the effect of the results being rendered in visual dialog box. Currently we don't make use of this but I have included the declaration because it will be required for Part 3 of this blog series.

If you are wondering about what you would do if you were to link to pages in separate files, that is OK also. jQuery Mobile automatically highjacks the response and inserts it into the DOM for the existing HTML, and executes the page transition so that navigating to the new page appears seamless. The decision as to whether to declare pages in other HTML files and link to them, or incorporate them into one, is up to you. Performance is a consideration though. If you include everything in one page then when performing view-only tasks, you no longer need to have a network connection after the initial download. However, this is at the cost of incurring processor and network time to retrieve everything upfront. It would typically make sense to weigh up the user experience benefit once the application is loaded versus the server processing and upfront download cost. Of course you can choose to mix and match (ie. some pages downloaded in the initial HTML, others linked to as external pages). When linking to pages in separate files, jQuery Mobile automatically displays a Loading... indicator which is pretty slick.

Spending the time to review this HTML, you will notice the power of the jQuery Mobile framework. Simply declare a flip transition using data-transition="flip" and when the link is pressed, the app provides an animated flip to the new page. There are other animations available such as slide, slideup etc. You can even use jQuery Mobile to detect touch events such as tap, swipe, swipeleft etc. This example only scratches the surface.

Review the documentation on jQuery Mobile at the website.

RESULT

Execute the BSP application using a decent browser such as Safari (please note that Internet Explorer will not render this all too well). You may need to resize the browser to the dimensions of a Smartphone or Tablet to see how it would look in terms of size.

After you authenticate, you should see something like the YouTube video from Part 1, which I have replicated below (note however that at this stage the Address Update function will NOT work as depicted in the video)...

Note: With this Alpha release of the framework, I have noticed that sometimes it gets confused and executes transitions incorrectly. Also sometimes when executing it on a smartphone (in my case iPhone) the full-screen mode disables itself upon a transition. These are simply bugs (noticed in the forums for the jQuery Mobile website) that I would expect would be fixed for the version 1.0 release.

Like it so far? In Part 3 of this blog series we will extend the code to process the Address Update scenario.

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

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z