Info Popup

Overview

The Information Popup component is a utility component that displays information when the info icon is clicked or tapped. A developer can customize the Information Popup component in any of the following UI variations.

  • Modal Popup and Non-Modal Popup.
  • Popup with a title, description, and a Close button.
  • Popup with a title, description of all the options available to the user, and the Close button.
  • If the Popup must render more description, then the Popup is displayed with an internal scroll.

NOTE: The Info Popup Component is used inside the Mobile Banking application.

Info Popup Contracts

The Info Popup component contains the following contracts.

setData Method

This method is used to set the data to be displayed when the info icon of the component is clicked. The Info Popup component can display data with or without a Segment widget. When a Segment widget is used the Info Popup displays a set of titles and descriptions based on the values set using this method.

Parameter Value

Syntax

this.view.<componentID>.setData(data);

Input parameter

data: Sets the information to be displayed inside the component. This parameter is assigned a JSON object with the following key value pairs.

  • title: Sets the heading of the pop-up in a String format.
  • description: Sets the description text of the pop-up in a String format.
  • closeBtnText: Sets the text for the Close button in a String format.
  • closeCallback: Binds a function callback to the Close button. The method set in this key is invoked when the Close button is clicked.
  • isModalContainer: This parameter is used to make the pop-up a modal or a non-modal container. If the value of this key is true, then the Info pop-up is a modal pop-up.
    This means that the popup will not be dismissed when the user clicks outside the component. To make the pop-up a non-modal container, the value of this key must be false.
  • segData: This key is used to set the data required for the Info Pop-up component when the Segment widget is used.
    This parameter is assigned an Array of JSON objects containing the data required for the Segment. The Segment section will not be displayed if no value is passed to this key.

Sample Input(Without Segment) 

var data = {
	title: "Time-Weighted Return",
	description: "Return calculation eliminates the effects on growth rates created by any inflows or outflows of cash. The time-weighted return breaks up the return into separate intervals based on whether cash was added or withdrawn.",
	closeBtnText: "Close",
	closeCallback: this.closeCallbackfun,
	isModalContainer: true,
};
this.infopopup.setData(data);

Sample Input(With Segment) 

var data = {
	title: "Sucessfully cancelled",
	description: "sub title",
	closeBtnText: "Close",
	closeCallback: this.closeCallbackfun,
	isModalContainer: true,
	segData: [{
			lblHeading: "Market",
			lblDescription: "An order to buy or sell immediately at the current market price."
		},
		{
			lblHeading: "Limit",
			lblDescription: "An order to buy only at or below the specified Limit Price, or sell at or above the specified Limit price."
		},
		{
			lblHeading: "Stop Loss",
			lblDescription: "An order to buy or sell that becomes active only after the specified Stop Price has been reached at which point the order is immediately converted to a market order."
		},
		{
			lblHeading: "Stop Limit",
			lblDescription: "An order to buy or sell that becomes active only after the specified Stop Price has been reached at which point the order is immediately converted to a limit order and will only execute at the specified Limit Price or better."
		},
		{
			lblHeading: "Market",
			lblDescription: "An order to buy or sell immediately at the current market price."
		},
		{
			lblHeading: "Limit",
			lblDescription: "An order to buy only at or below the specified Limit Price, or sell at or above the specified Limit price."
		},
		{
			lblHeading: "Stop Loss",
			lblDescription: "An order to buy or sell that becomes active only after the specified Stop Price has been reached at which point the order is immediately converted to a market order."
		},
		{
			lblHeading: "Stop Limit",
			lblDescription: "An order to buy or sell that becomes active only after the specified Stop Price has been reached at which point the order is immediately converted to a limit order and will only execute at the specified Limit Price or better."
		},
	],
};
this.infopopup.setData(data);

Return Type

None

closeCallback Event

This event is triggered when the user clicks the Close button in the Info Pop-up component. When the user clicks the Close button, the function callback set using the context data (closeCallback key) in the setData method is invoked.

Parameter Value
Input parameter

NA

Sample Code

this.closeCallback();

Return Type

None

Copyright © 2020- Temenos Headquarters SA

Published on :
Monday, May 2, 2022 5:08:54 PM IST

Feedback
x