Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
alespad
Contributor

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.moy3  (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.

  

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.ferrari2  (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 . 

    

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

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!

LINKS:

       by sergio.ferrari2

        by john.moy3

39 Comments
Labels in this area