Custom session timeout popup message in ADF/ Webcenter portal

Hi All,

In ADF and webcenter applications sometimes we have a requirement to show custom session time-out message.I have tried A team article approach as mentioned but this is not working for me in webcenter 11.1.1.8 not even in portal framework or run time portal. So I have tried something to handle this. In ADF application normally we have a popup before session time out and one after the session is expired.

So I need to disable standard warning message for expiry. I did that like below.

To disable to warning for session time out –

Add these entries in web.xml as

<context-param>
  <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
  <param-value>client</param-value>
</context-param>

<context-param>
  <param-name>
     oracle.adf.view.rich.sessionHandling.WARNING_BEFORE_TIMEOUT
  </param-name>
    <param-value>0</param-value>
</context-param>

Fair enough. Now you will not see any ootb warning before session time out.But I need a customized session time out popup.Following is the solution for that.
Add this code in the your page template for ADF and webcenter application.

 <af:resource type="javascript">
     var timeoutID;
    resetTimeout();
    function resetTimeout(){
        if( timeoutID ) clearTimeout( timeoutID );
        timeoutID = setTimeout( ShowTimeoutWarning, 1500000 ); // this is popup will come if user is idle for 25 minutes(25*6000)
    }
    function ShowTimeoutWarning() {
       var popup = AdfPage.PAGE.findComponentByAbsoluteId('pt_p1');
       popup.show();
    }

    document.onkeyup   = resetTimeout;
    document.onkeydown = resetTimeout;
    document.onclick   = resetTimeout;

    </af:resource>

and in the page template add a popup.You can also skin your popup as you like through normal skinning.

 <af:popup id="pt_p1" animate="default">
           <af:dialog id="tod" title="Warning" closeIconVisible="false" type="ok">
              <af:outputText value="You session will expire in next 5 Minute." id="pt_ot1"/>
           </af:dialog>
         </af:popup>

Thats it. You can try this in ADF , webcenter portal framework and or runtime portal too.

Happy learning with Vinay in techartifact.

Custom session timeout warning popup in Webcenter portal 11.1.1.8 using jquery

Hi All,

Requirement – To show customised session time out warning popup in webcenter portal builder.

Solution- Edit your template-

editpagetemplate

In the composer, open web development and add an html markup anywhere in the template.
Edit that markup and add below code as the value.

Below snippet uses normal javascript.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Box Witout Close Button</title>


</head>
<body>
<div id="dialog"  title="Dialog Title"></div>
<script>
var resetTime_int;
function resetTimer(){
    if(resetTime_int) window.clearTimeout(resetTime_int)
    resetTime_int=window.setTimeout(function (){
    if(document.getElementById('dialog').innerHTML = 'You have ' + (timeoutCount * 3000)/1000 + 'seconds until timeout' 😉     
    location.reload()
    }, 1000*60*2)
}

resetTimer()
document.onmousemove=resetTimer
document.onkeyup=resetTimer
</script>
</body>
</html>

html

Following snippet with Jquery

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dialog Box Witout Close Button</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

</head>
<body>
</head>
<body>
<div id="dialog" style="display:none;" title="Dialog Title"></div>
<script>
var lefttime=3;
var interval;
interval = setInterval('change()',60000);


function change()
{
   lefttime--;
   if(lefttime<=2) {
$( "#dialog" ).dialog( "open" );
return false;

}
}
$("#dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'session',
draggable: false,
width : 400,
height : 200,
resizable : true,
modal : true,
});

JS

With jquery you can make it more beautiful with these dialog options.

Thats it. You can change the time to show popup for idle user.

Happy learning with Vinay in techartifact