sap portal user idle timeout using javascript and yui 3 ... · sap portal user idle timeout using...

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

© 2009 SAP AG 1

SAP Portal User Idle Timeout

using JavaScript and YUI 3 (Yahoo

User Interface)

Applies to:

Enterprise Portal. For more information, visit the Portal and Collaboration homepage

Summary

This guide describes how a user can be logged out from SAP Portal after a certain period of inactivity using Client side solution i.e. by using JavaScript with YUI 3(Yahoo User Interface), which is Yahoo!'s next-generation JavaScript and CSS library. This solution overcomes the pitfalls found in other solutions which do not handle the “onmousemove” and “onkeypress” events.

Author: Aden DSouza

Company: MindTree Ltd.

Created on: 10 August 2010

Author Bio

Adren DSouza is a SAP EP Consultant in MindTree Ltd. He has worked in EP, KM, WPC, PDK, Web Dynpro, and ESS. He has also worked in the development of EFP.

http://www.sdn.sap.com/irj/sdn/nw-portalandcollaboration

SAP Portal User Idle Timeout using JavaScript and YUI 3 (Yahoo User Interface)


© 2009 SAP AG 2

Table of Contents

Implementation Steps ................................................................................................................................... 3

Create a Portal Application Project ............................................................................................................ 3

Create a Portal Application Object (JSPDynPage) ..................................................................................... 3

JavaScript files for Idle Timeout ................................................................................................................. 7

Code for the JSP Page ............................................................................................................................ 11

Structure of portalapp.xml ........................................................................................................................ 11

Generate and Deploy the PAR file ........................................................................................................... 12

Create an iView from PAR file .................................................................................................................. 13

Assign the iView to the Framework Page ................................................................................................. 14

Test the User Idle Time Out in Portal ....................................................................................................... 14

Related Content .......................................................................................................................................... 15

Disclaimer and Liability Notice ..................................................................................................................... 16



© 2009 SAP AG 3

Implementation Steps

Create a Portal Application Project

Switch to EP perspective and create a new Portal Application Project (File -> New -> Project).

Create a Portal Application Object (JSPDynPage)

Create a new Portal Application Object under the Portal Project created in the above step.



© 2009 SAP AG 4

Select JSPDynPage from the list of “Portal Component”.



© 2009 SAP AG 7

The Project structure in NWDS, after creating the project is as shown:

JavaScript files for Idle Timeout

Create a new JavaScript file called “idle-timer.js” under scripts folder in the project structure and add the following lines of code:

/**

* Idle timer

* @module idle-timer

*/

YUI.add("idle-timer", function(Y){

//-------------------------------------------------------------------------

// Private variables

//-------------------------------------------------------------------------

var idle = false, //indicates if the user is idle

tId = -1, //timeout ID

enabled = false, //indicates if the idle timer is enabled

timeout = 30000; //the amount of time (ms) before the user is

considered idle

//-------------------------------------------------------------------------

// Private functions

//-------------------------------------------------------------------------

/*



© 2009 SAP AG 8

* Handles a user event indicating that the user isn't idle.

* @param {Event} event A DOM2-normalized event object.

* @return {void}

*/

function handleUserEvent(){

//clear any existing timeout

clearTimeout(tId);

//if the idle timer is enabled

if (enabled){

//if it's idle, that means the user is no longer idle

if (idle){

toggleIdleState();

}

//set a new timeout

tId = setTimeout(toggleIdleState, timeout);

}

}

/*

* Toggles the idle state and fires an appropriate event.

* @return {void}

*/

function toggleIdleState(){

//toggle the state

idle = !idle;

//fire appropriate event

Y.IdleTimer.fire(idle ? "idle" : "active");

}

//-------------------------------------------------------------------------

// Public interface

//-------------------------------------------------------------------------

/**

* Centralized control for determining when a user has become idle

* on the current page.

* @class IdleTimer

* @static

*/

Y.IdleTimer = {

/**

* Indicates if the idle timer is running or not.

* @return {Boolean} True if the idle timer is running, false if not.

* @method isRunning

* @static

*/

isRunning: function(){

return enabled;

},



© 2009 SAP AG 9

/**

* Indicates if the user is idle or not.

* @return {Boolean} True if the user is idle, false if not.

* @method isIdle

* @static

*/

isIdle: function(){

return idle;

},

/**

* Starts the idle timer. This adds appropriate event handlers

* and starts the first timeout.

* @param {int} newTimeout (Optional) A new value for the timeout period in

ms.

* @return {void}

* @method start

* @static

*/

start: function(newTimeout){

//set to enabled

enabled = true;

//set idle to false to begin with

idle = false;

//assign a new timeout if necessary

if (typeof newTimeout == "number"){

timeout = newTimeout;

}

//assign appropriate event handlers

Y.on("mousemove", handleUserEvent, document);

Y.on("keydown", handleUserEvent, document);

//set a timeout to toggle state

tId = setTimeout(toggleIdleState, timeout);

},

/**

* Stops the idle timer. This removes appropriate event handlers

* and cancels any pending timeouts.

* @return {void}

* @method stop

* @static

*/

stop: function(){

//set to disabled

enabled = false;

//clear any pending timeouts

clearTimeout(tId);



© 2009 SAP AG 10

//detach the event handlers

Y.detach("mousemove", handleUserEvent, document);

Y.detach("keydown", handleUserEvent, document);

}

};

//inherit event functionality

Y.augment(Y.IdleTimer, Y.Event.Target);

}, "0.1", { requires: ["event", "event-custom"] });

