VB: Handling Idle Sessions

DISCLAIMER: The views expressed in this story are my own and do not necessarily reflect the views of Oracle.

Overview

This article describes how to detect and handle idle sessions in Oracle Visual Builder.

For this example, we will set the session timeout to 10 seconds and display a dialog when session expires.

Code

HTML

• The HTML below includes dialog component which is displayed when session expires. Copy the following into HTML file:

<oj-dialog style="display:none" dialog-title="Session Expired" id="oj-dialog-1084591017-1">
  <div slot="body">
    <p>Your session has expired. Please refresh page.</p>
  </div>
  <div slot="footer">
    <oj-button on-oj-action="[[$listeners.ojButtonOjAction]]">Refresh</oj-button>
  </div>
</oj-dialog>

JS

• The JS below includes functions to manage idle sessions and opens dialog to refresh page. Copy the following into JS file:

define([], function() {
  'use strict';
  var eventHelper;
  var timeoutInMiliseconds = 10000; // Session timeout (ms)
  var timeoutId;
  var PageModule = function PageModule(context) {
    eventHelper = context.getEventHelper();
  };
  
  PageModule.prototype.setupSessionHandler = function() {
    // Set events that reset timer
    document.addEventListener("mousemove", resetTimer);
    document.addEventListener("mousedown", resetTimer);
    document.addEventListener("keypress", resetTimer);
    document.addEventListener("touchmove", resetTimer);
    
    startTimer();
  };
  
  function startTimer() { 
    timeoutId = setTimeout(doInactive, timeoutInMiliseconds);
  };
  function resetTimer() { 
    clearTimeout(timeoutId);
    startTimer();
  };
  
  function doInactive() {
    // Execute below actions when session expires
    eventHelper.fireCustomEvent('sessionIdle');
  };
  
  PageModule.prototype.reload = function() {
    location.reload();
  };
  
  return PageModule;
});

Metadata

• The Metadata below includes all variables, types, action chains, and events required for this web application. Copy the following into Metadata file:

{
  "pageModelVersion": "19.4.3",
  "title": "",
  "description": "",
  "variables": {},
  "metadata": {},
  "types": {},
  "chains": {
    "initActionChain": {
      "root": "callModuleFunction1",
      "description": "",
      "variables": {},
      "actions": {
        "callModuleFunction1": {
          "module": "vb/action/builtin/callModuleFunctionAction",
          "parameters": {
            "module": "[[ $page.functions ]]",
            "functionName": "setupSessionHandler"
          }
        }
      }
    },
    "sessionIdleActionChain": {
      "root": "callComponentMethod1",
      "description": "",
      "variables": {},
      "actions": {
        "callComponentMethod1": {
          "module": "vb/action/builtin/callComponentMethodAction",
          "parameters": {
            "component": "{{ document.getElementById('oj-dialog-1084591017-1') }}",
            "method": "open"
          }
        }
      }
    },
    "ButtonActionChain": {
      "description": "",
      "variables": {
        "detail": {
          "required": true,
          "type": "any",
          "input": "fromCaller"
        }
      },
      "root": "callModuleFunction1",
      "actions": {
        "callModuleFunction1": {
          "module": "vb/action/builtin/callModuleFunctionAction",
          "parameters": {
            "module": "[[ $page.functions ]]",
            "functionName": "reload"
          }
        }
      }
    }
  },
  "eventListeners": {
    "vbEnter": {
      "chains": [
        {
          "chainId": "initActionChain",
          "parameters": {}
        }
      ]
    },
    "sessionIdle": {
      "chains": [
        {
          "chainId": "sessionIdleActionChain",
          "parameters": {}
        }
      ]
    },
    "ojButtonOjAction": {
      "chains": [
        {
          "chainId": "ButtonActionChain",
          "parameters": {
            "detail": "{{ $event.detail }}"
          }
        }
      ]
    }
  },
  "imports": {
    "components": {
      "oj-dialog": {
        "path": "ojs/ojdialog"
      },
      "oj-button": {
        "path": "ojs/ojbutton"
      }
    }
  },
  "events": {
    "sessionIdle": {}
  }
}

Test

• After the session is idle for 10 seconds, the following should be displayed: