Flow Acknowledgment

Overview

The Flow Acknowledgment component is used to customize the Acknowledgment screen displayed after a user journey. When a user performs actions such as paying a bill or makes any transaction, towards the end of the payment, the Flow Acknowledgment component is used to display the status and details of the actions.

The Flow Acknowledgment component contains two main functional flows: Success and Failure. The Success flow displays the success message, success icon, and the details of the action (such as transaction details).

The Failure flow displays the failure icon, error message, and error details.

The UI of the Flow Acknowledgment component contains two sections. The first section contains the status of the user journey and the message. The second section is optional, and it displays the details of the user journey.

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

Flow Acknowledgment Contracts

The Flow Acknowledgment component contains contracts for customizing the widgets and UI of the Acknowledgment screen. The Flow Acknowledgment component contains the following contracts for customization.

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

Service Parameters

The Service Parameters contract of the Flow 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.

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

{
  "ObjectName": {
    "ServiceType" : "",
    "Service": "",
    "Object": "",
    "Verb": "",
    "Criteria": {}
  }
}

The Service Parameter contract provides the following key-value pairs for customization.

Data Mapping

The Data Mapping property of the Flow Acknowledgment component maps the widget IDs with the data to be displayed. The data is retrieved from Data Collection Object, Context variable, or Service response. The Data Mapping property of Flow Acknowledgment component supports the following Tokens.

• ${Collection.CustomerAdvice.fileNames}: Maps the value stored in collection object.
• ${CNTX.fileNames}: Maps the value from the Context variable.
• ${i18n{i18n.common.notes}}: Maps the i18n text.

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

{
	"successFlow": {
		"key": "referenceID",
		"value": [],
		"operator": "NEQ"
	},
	"successHeader": {
		"lblSuccessField1": "${i18n{i18n.common.transferSuccessMessage}}",
		"lblSuccessField2": "${CNTX.amount}",
		"lblReferenceID": "${i18n{i18n.common.referenceNumber}}",
		"lblRefereceIDValue": "${CNTX.referenceID}",
		"lblSuccessField4": "${CNTX.Message}"
	},
	"failureHeader": {
		"statusIcon": "error.png",
		"lblErrorField1": "${i18n{i18n.common.enrollFailureMessage}}",
		"lblErrorField2": "${CNTX.dbpErrMsg}"
	},
	"segments": {
		"segDetails": {
			"segmentUI": {
				"${i18n{i18n.common.from}}": "${CNTX.from}",
				"${i18n{i18n.common.to}}": "${CNTX.to}",
				"${i18n{i18n.common.frequency}}": "${CNTX.frequency}",
				"${i18n{i18n.common.transferDate}}": "${CNTX.transferDate}",
				"${i18n{i18n.common.fxRateRef}}": "${CNTX.fxRate}",
				"${i18n{i18n.common.exchangeRate}}": "${CNTX.exchangeRate}",
				"${i18n{i18n.common.transactionFee}}": "${CNTX.transactionFee}",
				"${i18n{i18n.common.brokerFee}}": "${CNTX.brokerFee}",
				"${i18n{i18n.common.recipientDetail}}:": "${CNTX.address}",
				"${i18n{i18n.common.transferCharge}}": "${CNTX.transferCharges}"
			},
			"additionalIdentifier": {
				"${i18n{i18n.common.transferDate}}": "${i18n{i18n.common.dateFormat}}"
			},
			"minimumRecords": "5"
		},
		"segDocuments": {
			"segmentMasterData": "${CNTX.documents}",
			"segmentUI": {
				"lblAttachmentType": "",
				"imgAttachmentType": "${segmentMasterData.fileImageSource}",
				"lblAttachment": "${segmentMasterData.fileName}",
				"lblDownload": "${segmentMasterData.fileActionSource}"
			},
			"backEndMappings": {
				"fileContent": "${segmentMasterData.fileContent}"
			}
		},
		"segErrorDetails": {
			"segmentMasterData": "${CNTX.errorDetails}",
			"segmentUI": {
				"lblGenericMsgInfo": "${segmentMasterData.message}"
			},
			"maxErrorMsgLength": "3"
		}
	},
	"detailsSection": {
		"lblNotes": "${i18n{i18n.common.notes}}",
		"noteMsg": "${CNTX.notes}",
		"lblSupportingDocsLabel": "${i18n{i18n.common.supportingDocs}}",
		"btnShowMore": "${i18n{i18n.common.showMore}}",
		"btnShowLess": "${i18n{i18n.common.showLess}}"
	},
	"footerSection": {
		"btnSuccessAction1": "${i18n{i18n.common.done}}",
		"btnSuccessAction2": "${i18n{i18n.common.transferActivities}}",
		"btnSuccessAction3": "",
		"btnSuccessAction4": "",
		"btnFailureAction1": "${i18n{i18n.common.close}}",
		"btnFailureAction2": "${i18n{i18n.common.contactUs}}"
	}
}

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

{}

Dynamic Skin

The Dynamic Skin contract of the Flow 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>
}

Format for Dynamic Skinning

The Flow Acknowledgment component provides two methods to assign skins to the segmentsFields parameter. These are

• Applying Skin Directly: Using this method, a direct static pre-defined skin is assigned to the widget as a key value pair.
  In the following example, the lblGrey400FS30 skin is applied to the lblFieldLabel Label inside the segDetails template.
  

   "segDetails": {
        "lblFieldLabel" : "lblGrey400FS30"
     },

• Applying Skin Based on a Condition: Using this method, the label is assigned a pre-defined skin based on certain conditions. For example, to apply different Font icons for different file extensions (such as PDF).
  In the following example, the lblAttachmentType Label applies the lblGrey300FS50 skin when a PDF files is displayed.
  

  "lblAttachmentType" : {
    "PDF" : "lblIconGrey300FS50"
  }
  

  The constants for each font icons (such as PDF) must be created in the componentUtility file. After creating the constants, a developer can map the constant with the skin name in the contract.

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

{
  "fields" : {
    "lblSuccessField2" : "lblGrey500FS70Emp"
  },
  "segmentsFields" : {
    "segDetails": {
      "lblFieldLabel" : "lblGrey400FS30",
      "lblFieldValue" : "lblGrey500FS30Emp"
    },
    "segDocuments": {
      "lblAttachment" : "lblGrey500FS30",
      "lblAttachmentType" : {
        "PDF" : "lblIconGrey300FS50"
      }
    },
    "segErrorDetails" : {
      "flxGenericMsgIcon" : "flxGrey200XL"
    }
  }
}

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

downloadPDF Event

The downloadPDF event is used to provide the Selected Row data information of the mapped Attachments to the parent widget.

var filedata = {
	"fileName": "Attachement2.Pdf",
	"filetypeSource": "\ue95f",
	"fileContent": "content",
	"fileActionSource": "\ue93d"
};
this.downloadPDF(filedata);

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.flowAck.setContext(contextData);

adjustScreen Method

This method is used to retrieve the dynamic height of the header. This height is then used to adjust the height of the content and footer of the screen.

this.view.flowAck.adjustScreen(headerheight);

Context Object

The context object is a JSON object that is passed to the Flow Acknowledgment component containing details of the payment or transaction.

Out of the response provided, the following parameters are used in the component.

• from
• to
• frequency
• transferDate
• fxRate

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

var context = {
      "from": "Savings Account",
      "to": "John's Account",
      "frequency": "Once",
      "transferDate": "01/01/1971",
      "fxRate": "FX123456",
}