Skip to Content

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.

   /wp-content/uploads/2011/12/netweaverlogon_81809.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

To report this post you need to login first.

39 Comments

You must be Logged on to comment or reply to a post.

  1. Sergio Ferrari
    Thank you so much Alessandro for this fantastic blog.
    You’ve correctly implemented the login screen targeting the mobile staff and eventually from the same idea and taking advantage of jQuery (not mobile) we can enhance the User Experience of the login screen also for Desktops.

    I really believe this is a piece of software to be included into the SAP standard software, we’ll see.

    Sergio

    (0) 
  2. Marc Cawood

    Thanks for this Alessandro – so much easier than copying and customizing the ‘SYSTEM’ BSP.

    However, I’m no fan of HTML inside ABAP because it’s difficult to maintain. Is there a way to put the HTML code in a BSP view (or page?) and process it from an ABAP class like this HTTP handler? This would be a great way to write HTTP handlers with a separation of View from Model/Controller.

    (0) 
    1. Marc Cawood

      Yes, I also like XSLT but there are advantages using BSPs for example in ease of translation.

      I also noticed you have the following code:

      `  <body onLoad=”` me->co_js_cookie_check `();”>`

      which produces this HTML:

      <body onLoad=”icf_system_cookieCheck();“>

      which produces a JavaScript error because the cleitn-side function icf_system_cookieCheck() is unknown. Do we need to include some SAP .js libraries or just remove this code?

      (0) 
      1. Sergio Ferrari

        Hi Marc,

          I remember I have tried to use BSP as rendering engine some years ago but I was never able to use it within the Login procedure.

          I believe BSP is a software layer that can run only under a certain UserID, so it cannot be called before the login.

          I also tried using an anonymous BSP (that means a BSP with a specific UserID/pwd set in the Login tab of the SICF). But that is another story, you will have to redirect failure login requests to this page like we all did in 6.20. The method described by Alessandro takes advantage of the login class and from there no way to call BSP.

         

          Maybe something changed with newest releases (e.g. >7.0), and I’m also looking forward to know about it.

        sergio

        (0) 
      2. Alessandro Spadoni Post author

        I copied the code from class CL_ICF_EXAMPLE01_LOGIN  , it’s strange that

        icf_system_cookieCheck() is unknown.

        It’s Sap JS standard code , check the method WRITE_JS_FUNCTIONS (implemented in CL_ICF_SYSTEM_LOGIN class) where the JS functions are generated.

        Now I haven’t a NSP Abap stack to try it with my custom class but CL_ICF_EXAMPLE01_LOGIN works good (icf_system_cookieCheck exists in html code)

        (0) 
  3. Alessandro Guarneri

    Ciao Alessandro

    Quick question for you: did you manage having the logoff page working in a BSP App based on JQueryMobile?

    I am struggling with it, and my guess now is that either session_single_frame.htm or session_buffered_frame.htm must be re-written in order to fit into the JQM framework.

    Would you briefly share your thoughts in this regard? I’d really appreciate it.

    Thanks for your time.

    Cheers

    Alex

    (0) 
    1. Marc Cawood

      The trick is to call ?sap-sessioncmd=logoff

      Our solution involved:

      1) A logoff button in the footer

      <div data-role=”footer” data-id=”foo1″ adata-position=”fixed”>

        <div data-role=”navbar”>

          <ul>

            <li><a href=”default.htm”>Home</a></li>

            <li><a href=”#search” data-rel=”dialog”>Search</a></li>

            <li><a href=”#logoff” data-rel=”dialog”>Logoff</a></li>

          </ul>

        </div><!– /navbar –>

      </div>

      </div><!– /page –>

      2) An inline dialog @included on every page:

      <div data-role=“page” id=“logoff”>
      <div data-role=“header” data-theme=“b”><h1>Logoff</h1></div>
      <div data-role=“content”>
      <h1>Are you sure?</h1>
      <a rel=“external” href=“exit.htm” data-role=“button” data-icon=“check” data-theme=“e”>Logoff</a>
      <a href=“#” data-role=“button” data-rel=“back” data-icon=“delete” data-theme=“c”>Cancel</a>
      </div>
      </div><!– /logoff –>

      3) A “Page with View Logic” called “exit.htm”

      <div data-role=“content”>
      <p>You have been logged off!</p>
      <a href=“./” rel=“external” data-role=“button” data-icon=“home” data-theme=“c”>Back</a>
      <img src=“?sap-sessioncmd=logoff” width=“1” height=“1”><!– This img actually does the logoff –>
      </div>

      (0) 
      1. Alessandro Spadoni Post author

        Hi Alessandro & Marc!

        I didn’t know the trick sap-sessioncmd=logoff 

        My first though is to handle MYSAPSSO2 cookie to force a logoff (such as other bsp scenarios).

        In this old thread Sergio Ferrari explains how to delete mysapsso2 cookie  http://scn.sap.com/thread/42909 on client side..

        or I could try to delete the cookie on server side calling function module HTTP_DELETE_SSO2_COOKIE (I never tried it)

        However i will try the trick suggested by Marc!

        (0) 
        1. Alessandro Guarneri

          Well, it actually cleans the session from SM04, which is most important.

          But then if the user goes back to the app, credentials are not asked anymore and logon is automatically done using a cookie, I guess.

          Maybe here the mysterious (…to me…) cookie deletion process may come into play…

          I tried calling HTTP_DELETE_SSO2_COOKIE in the OnInitialization event handler with no luck.

          Alex

          (0) 
            1. Alessandro Guarneri

              Ciao Sergio,

              I just checked what’s happening using Chrome and the “Edit This Cookie 1.1.24” extension.

              Well, you won’t believe it: browser side cookies are already deleted when Marc’s exit.htm is displayed! 😕 Don’t know whether it’s HTTP_DELETE_SSO2_COOKIE  doing the job or what, but this means no additional JS should be used… Cookies are simply not there anymore.

              Of course they are there before the logoff procedure.

              Mmmh, the plot thickens… (as Bill would say)

              Any clou, guys?

              Cheers

              Alex

              (0) 
          1. Marc Cawood

            I don’t think a logoff button should delete the SSO cookie: it’s supposed to log you off not disable SSO and prevent easy 2nd access.

            (0) 
            1. Alessandro Guarneri

              That’s a pretty philosophical matter 🙂 . I guess there’s no “right” answer.

              I’d really love to have both things happening: SM04 cleaned, and basic auth fired again at next access.

              Ciao

              Alex

              (0) 
  4. Steve Oldner

    Help!  I had the hardest time just having service call my class.  Then it only showed a simple logon box.  So I recopied CL_ICF_EXAMPLE01_LOGIN and changed a few words and title in the existing code just to see if it is called. My page is displayed, but I cannot log in.  Standard message Client, name, or password is not correct: log on again.

    So what have I done wrong?

    (0) 
    1. Alessandro Spadoni Post author

      Hi Steve,

      you can try to install the Firebug extension for Firefox ( getfirebug.com )

      or using the Chrome Developer Tools to analyze the HTTP POST request , try to compare the post request from the standard Bsp Login and the custom Bsp login..I hope you’ll find the trap!

      (0) 
      1. Steve Oldner

        Alessandro,

        Thank you for your suggestions.  It has been resolved, mostly.  We are very inexperienced at this and most of what we have been doing is following instructions or googling,  I’ll describe it in case someone else it interested.

        I recently have built our first 2 custom BSPs (we have been live since 2001),using John Moy’s suggestions for a payroll statement app.  We upgraded to EHP5 and are using the new POWL.  Managers want to use it in smart phones without LEO, so we are providing a link. I mentioned we can use another logon screen instead of standard SAP.  Yes I was thinking of your excellent blog piece!  Anyway copied and extended the class – twice, the first time didn’t work, my inexperience in OO.  But still had problems.  Seems like our default client is not our original dev client -110, nor our new dev client 210, nor our dev portal test client 160, but another dev client.  BASIS attempted to set system defaults but not working.  This was Friday afternoon.  Sunday AM is was working fine.  I have not used firebug to look at the HTTP POST and don’t know enough yet to understand what I will be looking at -but I will.

        Anyway thanks again for the response.  Just knowing someone has done this successfully is a great inspiration!

        (0) 
            1. Steve Oldner

              All fixed.  Works and looks great!  Added extra code so it’ll be smaller on desktop and fill the screens for smartphones/tablets.  Very impressive.  Well actually, for the users it is just what they expected to see and use on mobile, so no big deal for them.  But those people who used the SAP standard, they were impressed.

              Special Thanks to Alessandro for this blog!!!

              (0) 
              1. Alessandro Spadoni Post author

                Thank you Steve!

                I’ll write another blog asap about this topic (i’ll use XSLT transformations..no more concatenate statements difficult to read it )

                (0) 
  5. Marc Cawood

    Anyone know how to debug the login class inherited from CL_ICF_SYSTEM_LOGIN? Not sure which user it runs as for the external break-point.

    (0) 
    1. Marc Cawood

      Apparently whichever user it is has no rights to do anything. SELECT on any table returns no rows. How to get translated texts from the DB??

      (0) 
        1. Marc Cawood

          Sorry, I don’t understand anything you wrote 🙂 ECC?? logic working??

          What I’m asking is:

          1) How does one debug say the HTM_LOGIN method of one’s inherited class?

          2) Why does the HTM_LOGIN method have no access to the DB? I’ve verified that SELECTs return no records even without a WHERE clause. I am writing sy-subrc to rv_html and it’s 4 for a table which I know has thousands of rows

          Apparently (according to ST05) this class is run with no user. I assume it therefore has no rights to read anything!

          (0) 
          1. Steve Oldner

            Somewhere I saw the flowchart on where this is called. Seems to be called from ECC, but not in ECC. Not sure if that means anything.  Its like being on the porch, that is part of the house but not in the house.  And no access to ABAP SQL until inside the house.

            Well, that was my understanding…

            (0) 
      1. Marc Cawood

        OK the reason for the empty SELECTs was the client. According to ST05 the client for this login class is empty. So, you need to do a cross-client SELECT with

        CLIENT SPECIFIED:

        SELECT SINGLE text1

          FROM t9texts

          CLIENT SPECIFIED

          INTO lv_str

          WHERE mandt = ‘100’

            AND code = ‘EMA’ AND lang = sylangu.

        (0) 
    2. Alessandro Spadoni Post author

      Hi Marc,

      I can’t access to my SAP system now ,

      you can try to put an endless loop inside the method ,for example :

      data: DoExit.

      DO.

      if DoExit = ‘X’.

      Exit.

      endif.

      ENDDO.

      then check in SM50 the process running the endless loop, you can check the user name and stop it for debugging

      (0) 
      1. Marc Cawood

        Thanks, this helped somewhat. The user is SAPSYS but seemingly no way to debug this user nor does this user have SELECT authorisation on any table!!

        (0) 
        1. Sergio Ferrari

          Yes Marc I really think that debug is not supported during this early login stage.

          The subset of ABAP instructions is also very limited and as from the standard classes, it seems possible to read instance profile parameters and standard texts. I also discovered that READ REPORT is supported. That’s why in my first blog I suggested to save a template HTML into a Z report that the ICF class can indeed read via READ REPORT and then finalize it replacing variables and so on.

          I agree with you that the realization and maintenance of a nice login page can be very time consuming because of the lack of supporting tools and limited functionality, but that’s it

          (0) 
          1. Alessandro Spadoni Post author

            Thank you Sergio for your precious comment ➕ ➕ ➕ ,

            I didn’t known all these limitations.

            Unfortunatly I haven’t an available system with SAP Fiori to check how the ICF SAPUI5 Login classes are managed..

            (0) 
  6. madhu guntuboina

    Dear Alessandro Spadoni,

    This is a brilliant work, and good knowledge sharing. It was really good to know kind of using the technology.

    By the way in our client as well we are developing the mobile app and our vertical is quite different to implement and we are trying with third party and making an interface with PI to SAP.

    But some how i saw interesting part in your work, if there is a time would like to know more about this which can also help us.

    Any way first and foremost congrats to you and thanks for sharing the knowledge. Brilliant work….

    Thanks & Regards,

    Madhu.G

    [removed by moderator]

    (0) 

Leave a Reply