Create a new JavaScript file called “node-base-min.js” under scripts folder in the project structure and add

the lines of code from the following URL:

http://yui.yahooapis.com/combo?3.0.0pr2/build/yui-base/yui-base-min.js&3.0.0pr2/build/oop/oop-min.js&3.0.0pr2/build/event/event-min.js&3.0.0pr2/build/dom/dom-base-min.js&3.0.0pr2/build/dom/selector-min.js&3.0.0pr2/build/node/node-base-min.js

Note: This is a standard JavaScript file provided by the Yahoo User Interface (YUI 3)






© 2009 SAP AG 11

Code for the JSP Page

Add the following lines of code under “TimeOut.jsp” present in the pagelet folder of the project structure.:

<html>

<head>

<%

String mimeUrl = componentRequest.getWebResourcePath();

%>

<script type="text/javascript" src="<%=mimeUrl%>/scripts/node-base-min.js"></script>

<script type="text/javascript" src="<%=mimeUrl%>/scripts/idle-timer.js"></script>

<script type="text/javascript">

YUI().use("*", function(Y){

Y.IdleTimer.subscribe("idle", function(){

alert('Your session is inactive from 10 minutes. For security reasons,You will be

logged off');

window.parent.logoff();

});

Y.IdleTimer.subscribe("active", function(){

});

// Specify the Idle Time out period here in milliseconds

Y.IdleTimer.start(600000);

});

</script>

</head>

<body>

</body>

</html>

Structure of portalapp.xml

The generated portalapp.xml must look as shown below:

<?xml version="1.0" encoding="utf-8"?>

<application>

<application-config>

<property name="PrivateSharingReference" value="com.sap.portal.htmlb"/>

</application-config>

<components>

<component name="TimeOut">

<component-config>

<property name="ClassName" value="ae.wasl.TimeOut"/>

<property name="ComponentType" value="jspnative"/>

<property name="JSP" value="pagelet/TimeOut.jsp"/>

</component-config>

<component-profile/>

</component>

</components>

<services/>

</application>



© 2009 SAP AG 12

Generate and Deploy the PAR file

Right click on the project and select “Export-> PAR File”. Enter the Portal credentials and deploy the PAR file in Portal



© 2009 SAP AG 13

Create an iView from PAR file

Create an iView from the deployed PAR file, say TimeOut.

Set the “Show Tray” property of the iView to “No”.



© 2009 SAP AG 14

Assign the iView to the Framework Page

Assign the TimeOut iView to the Framework Page which is assigned to the Desktop for the set of users.

Test the User Idle Time Out in Portal

Login to the Portal and be idle for some period of time, in this case 10 minutes. After 10 minutes, an alert message will be shown, stating that the Portal will be logged off. After Clicking OK, the Portal is logged off.



© 2009 SAP AG 15

Related Content

http://developer.yahoo.com/yui/3/

http://yuilibrary.com/gallery/show/idletimer

http://www.nczonline.net/blog/2009/10/28/yui-3-idletimer-now-available-on-yui-gallery/

For more information, visit the Portal and Collaboration homepage.

http://developer.yahoo.com/yui/3/

http://yuilibrary.com/gallery/show/idletimer

http://www.nczonline.net/blog/2009/10/28/yui-3-idletimer-now-available-on-yui-gallery/

https://www.sdn.sap.com/irj/sdn/nw-portalandcollaboration



© 2009 SAP AG 16

Disclaimer and Liability Notice

This document may discuss sample coding or other information that does not include SAP official interfaces and therefore is not

supported by SAP. Changes made based on this information are not supported and can be overwritten during an upgrade.

SAP will not be held liable for any damages caused by using or misusing the information, code or methods suggested in this document,

and anyone using these methods does so at his/her own risk.

SAP offers no guarantees and assumes no responsibility or liability of any type with respect to the content of this technical article or code sample, including any liability resulting from incompatibility between the content within this document and the materials and

services offered by SAP. You agree that you will not hold, or seek to hold, SAP responsible or liable with respect to the content of this

document.

sap portal user idle timeout using javascript and yui 3 ... · sap portal user idle timeout using...

Documents