BSP mobile logon screen using jQuery Mobile
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
‘ ” ” ” ” ‘<link ‘ ‘ href=”https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css”/>’ ‘‘ ‘‘ ‘‘ ” ` ` into rv_html. “#EC NOTEXT CONCATENATE rv_html ‘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 ' ' '
‘ ‘
‘ ‘
BSP Custom Logon using jQueryMobile
‘ ‘
‘ ‘
‘ into rv_html. ***********messages data content if me->m_logmessages is not initial. CONCATENATE rv_html ‘
‘ ‘
Messages
‘ 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!
- BSP/HowTo – Customizing the design of System Logon page in NetWeaver ’04 https://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/1436
- Build your first Mobile web app using jQuery Mobile and ABAP (3 parts) https://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/22129
by John Moy
- Sap Official Documentation , System Logon -> User-specific Changes https://help.sap.com/saphelp_nw70ehp2/helpdata/en/48/3a061a902131c3e10000000a42189d/frameset.htm
- jQueryMobile: Touch-Optimized Web Framework for Smartphones & Tablets https://www.jquerymobile.com
New NetWeaver Information at SAP.com
Very Helpfull