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 …

image

  • 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 …

Controller class attributes

  • 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 …

Main page attributes

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

<!DOCTYPE html>

<html>

<head>

  <title>Mobile Demo</title>

  <link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css“></link>

  <script src=”http://code.jquery.com/jquery-1.4.4.min.js“></script>

  <script src=”http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js“></script>

</head>

<body>

<!– Home Page –>

<div data-role=”page” data-theme=”b” id=”home”>

  <div id=”homeheader”>

    <div style=”text-align:center”>

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

  </div>


  <div data-role=”content”>

    <ul data-role=”listview” data-inset=”true” data-theme=”c” data-dividertheme=”a”>

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

    </ul>

    <ul data-role=”listview” data-inset=”true” data-theme=”c” data-dividertheme=”a”>

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

      <li><a href=”#help” data-transition=”flip”>Help</a></li>

    </ul>

  </div>

  <div data-role=”footer”>

  </div>

</div><!– /Home Page –>

<!– Employee Services –>

<div data-role=”page” data-theme=”b” id=”emp_svc”>

  <div data-role=”header” data-theme=”a”>

    <a href=”#home” data-icon=”arrow-l”>Back</a>

    <h1>Emp Services</h1>

  </div>

  <div data-role=”content”>

    <ul data-role=”listview” data-inset=”true” data-theme=”c” data-dividertheme=”a”>

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

    <ul data-role=”listview” data-inset=”true” data-theme=”c” data-dividertheme=”a”>

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

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

    </ul>

  </div>

  <div data-role=”footer”>

  </div>

</div><!– /Employee Services –>

<!– Org Assignment –>

<div data-role=”page” id=”emp_org”>

  <div data-role=”header”>

    <a href=”#emp_svc” data-icon=”arrow-l”>Back</a>

    <h1>Org Assignment</h1>

  </div>

  <div data-role=”content”>

    <ul data-role=”listview” data-inset=”true” data-theme=”d” data-dividertheme=”c”>

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

      <li><%= ls_org_data-org_unit %> <%= ls_org_data-orgtxt %> </li>

    </ul>

    <ul data-role=”listview” data-inset=”true” data-theme=”d” data-dividertheme=”c”>

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

      <li><%= ls_org_data-position %> <%= ls_org_data-postxt %> </li>

    </ul>

    <ul data-role=”listview” data-inset=”true” data-theme=”d” data-dividertheme=”c”>

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

      <li><%= ls_org_data-costcenter %> </li>

    </ul>

  </div>

  <div data-role=”footer”>

  </div>

</div><!– /Org Assignment –>

<!– Address –>

<div data-role=”page” id=”emp_address”>

  <div data-role=”header”>

    <a href=”#emp_svc” data-icon=”arrow-l”>Back</a>

    <h1>Address</h1>

    <a href=”#emp_address_update” data-transition=”slideup” class=”ui-btn-right”>Edit</a>

  </div>

  <div data-role=”content”>

    <ul data-role=”listview” data-inset=”true” data-theme=”d” data-dividertheme=”c”>

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

      <li>

          <span id=”display_street”><%= ls_address_data-stras %></span><br>

          <span id=”display_city”><%= ls_address_data-ort01 %></span><br>

          <span id=”display_state”><%= ls_address_data-state %></span><br>

          <span id=”display_postcode”><%= ls_address_data-pstlz %></span>

      </li>

    </ul>

  </div>

  <div data-role=”footer”>

  </div>

</div><!– /Address –>

<!– Update Address –>

<div data-role=”page” id=”emp_address_update”>

  <div data-role=”header”>

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

    <h1>Update Address</h1>

  </div>

  <div data-role=”content”>

  <form id=”address_update” action=”” method=””>

     <fieldset>

        <label>Street</label><br>

        <input id=”street” name=”street” type=”text” value=”<%= ls_address_data-stras %>”><br>

        <label>City</label><br>

        <input id=”city” name=”city” type=”text” value=”<%= ls_address_data-ort01 %>”><br>

        <label>State</label><br>

        <input id=”state” name=”state” type=”text” value=”<%= ls_address_data-state %>”><br>

        <label>Post Code</label><br>

        <input id=”postcode” name=”postcode” type=”text” value=”<%= ls_address_data-pstlz %>”><br>

        <input type=”submit” name=”submit” class=”button” id=”save_address”  value=”Save”></input>

     </fieldset>

  </form>

  </div>

  <div data-role=”footer”>

  </div>

  <!– </form> –>

