Currently Being Moderated

We know that we can build  a Mobile Web Application in an  SAP System using SAP BSP and Html5 /Javascript / Css . There are a lot of Javascript Frameworks that help us to create the optimized mobile UI Layer .   Most popular frameworks are Sencha Touch , jQuery Mobile, jQTouch ,etc and we can include this frameworks in our Sap BSP application;

these 3 blogs by John Moy  (Build your first Mobile web app using jQuery Mobile and ABAP - Part 1)  describe in a great way how to build our Mobile Web Apps using jQueryMobile  ( http://jquerymobile.com ) and this is not the purpose of this blog.

So we can use our BSP Mobile application from iPad , iPhone , Android Devices , etc… I create my BSP Link Shortcut on my iPad Home  and I see this logon screen.

   netweaverlogon.jpg

Not good for a mobile device user! Not mobile optimized , we need to zoom in,it's not the right logon page for a web mobile application.

Thanks to the Official Documentation ( http://help.sap.com/saphelp_nw70ehp2/helpdata/en/48/3a061a902131c3e10000000a42189d/frameset.htm ) and this great blog by  Sergio Ferrari  (BSP/HowTo - Customizing the design of System Logon page in NetWeaver '04  )  we know that we can change the screen layout for each SICF service  creating a custom Abap Class , in SICF Bsp service -> Error Pages -> Logon Errors -> System Logon (Configuration) -> Define Service-Specific Settings -> Custom Implementation (Abap Class).  

Yeah, now we can build our custom  jQuery Mobile Logon  Screen creating  a new custom class that is a subclass of CL_ICF_SYSTEM_LOGIN !

I found the class CL_ICF_EXAMPLE01_LOGIN that is a good starting point for our custom class , so I copied the example class to ZCL_ICF_JQUERYMOBILE_LOGIN . 

  image   image

In HTM_LOGIN method the standard code builds the Logon Page , here we can insert our custom html code.

This “single page” template http://jquerymobile.com/demos/1.0/docs/pages/page-template.html is my starting point to build our logon page.

Exploring the standard SAP Code in HTM_LOGIN method , I noticed that it uses <table> elements , so we must replace html tables , rows and cells with jQueryMobile DIVs and Attributes such as “header” , “content” and “footer” (anathomy of a mobile “Page”).

The Abap Internal Table me->m_logmessages contain all Logon system messages (warning about SSO , HTTPS , ecc..): i put this messages in a jQueryMobile “collapsible” DIV container (not collapsed by default) , but we are free to build our Layout as we want.

Important: In jQuery Mobile, form submissions are automatically handled using Ajax but in our situation we need to prevent it adding  data-ajax="false" attribute to the form element. 

Now we can call tcode SICF to set our custom class ZCL_ICF_JQUERYMOBILE_LOGIN image

This is the code of my basic HTM_LOGIN method(we should consider other important aspects , for example the “Change Password” button linked to 'htm_change_passwd' method,logon languages , etc..).

Here you can download this basic example of ZCL_ICF_JQUERYMOBILE_LOGIN (slinkee)

method HTM_LOGIN.
*CALL METHOD SUPER->HTM_LOGIN
*  EXPORTING
*    IV_JAVASCRIPT    =
*    IV_HIDDEN_FIELDS =
*  RECEIVING
*    RV_HTML          =
*    . 
**A.SPADONI - 27.12.2011 - htm_login Method from CL_ICF_EXAMPLE01_LOGIN
*CLASS.
**A.SPADONI - 27.12.2011 - jquerymobile login html page
  data: lv_msg_item   type bspmsg.
concatenate
'<!DOCTYPE html> '
'<html> '
'<head>'
   '<meta charset="utf-8">'
   '<meta name="viewport" content="width=device-width, initial-scale=1">'
   '<title>jQueryMobile - BSP Logon</title>'
 '<link rel="stylesheet"'
 ' href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>'
   '<script'
    ' src="http://code.jquery.com/jquery-1.9.1.min.js"></script>'
 '<script'
 ' src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js">'
 '</script>'
  '<script language="JavaScript" type="text/javascript">'
             iv_javascript
  '</script>'
 '</head>'     `  <body onLoad="` me->co_js_cookie_check `();">`
  into rv_html.                                             "#EC NOTEXT
  CONCATENATE rv_html
  '<div data-role="page">'
 '<div data-role="header">'
   '<h1>BSP Custom Logon using jQueryMobile</h1>'
 '</div><!-- /header -->'   '<div data-role="content">'  into rv_html.
***********messages data content
  if me->m_logmessages is not initial.
    CONCATENATE rv_html
'<div data-role="collapsible" data-content-theme="e" data-collapsed="'
'false">'
     '<h3>Messages</h3>'  into rv_html.
    loop at me->m_logmessages into lv_msg_item.
      concatenate rv_html '<p>' lv_msg_item-message '</p>' into rv_html.
    endloop.
   CONCATENATE  rv_html '</div>' into rv_html.
  endif.
***********messages data content  - end
*********login FORM
  CONCATENATE rv_html   `<div data-role="fieldcontain"><form name="`
  me->co_form_login `" action="` me->m_sap_application
     `" method="post" data-ajax="false">`
             iv_hidden_fields into rv_html.
  CONCATENATE rv_html
'<div data-role="fieldcontain"><label for="' me->co_sap_user
'">Username:</label>'
'<input type="text" id="' me->co_sap_user
'" name="' me->co_sap_user
'"  value="" placeholder="Username"/></div>'
'<div data-role="fieldcontain"><label for="'
me->co_sap_password '">Password:</label>'
'<input type="password" id="'
me->co_sap_password
'" name="' me->co_sap_password
'" value="" placeholder="Password"/></div>'
`<div data-role="fieldcontain"><a type="submit" data-role="button" data-theme="b" n`
`ame="submit" value="Logon" onclick="`
    me->co_js_submit_login
    `('` me->co_event_login `'); return false;">Logon</a></div>`
    into rv_html.
  CONCATENATE rv_html '</form></div>' into rv_html.
********login FORM - end
  CONCATENATE rv_html
 '  </div><!-- /content -->'
 ' <div data-role="footer">'
    '<h4>Footer content</h4>'
'          </div><!-- /footer -->'
'</div><!-- /page -->'
'</body>'
'</html>'  into rv_html.
 endmethod.

and this is the final result!

ipad_1.JPG

ipad_1logged.JPG

LINKS:

       by Sergio Ferrari

        by John Moy

Comments

Actions

Filter Blog

By author:
By date:
By tag: