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  ( https://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 ( https://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 . 


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

This “single page” template https://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

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 ' ' ' ' ''    ''    ''    'jQueryMobile - BSP Logon' ''    '' ''   '' ''     `  `   into rv_html.                                             "#EC NOTEXT   CONCATENATE rv_html   '
' '
'    '

BSP Custom Logon using jQueryMobile

' '
'   '
'  into rv_html. ***********messages data content   if me->m_logmessages is not initial.     CONCATENATE rv_html '
'      '


'  into rv_html.     loop at me->m_logmessages into lv_msg_item.       concatenate rv_html '

' lv_msg_item-message '

' into rv_html.     endloop.    CONCATENATE  rv_html '
' into rv_html.   endif. ***********messages data content  - end *********login FORM   CONCATENATE rv_html   `
`              iv_hidden_fields into rv_html.   CONCATENATE rv_html '
' '
' '
' '
' ``     into rv_html.   CONCATENATE rv_html '
' into rv_html. ********login FORM - end   CONCATENATE rv_html ' 
' '
'     '

Footer content

' '         
' '
' '' ''  into rv_html. endmethod.

and this is the final result!


       by Sergio Ferrari

        by John Moy

New NetWeaver Information at SAP.com

Very Helpfull

User Rating: Be the first one !