</div><!– /Update Address –>

<!– Leave Bookings –>

<div data-role=”page” id=”emp_lvebook”>

  <div data-role=”header”>

    <a href=”#emp_svc” data-icon=”arrow-l”>Back</a>

    <h1>Leave Bookings</h1>

  </div>

  <div data-role=”content”>

    <ul data-role=”listview” data-inset=”true” data-filter=”true” data-theme=”d” data-dividertheme=”c”>

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

           <li><%= lv_absencetext %>

               <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 data-role=”footer”>

  </div>

</div><!– /Leave Bookings –>

<!– About –>

<div data-role=”page” data-theme=”b” id=”about”>

  <div data-role=”header” data-theme=”a”>

    <a href=”#home” data-icon=”arrow-l”>Back</a>

    <h1>About</h1>

  </div>

  <div data-role=”content”>

    <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><!– /About –>

<!– Help –>

<div data-role=”page” data-theme=”b” id=”help”>

  <div data-role=”header” data-theme=”a”>

    <a href=”#home” data-icon=”arrow-l”>Back</a>

    <h1>Help</h1>

  </div>

  <div data-role=”content”>

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

depending upon connection speeds.</p>

  </div>

</div><!– /Help –>

<!– Message –>

<div data-role=”dialog” data-theme=”b” id=”message”>

  <div data-role=”header” data-theme=”a”>

    <h1> </h1>

  </div>

  <div data-role=”content”>

    <p id=”return_message” mce_keep=”true” mce_keep=”true”> </p>

    <a href=”” data-role=”button” data-theme=”c”><center>OK</center></a>

  </div>

</div><!– /Message –>

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


To report this post you need to login first.

37 Comments

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

  1. Rahul Urs
    this is great work. I use JQ-TOUCH for building iPhone apps. may be you should try JQ-touch with the BSP application. Its a lot faster..
    (0) 
    1. John Moy Post author
      Thanks Rahul.  In Part 1 I did investigate jQTouch, but I have not tried it at a practical level.  I previously used iUI, which is now looking dated.  When you say jQTouch is faster, what do you mean?  Is the framework smaller (so download is quicker), or do the transitions work faster?  Note that jQuery Mobile actually incorporates the transitions from jQTouch (according to the website).
      (0) 
  2. Robert Karlovic
    Hi,

    I got one problem when trying to save the address data, maybe you can help.

    When trying to save the address an error message appears “Please set all mandatory fields”.

    I’ve run the method set_address in the debugger. The Bapi “BAPI_ADDRESSEMP_CHANGE” has a couple of mandatory parameters that are empty for my personnell number (address_data-objps and address_data-sprps).
    Is there any default value for objps I can use? I tested this app on an IDES-ERP, and none of the personnell numbers in PA0006 has a value for objps.

    Thank you.

    (0) 
    1. John Moy Post author
      Hi Robert, what I would suggest is that you simply create an address using transaction code PA30 and infotype 0006 subtype 0001 (main address).  Then look at what PA0006 has stored via SE16. 

      Rgds

      John

      (0) 
  3. John Moy Post author
    It just occurred to me that I neglected to mark the new model class attributes in this blog as ‘read only’.  Just proves that I’m a grey haired ABAPer just like the rest of us!

    Rgds

    John

    (0) 
  4. Shibaji Chandra
    First of all thanks a lot John for bringing up this wonderful series. This might open up a whole lot of new possibilities.

    I was just wondering, since the full app can be downloaded via a single JQuery file (with multiple navigating pages) can we build an app with this having Offline support? So that once user downloads the app can fill up the forms without Internet Connectivity and then once the user gets connectivity then can do the Update operations via BSP Post.
    Please share your thoughts.

    – Shibaji

    (0) 
  5. srinivas rao
    Hi John,
    We have developed this application in BSP, why not in ABAP WD.

    Is it possible to deploy the ABAP WD on the mobile , please clarify ??

    Thank you,
    Srinivas.

    (0) 
    1. John Moy Post author
      Hi Srinivas,

      I think I answered this question in Part 1.  Firstly ABAP WD is NOT supported by SAP for mobile devices.  Secondly the payload for the ABAP WD javascript framework is over 400KB, which is excessive to download over slow mobile connections.  We tested a ABAP WD using a 128kbps connection and it took a minute for the screen to appear.

      Hope that helps.

      Rgds

      John

      (0) 
  6. Raja Thangamani
    Thanks for sharing this.

    Could you please share how to integrate this app into Mobile? May be in another blog. That will be greatful. Thanks in advance.

    Raja

    (0) 
      1. John Moy Post author
        Hi Raja,

        That depends upon what security solution you would have in place.  If you are testing this from your internal network, you can just use Safari (for instance) on your desktop.  If you are testing from your mobile device via internet, it depends upon how your system is exposed (if at all).  For me, I use a different URL which connects to the SAP system via a secure Sonicwall Aventail middleware solution.

        Rgds

        John

        (0) 
          1. John Moy Post author
            Hi Raja,

            Firstly, you would want to ask yourself why you would want to install this as an app.  You could for instance wrap the HTML in a solution such as PhoneGap (see http://www.phonegap.com).  However you would need to re-architect it so that instead of using BSP you feed the data and process inputs via RESTful services.  You could code your own as ICF services, or you could wait for the new Gateway product.

            Either way, choosing to go with native deployment can create some additional complications, such as how users actually get the app onto their device (yes, you could publish to an open marketplace such as Apple iTunes, but you may not want to do that for an app that is to be used only within the enterprise).  Otherwise you could get users to install via iTunes on their desktop (if we are talking about iPhones), however this might create complications about the desktop SOE.  Then the solution to fix that problem is something like Sybase Afaria which can handle your device management problems.
            But you must see that the choice to go with a native app can create additional complications and costs.  You need to ask yourself why you would choose to do this, and whether the benefits are worth it.  In some cases it might be, but in others it may not.

            Rgds

            John

            (0) 
    1. John Moy Post author
      Hi Raja,

      Yes you could, but it is not necessarily ‘best practice’.  You should look at my more recent blog post …
      Extend your SAP jQuery Mobile web app with HTML5 concepts and Native device features – Part 1

      Also it is important to stress that jQuery Mobile is still in Alpha release.  You should wait for it to be fully released.  I used jQuery Mobile as an example.  There are other frameworks available, some of which I have used.  Each has their pros and cons.

      Rgds

      John

      (0) 
        1. John Moy Post author
          Raja,

          I think you misunderstand my blog posts.  These are simply examples that I contribute to the community to demonstrate what is possible.  There is no notion of releasing this formally.  You should work through the examples yourself and get them up and running, then you will understand it better.

          Rgds

          John

          (0) 
          1. Raja Thangamani
            Sorry for not being clear enough in my previous post. I was wondering about the JQuery Mobile final release. (As they’ve released only Alpha now).

            Raja

            (0) 
            1. John Moy Post author
              Hi Raja,

              Thanks for clarifying.  In relation to jQuery Mobile final release date, you will need to track the website http://www.jquerymobile.com .  I know there was a target date of January 2011, but given we are near the end of the month it is quite possible that date will slip.

              Rgds

              John

              (0) 
  7. ARUN NAREIN
    Hi,
    I am just trying this mobile web application according to the above tutorial.
    While reimplementing the controller class i am getting one message “Method DO_INIT is implemented in class CL_BSP_CONTROLLER” and asking for Access key.Why this is happening and how i can overcome this problem?

    Arun

    (0) 
    1. John Moy Post author
      Hi Arun,

      I think you are improperly double clicking into DO_INIT and trying to change that.  Instead you should place the cursor on DO_INIT and then press the ‘Redefine’ button.

      Rgds

      John

      (0) 
  8. ARUN NAREIN
    Hi John,
    While activating ZCL_MOBILE_DEMO_CONTROLLER i am getting an error.

    class ZCL_MOBILE_DEMO_CONTROLLER,method do_init.
    A cast between two incompatible references(to the types “ZCL_MOBILE_DEMO_CONTROLLER” and “cl_bsp_model”) makes no sense.This kind of cast will always produce runtime error.

    I tried many ways,but i am not able to come across.can you please help me?

    Arun

    (0) 
  9. Ritesh Mehta
    It is a very nice blog.

    I have done all the steps, however the application is not working in mobile mode. I downloaded jquery for mobile .js and .css files (beta version) from the link specified, and then uploaded them in my bsp applications under using mimes->import.

    Can you pl. let me know if I am doing something wrong?

    (0) 
    1. John Moy Post author
      Hi Ritesh,

      When you say you “have done all the steps”, my steps did not include the use of the beta version!  This blog was written at a time when an earlier alpha release was available (and it still is available using the hosted version).  Have you tried this?  I have noticed some of my jQuery Mobile scenarios I have built are broken with later Alpha (or in this case Beta) releases.  I have intentionally not sought to describe a fix in each case (because the changes keep coming) until version 1.0 lands.  When that lands, I hope to write a follow up blog which should work.  I am sure that it is possible to refactor the solution for The Beta release, I just haven’t sought to do this yet.

      Rgds

      John

      (0) 
  10. Dixitkumar Sheta

    Hi John,

    It’s a really nice blog but as a beginner this question came to my mind is there any blog where i can learn how to develop an application for my RESTful Service using HTML5 and JqueryMobile ?

    Thank you.

    Regards,

    Dixit.

    (0) 
  11. Vishal Parikh

    John,

    Thank you for the excellent article. Because of this, I have a working app running on iPhone. I then tried to extend the app to use multiple BSP pages, like first page for the input param which on submit should navigate to this second page. I have the navigation working fine using the event handlers and navigation outplug in the BSP application but the URL in the address bar does not refresh to this second page and therefore the links for the jQuery pages (data-role=”page”) are now broken. So I get to the result page but then the links are not working.

    Would appreciate any ideas on how to make the links work again on the result page. Also if I directly open the result page via the URL, the links are working fine.Only when I navigate from the first page to the result page, the links aren’t working.

    Thanks again !!

    V..

    (0) 
    1. Vishal Parikh

      I found the solution for my problem. It is jQuery Mobile limitation currently : “

      You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages.”

      Just wanted to mention it and let others know, as I asked my question here.

      Thanks !!

      Vishal

      (0) 
  12. DAN HANGMAN

    John – I have a question I am hoping you can answer. Is there a way to add a logout button with functionality to these types of applications?

    Thanks for the wonderful blog and great starting point for mobile BSP applications!

    (0) 
    1. John Moy Post author

      Hi Dan,

      I guess a simple solution is to add a logout button which executes Javascript which closes the browser.  So if you are using a SAP SSO cookie, which is a session cookie, this will be destroyed with the browser session.

      That said, please note that I wrote this blog a while ago and the architectural approach of serving pages (as BSP does) is not necessarily best practice.  I am more in favour now of decoupling the web app from the data interaction entirely.  I do still use BSP as a mechanism to serve the initial jQuery Mobile web app, but thereafter all the interactions are via RESTful APIs.  To understand this, when you complete this blog series, have a look at my successor blog here …

      http://scn.sap.com/community/mobile/blog/2011/01/17/extend-your-sap-jquery-mobile-web-app-with-html5-concepts-and-native-device-features–part-1

      Regards

      John

      (0) 
  13. Saravana kumar

    Hi John,

    The blog is really fantastic. while working on it, gone through the entire steps and the output is displayed in the browser as given. but the respective data is not displayed. While executing the class ZCL_MOBILE_DEMO_MODEL directly the data fetched, but in the interface controller ZCL_MOBILE_DEMO_CONTROLLER on execution of DO_REQUEST –  am getting the error “Exception CX_SY_NO_HANDLER triggered” “An exception with the type CX_SY_REF_IS_INITIAL occurred, but was neither handle”. Please help me to solve it.

    (0) 
    1. John Moy Post author

      Hi Saravana,

      I think the best advice I can give is to place a break-point at the appropriate place in your code and debug it.  That’s how I would approach this type of thing.

      Regards

      John

      (0) 
  14. Poltera Anthony

    Hi John

    Thanks very much for the useful blogs. I am looking forward to getting involved in the Netweaver Gateway development and am busy getting a trial license.

    If I wanted to develop say a utility app, that has legs to be marketed to the SAP customer base in the SAP Store, would you recommend the NWG as the best approach for developing a productive application or would you combine NWG with a PhoneGap or Sencha style of wrapping if you like?

    Cheers,

    Anthony.

    (0) 
    1. John Moy Post author

      Hi Anthony,

      You could try either approach.  If I were you I would first get it working with NetWeaver Gateway as a standard browser-based app.  Then its a pretty quick step to PhoneGap it.  If you go down the Sencha path you can also try both options.

      Ideally you could offer both options to customers. 

      Regards

      John

      (0) 

Leave a Reply