BSP mobile logon screen using jQuery Mobile
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