Raindrops keep falling on my head, a beautiful song and a good metaphor to a programmers life. But if we have a sheer determination and an indomitable spirit to do something we make sure we find the wherewithal to achieve the formidable task.

Sitting on the edge of my seat at my workstation I managed to take a peek outside through the window, It was a wonderful view of the corniche and the vast blue expanse of the Arabian Gulf, the sun shining brightly in the clear sky striking its rays on the placid waters giving it a beautiful glitter, the ships making  delible marks on the shimmering blue canvas, while I was in a reverie I was jolted by a bolt from the blue, frankly never witnessed thundering clouds here anytime 🙂 .  I heard some voices saying the users were not happy and comfortable with the NWBC HTML landing page screen on the kiosk, they wanted an ESS on Kiosk which looked like any other kiosk application and easy to navigate. I had concluded it to be a close and shut case and believed it would not raise its ugly head again, but the ball was back in my court. As always, they laid down the rules, they did not want to catch whatever we threw at them. The following were the expectations,

  • The application should have neat login screen with their logos and not the one what standard SAP throws up
  • The screen should have a pleasant look and they detested the Corbu look and feel for the kiosk application.
  • The screen should be touch screen friendly with enlarged buttons for easy navigation using back and to buttons.
  • They would like to have a logoff button to forcefully logoff from screen.
  • They also wanted an Auto logoff functionality which will automatically logoff the user after 20 seconds of inactivity and the auto logoff should prompt the user 10 seconds before logoff to make a decision to keep session or terminate session, and once logged off the logon screen should be shown.

I had to go back to the drawing boards and develop a simple and new application. The intention of the blog is to elaborate only on the last two points, but let me brief on the former three also. To paint a good login screen you just need to copy the class CL_ICF_NW07_LOGIN and manipulate the HTML and CSS code inside those methods and assign this class to your web dynpro ICF node. For the second point, you need to use the new theme designer /UI5/THEME_DESIGNER and copy the standard corbu, make alterations to the theme with an aesthetic touch, this can be bit tricky as you would not know SAP naming conventions, I basically tweaked around the colors and the button sizes. For the third point the only way I found to enlarge the buttons beyond a point is to embed images into the buttons, so I got a good graphic designer to design a few gif buttons representing each application and embedded those gifs.

To achieve the final two points I started off with an approach which had its loop holes, the basic idea was to put a triggered timer on each view of application screen where the various applications are itself either embedded as an iFrame or as an reusable component in the current application. I set the initial value of the logout time by reading the logout time set at the ICF node level, for every event in any of the application screens we reset the logout time to the initial time, and this time is set to the timed trigger, the timed trigger will check after the preset time if the time of last activity and the current time-10 seconds exceeds is the logout time limits, if yes, then it will trigger an exit plug to logoff the application and using the logoff server side java script we clear any SSO cookie.

But here I had hit the wall, it had a fundamental problem. Firstly, I thought, it is not a good idea to use round trips to reset time limits, but the major problem was when user started filling up the reason for leave application leisurely taking longer time than usual, and before he could submit the auto logoff triggered as it had exceeded the inactivity time when fundamentally he was not inactive but keying in the reason. I had to digest the fact that Web Dynpro ABAP will not detect any mouse clicks(other than on certain fields) and also does not detect typing, and this of course was not acceptable and entire approach collapsed like a pack of cards after days of effort.

It is fact that an open source developer and ABAPer cannot see eye to eye and I couldn’t concur with him either, they have all the freedom to do what they want but we don’t, but he did set me off thinking with his statement “Why are you using server round trips for resetting time, why don’t you use java script instead?,  you can detect any kind of event using that”, we abapers are averse to learning any new language 🙁 we are comfortable in our coccons but javascript is a must learn as UI5 is based on it, so I decided to give this a shot like a blind shooter.

My initial stumbling block was to make js code to talk to web dynpro even if I managed to write some lines. Some amount of research and I felt I was hitting the right track, sometime back I had come across embedding HTML containers in WDA, and this was the beacon when treading in unknown territory. If we explore Html containers in WDA we find that there is a simple solution to this problem.

So this what I did, firstly create a new view in the application and create an HTML island as an element under the root container, add an HTML event and HTML script as sub elements as shown below.

HTMLBLOG.JPG

                                                      Figure 1.

The reset_time action method basically creates a count down timer of 10 seconds for user confirmation to logoff or to keep the session.

HTMLPIC2.JPG

                                                            Figure 2.

In the Logoff view we raise an event which will be listened by any of the current views at that point of time, so basically you will implement handler in all the views for the controller event, one of them shown below.

HMLb3.JPG

                                                                Figure 3.

The trig_logoff method just calls the exit plug of the current view to get out of the application if user confirms to logout or does not confirm anything within 10 seconds it will log him off.

Coming back to the HTML island, you would have noticed a sub-element  HTML script with source parameter zkiosk.js, this is the javascript file which detects all user events be it typing or mouse moving or clicking anywhere in the application. The script file can be loaded to application as a mime object.

if you notice in below table the script basically sets a timer and has a function addCallback which basically registers the events of a document to a timer function, the timer function calls a logout function when time limit expires, the Event is another name for the HTML event RESET_TIME. One more point to note is that you need to create an instance of HTML island and register the script call as shown in figure 5.

      

Header 3

html5.JPG

                     

script1.JPG scrip2.JPG

                                                                                                    Figure 4.

fig5.JPG

                                                                  Figure 5.

We are done with the most part of it, now we need to just embed this view in every application embedding view or else this will not function in every screen and can create issues. And a point to note, don’t hide the view, if you hide the view the functionality stops working, so the only alternate way is put this view into a tray and collapse the tray and make it un-expandable, see figure 6.

figure6.JPG
                                                                Figure 6.

Now as a final piece of the puzzle we need an Java Script at the server side on the ICF node which kicks you out the Logon page again and clear all logon cookies again, this ensure that you enter userid and password again, see Figure 7.

figure7.JPG

                                                            Figure 7.

Application in action.

Logon screen.

/wp-content/uploads/2015/10/fig8mod_815626.jpg

landing screen.

fig9.JPG

Logout prompt after inactivity. Sorry for the typo in message 🙂

fig10.JPG

I hope this blog helps those who encounter a similar requirement, and as a last piece of information this whole thing works only in IE 10 and above, chrome also has some issues.

regards,

Raghavendra Prabhu

To report this post you need to login first.

1 Comment

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

Leave a Reply