Session Timeout

Overview

The Session Timeout Component is a contractual component used in the Banking application to trigger an event when the user opens the Banking application and leaves it idle for a period of time. When the user does not perform any actions on the application, the Session Timeout component warns the user about the idle time. When the idle time is set in the component, the user automatically signs out of the application.

The Session Timeout component contains the following UI features.

• A pop-up header.
• A short description of the pop-up.
• A timeout counter with the Clock logo.
• A progress bar to indicate the time-lapse.
• Two action buttons: Continue and Sign Out. When a user clicks the Continue button, the Session Timeout component is dismissed, and the session is rendered active again. When the user clicks the Sign Out button, the Sign Out pop-up for the mobile application appears.

The Session Timeout component is a centralized component added to the Componentutility.js file in the require module. In this file, the Session Timeout component is added to every form in the application during form initialization. This means that a developer need not add the Session Timeout component specifically for any form. The component will be triggered automatically for every form in the application without any additional code changes from the developer.

NOTE: The Session Timeout Component is used inside the Mobile Banking application.

Session Timeout Contracts

The Session Timeout component contains the following contracts for customizing the template widgets and navigation.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Session Timeout
• onError Event
• handleTimeoutEventCall Event
• setContext Method
• showSessionTimeout Method
• postShow Method

Service Parameters

Service Parameters property provides the feasibility to configure the parameters required to make a service call. By default, this component does not make any service calls.

{}

Data Mapping

The Data Mapping property of the Session Timeout component maps the widget IDs with the data to be displayed. The data mapped in the Data Mapping contract of the Session Timeout component supports the following tokens to be provided as value.

• ${CNTX.sessionTimeout}: Maps the value from Context data sent by the parent of the component.
• ${i18n{i18n.common.sessionTimeout}}: Maps the i18n key.

Here is a sample of the JSON object provided in the Data Mapping of the Session Timeout component.

{
	"footerButtons": {
		"btnContinue": {
			"text": "${i18n{i18n.common.continue}}",
			"CTAIdentifier": "continueButton"
		},
		"btnSignout": {
			"text": "${i18n{i18n.common.signout}}",
			"CTAIdentifier": "signOutButton"
		}
	},
	"lableSection": {
		"lblHeader": "${i18n{i18n.commmon.sessionTimeout}}",
		"lblDesc": "${i18n{i18n.common.timeoutMsg}}",
		"lblTimer": "${CNTX.timeout_minutes}"
	}
}

The Data Mapping contract is assigned a JSON object with the following key-value pairs.

Data Formatting

Data formatting property is used to add a new formatting type or override existing formatting type in the default format JSON. By default, this component contains no value in this contract.

{}

Conditional Mapping Key

The Conditional Mapping Key is used to define mapping based on a criterion.

For example, if a label defined in the UI must display different data according to the type of account, a developer must set the Conditional Mapping Key property to the following value. By default, this component contains no value in this contract.

{}

Conditional Mapping

The Conditional Mapping property key is used to map a widget with a data from Collection Object or service response as per the Conditional Mapping key. Using conditionalMapping, component consumer can configure different tokens to a single widget based on the parameter configured in conditionalMappingKey. By default, this component contains no value in this contract.

{}

Session Timeout

The Session Timeout section contains a group of contract specific to the Session Timeout component. It contains the following contracts for customization.

• Session Timeout Property
• Timeout in Minutes

Session Timeout Property

The Session Timeout component can retrieve the timeout value from the Timeout in Minutes contract, Service response, or from the Context data from the parent component. A developer can set the where the timeout value must be fetched from using the Session Timeout property

Timeout in Minutes

This contract is used to set the timeout value in the Session Timeout component. The value set in this contract is only considered when the Session Timeout Property is set as Contract. The Session Timeout pop-up is triggered in a form when the application remains idle for the time (in minutes) set in this contract.

onError event

The OnError event is invoked when an error occurs during the user journey. When the onError event is invoked, an error object is passed to the parent widget. This object contains the information about the error as well as where it had occurred.

var errordata = {
	"level": "ComponentViewController",
	"method": "render",
	"error": err
};
this.onError(errordata);

handleTimeoutEventCall Event

This event is triggered when any of the action buttons in the Session Timeout button is clicked. When the handleTimeoutEventCall is triggered, the action Button widget ID clicked CTA identifier to the parent of the component.

this.handleTimeoutEventCall(btnID);

setContext Method

This method is invoked inside the parent component or form controller. Using this method, a developer can pass the timeout value required for the component from the parent of the component.

this.view.sessiontimeout.setContext(contextData);

showSessionTimeout Method

This method is used to handle the visibility of session time out pop-up.

this.view.sessiontimeout.showSessionTimeout(visibility);

postShow Method

This method is used when the Session Timeout component is instantiated dynamically. This method binds the callback actions to the widgets in the component.

this.view.sessiontimeout.postShow();

Context Object

The Context Object is a JSON object used to pass data from the parent of the component to the component. In Session Timeout component, the Context Object is used to pass the timeoutvalue from the parent of the component to the component.

Here is a sample of the Context JSON Object used inside the component.

var contextdata = {
	“timeoutValue”: 4
};