Popup Acknowledgment

Overview

The Popup Acknowledgment component is used to customize the Acknowledgment that pops up after the completion of an action during the user journey. The Popup Acknowledgment component can be customized to be used in multiple places. It is used to show warnings, status after a user signs out of the application, status of removing a biller from the biller list, etc.

The Popup Acknowledgment component contains a Popup screen with a message, an image showing the status, and one or two action buttons as per the requirement.

The action to select on the button may or may not be provided as per the requirement. For one sample, a popup acknowledgment can have two buttons to action (Yes/No). For a second sample, the popup acknowledgment may have one button to action (Done). For a third sample, the popup acknowledgment may not have any button to action, but the user will have to select outside the popup to close the acknowledgment.

NOTE: The Popup Acknowledgment component is used inside the Mobile Banking application.

Popup Acknowledgment Contracts

The Popup Acknowledgment component contains the following contracts for customizing the widgets and UI of the Acknowledgment Popup.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Dynamic Skin
• onError Event
• handCallToAction Event
• handleTitleBar Event
• setContext Method

Service Parameters

The Service Parameters contract of the Popup Acknowledgment component provides services helps to set the service details to get the response data. The response data retrieved from the service is mapped to the widgets using the Data Mapping property and then displayed on the screen.

The Popup Acknowledgment component currently uses data only from the context variable.

Here is a sample of the JSON object provided in the Service Parameter of the Popup Acknowledgment component.

{}

Data Mapping

The Data Mapping property of the Popup Acknowledgment component maps the widget IDs with the data to be displayed. The data is retrieved from the Context variable. The Data Mapping property of Popup Acknowledgment component supports the following Tokens.

• ${CNTX.lblTitle}: To map the value from the context variable.
• ${i18n{i18n.common.signIn}}: To map the i18n text.

Here is a sample of the JSON object provided in the Data Mapping of the Popup Acknowledgment component.

{
	"fields": {
		"ackimg": "${CNTX.ack}",
		"closeimg": "${CNTX.close}",
		"lblTitle": "${i18n{i18n.common.successSignOutMsg}}",
		"lblDescription1": "${i18n{i18n.common.confirmationMsg}}",
		"lblDescription2": "",
		"btnPrimary": "${i18n{i18n.common.signIn}}",
		"btnSecondary": ""
	},
	"segments": {
		"segErrorDetails": {
			"segmentMasterData": "${CNTX.errorDetails}",
			"segmentUI": {
				"lblGenericMsgInfo": "${segmentMasterData.message}"
			},
			"maxErrorMsgLength": "3"
		}
	}
}
  

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

Data Formatting

The Data Formatting property is used to provide a custom format for a specific requirement. The Popup Acknowledgment component does not contain any customization.

{}

Conditional Mapping Key

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

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. The Popup Acknowledgment component does not contain any value for this key.

{}

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. The Popup Acknowledgment component does not contain any customization for this key.

{}

Dynamic Skin

The Dynamic Skin contract of the Popup Acknowledgment component is used to override any existing skins used inside the component.

The Dynamic Skin contract assigned a JSON object with the following key-value pairs.

{
 <widgetID1>  : <skinName1>,
 <widgetID2>  : <skinName2>
}

Here is a sample of the JSON object provided in the Dynamic Skin contract of the Popup Acknowledgment component.

{
  "fields" : {
    "lblTitle": "lblGrey500FS40Emp",
    "lblDescription1": "lblGrey400FS20",
    "lblDescription2": "lblGrey400FS20",
    "btnPrimary": "btnPrimary",
    "btnSecondary": "btnSecondary"
  }
}

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);

handCallToAction Event

This event is used to pass the Button (CTA) ID and component context information to the parent widget.

this.handCallToAction(btnID);

handleTitleBar Event

The handleTitleBar event is used to update the native title bar attributes based on popup visibility. This event is applicable only for iOS platform.

this.handleTitleBar();

setContext Method

This method is invoked inside the parent component or form controller. Using this method, you can pass the context object containing the information required for the component.

this.view.popupAck.setContext(contextData);

Context Object

The context object is a JSON object that is used to pass the data required for the component. The context variable helps the component get the data using the following parameters.

• ack
• close
• title
• description1
• description2
• primary
• secondary
• errorDetails

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

var data = {
	"ack": "acksuccess.png",
	"close": "",
	"title": "You have successfully signed out.",
	"description1": "Thank you for using Infinity Digital Banking",
	"description2": "",
	"primary": "",
	"secondary": "",
	"errorDetails": []
};