Data Formatting Framework

The Data Formatting framework is a group of JS files provided inside the Infinity Banking applications. These JS files help create a set of rules or data types and the layout specifications for each data type. Every data, including the response retrieved from the service and the user input, is assigned a data type defined inside this framework. Infinity Components use the framework to convert and display the data per the specifications for each data type. The formatting implemented using this framework works globally throughout the application.

For example, the user's account balance is assigned the format type as FORMAT_AMOUNT with the minimumFractionDigits key set as two. Whenever the account balance displays inside the application, it will always display along with the two numbers after the decimal point. Here is the sample code that implements the above scenario.

"AMOUNT": {
	"BusinessRuleType": "FORMAT_AMOUNT",
	"BusinessRule": {
		"signDisplay": "auto",
		"minimumFractionDigits": 2,
		"maximumFractionDigits": 2,
		"currency": "USD"
	}
}

When the minimumFractionDigits key for the FORMAT_AMOUNT is configured as two, every data set with the format type as FORMAT_AMOUNT will display two numbers after the decimal point throughout the application.

The Data Formatting framework also provides the Data Formatting contract in each component to customize the layout for a specific component. Refer the Custom Format Type section on how to customize a data type.

The Data Formatting framework is available in the require module of the Infinity application. This framework contains the following JS files to implement the dynamic formatting.

• CurrencyCode.js
• DayJS
• FormatJSON.js
• FormatUtils.js

CurrencyCode.js

The Currency Code JS file contains the list of locales and their corresponding ISO currency code. The list of locales and currency codes is configured as a key-value pair. The JSON object inside the CurrencyCode JS file can be retrieved using the getCurrencyCode method.

The following code is a sample JSON object inside the CurrencyCode JS file.

{
    "af-ZA": "ZAR",
    "ar-AE": "AED",
    "ar-BH": "BHD",
    "ar-DZ": "DZD",
    "ar-EG": "EGP",
    "ar-IQ": "IQD",
    "ar-JO": "JOD",
    "ar-KW": "KWD",
    "ar-LB": "LBP",
    "ar-LY": "LYD",
    "ar-MA": "MAD",
    "ar-OM": "OMR",
    "ar-QA": "QAR",
    "ar-SA": "SAR",
    "ar-SY": "SYP",
    "ar-TN": "TND",
    "ar-YE": "YER",
    "az-AZ": "AZN",
    "be-BY": "BYN",
    "bg-BG": "BGN",
    "bs-BA": "BAM",
    "ca-ES": "ESP",
    "cs-CZ": "CZK",
    "cy-GB": "GBP",
    "da-DK": "DKK",
    "de-AT": "EUR",
    "de-CH": "CHF",
    "de-DE": "EUR",
    "de-LI": "CHF",
    "de-LU": "EUR",
    "dv-MV": "MVR",
    "el-GR": "EUR",
    "en-AU": "AUD",
    "en-BZ": "BZD",
    "en-CA": "CAD",
    "en-CB": "XCD",
    "en-GB": "GBP",
    "en-IE": "EUR",
    "en-JM": "JMD",
    "en-NZ": "NZD",
    "en-PH": "PHP",
    "en-TT": "TTD",
    "en-US": "USD",
    "en-ZA": "ZAR",
    "en-ZW": "ZWD",
    "es-AR": "ARS",
    "es-BO": "BOB",
    "es-CL": "CLP",
    "es-CO": "COP",
    "es-CR": "CRC",
    "es-DO": "DOP",
    "es-EC": "ECS",
    "es-ES": "EUR",
    "es-GT": "GTQ",
    "es-HN": "HNL",
    "es-MX": "MXN",
    "es-NI": "NIO",
    "es-PA": "PAB",
    "es-PE": "PEN",
    "es-PR": "USD",
    "es-PY": "PYG",
    "es-SV": "SVC",
    "es-UY": "UYU",
    "es-VE": "VED",
    "et-EE": "EUR",
    "eu-ES": "EUR",
    "fa-IR": "IRR",
    "fi-FI": "EUR",
    "fo-FO": "DKK",
    "fr-BE": "EUR",
    "fr-CA": "CAD",
    "fr-CH": "CHF",
    "fr-FR": "EUR",
    "fr-LU": "LUF",
    "fr-MC": "MCF",
    "gl-ES": "ESP",
    "gu-IN": "INR",
    "he-IL": "ILS",
    "hi-IN": "INR",
    "hr-BA": "BAM",
    "hr-HR": "HRK",
    "hu-HU": "HUF",
    "hy-AM": "AMD",
    "id-ID": "IDR",
    "is-IS": "ISK",
    "it-CH": "CHF",
    "it-IT": "EUR",
    "ja-JP": "JPY",
    "ka-GE": "GEL",
    "kk-KZ": "KZT",
    "kn-IN": "INR",
    "ko-KR": "KRW",
    "kok-IN": "INR",
    "ky-KG": "KGS",
    "lt-LT": "EUR",
    "lv-LV": "EUR",
    "mi-NZ": "NZD",
    "mk-MK": "MKD",
    "mn-MN": "MNT",
    "mr-IN": "INR",
    "ms-BN": "BND",
    "ms-MY": "MYR",
    "mt-MT": "EUR",
    "nb-NO": "NOK",
    "nl-BE": "EUR",
    "nl-NL": "EUR",
    "nn-NO": "NOK",
    "ns-ZA": "ZAR",
    "pa-IN": "INR",
    "pl-PL": "PLN",
    "ps-AR": "AFN",
    "pt-BR": "BRL",
    "pt-PT": "EUR",
    "qu-BO": "BOB",
    "qu-EC": "USD",
    "qu-PE": "PEN",
    "ro-RO": "RON",
    "ru-RU": "RUB",
    "sa-IN": "INR",
    "se-FI": "EUR",
    "se-NO": "NOK",
    "se-SE": "SEK",
    "sk-SK": "EUR",
    "sl-SI": "EUR",
    "sq-AL": "ALL",
    "sr-BA": "BAM",
    "sr-SP": "RSD",
    "sv-SE": "SEK",
    "sw-KE": "KES",
    "syr-SY": "SYP",
    "ta-IN": "INR",
    "te-IN": "INR",
    "th-TH": "THB",
    "tl-PH": "PHP",
    "tn-ZA": "ZAR",
    "tr-TR": "TRY",
    "tt-RU": "RUB",
    "uk-UA": "UAH",
    "ur-PK": "PKR",
    "uz-UZ": "UZS",
    "vi-VN": "VND",
    "xh-ZA": "ZAR",
    "zh-CN": "CNY",
    "zh-HK": "HKD",
    "zh-MO": "MOP",
    "zh-SG": "SGD",
    "zh-TW": "TWD",
    "zu-ZA": "ZAR",
    "default": "USD"
}		

getCurrencyCode Method

The CurrencyCode JS file provides the getCurrencyCode method to retrieve the JSON object with locales and currency code.

this.currencyCodeJSON.getCurrencyCode();

DayJS

The DayJS framework is a third-party framework used by the Data Formatting framework to interpret any information related to date. The DayJS.js file is used inside the FormatUtils.js file to implement the date format.

FormatJSON.js

The FormatJSON.js file contains the definition of each format used inside the application. The file includes a formatJSON variable containing JSON objects with each format type's definition.

NOTE: The code given by the developer inside the Data Formatting contract takes precedence over the code provided inside the FormatJSON.js file.

Each format type must contain the following key-value pairs.

• BusinessRuleType
• BusinessRule

BusinessRuleType

The BusinessRuleType is the name of the data type in a String format. Infinity Components provide some pre-defined sets of data types. The rule types defined inside the FormatJSON.js file cannot be modified. However, a developer can use multiple rule types to create a customized format.

Here is the list of format types currently defined inside the FormatJSON.js file.

• FORMAT_DATE: Specifies how to display the date.
• FORMAT_CURRENCY: Specifies how currency is displayed.
• FORMAT_AMOUNT: Specifies the display of the amount.
• FORMAT_ACCOUNT: Specifies how the account number is displayed.
• FORMAT_ACCOUNT_NAME: Specifies how the account name is displayed.
• FORMAT_DATE_OBJECT: Specifies how to display the output of the date object.
• FORMAT_PERCENT: Specifies how to display a number appended with a percentage symbol.
• FORMAT_LONG_TEXT: Specifies how to truncate a long text.
• FORMAT_LOWERCASE_TEXT: Specifies how to format input text when the text is in the lower case.
• FORMAT_UPPERCASE_TEXT: Specifies how to format input text when the text is in the upper case.
• FORMAT_AMOUNT_WITHOUT_CURRENCY: Specifies the display of amount without displaying the currency symbol.
• TIMESTAMP: Specifies the format used to modify the timestamp data.
• AMOUNT_WITH_CURRENCYCODE: Specifies the display of the amount along with the currency code. If the input to this format is not a number, the FormatUtils file does not format the data and returns the input data as output data.
• AMOUNT_WITH_CURRENCYSYMBOL: Specifies the display of the amount along with the currency code symbol. If the input to this format is not a number, the FormatUtils file does not format the data and returns the input data as output data.
• WHOLE_NUMBER: Specifies how to convert numbers into whole numbers.
• AMOUNT_WITH_SUP: Specifies how to format amount along with a superscript value.

BusinessRule

The BusinessRule key accepts a JSON object containing the specifications to define for each format.

The following table contains the key-value pairs that can be used inside the BusinessRule key for each Business Rule Type according to the format type.

Sample FormatJSON.js

Here is a sample of the FormatJSON.js file inside the Infinity application.

 var formatJSON = {
    "DATE": {
        "BusinessRuleType": "FORMAT_DATE",
        "BusinessRule": {
            "inputFormat": "YYYY-MM-DD",
            "displayFormat": "MM/DD/YYYY"
        }
    },
    "CURRENCY": {
        "BusinessRuleType": "FORMAT_CURRENCY",
        "BusinessRule": {
            "currencyDisplay": "symbol"
        }
    },
    "AMOUNT": {
        "BusinessRuleType": "FORMAT_AMOUNT",
        "BusinessRule": {
            "signDisplay": "auto",
            "minimumFractionDigits": 2,
            "maximumFractionDigits": 2,
            "currency": "USD"
        }
    },
    "ACCOUNT_NUMBER": {
        "BusinessRuleType": "FORMAT_ACCOUNT",
        "BusinessRule": {
            "maskingCharacter": "X",
            "numberOfCharacters": 10,
            "maskingFromFront": "yes"
        }
    },
    "ACCOUNT_NAME": {
        "BusinessRuleType": "FORMAT_ACCOUNT_NAME",
        "BusinessRule": {
            "maxLength": 22,
            "separator": "....",
            "data2SliceLength": -4
        }
    },
    "DATE_OBJECT": {
        "BusinessRuleType": "FORMAT_DATE_OBJECT",
        "BusinessRule": {
            "displayFormat": "MM/DD/YYYY"
        }
    },
    "PERCENT": {
        "BusinessRuleType": "FORMAT_PERCENT",
        "BusinessRule": {
            "signDisplay": "auto",
            "minimumFractionDigits": 2,
            "maximumFractionDigits": 2
        }
    },
    "LONG_TEXT": {
        "BusinessRuleType": "FORMAT_LONG_TEXT",
        "BusinessRule": {
            "maxLength": 15,
            "separator": "....",
            "stringSliceLength": -4
        }
    },
    "LOWERCASE_TEXT": {
        "BusinessRuleType": "FORMAT_LOWERCASE_TEXT",
        "BusinessRule": {}
    },
    "UPPERCASE_TEXT": {
        "BusinessRuleType": "FORMAT_UPPERCASE_TEXT",
        "BusinessRule": {}
    },
    "AMOUNT_WITHOUT_CURRENCY": {
        "BusinessRuleType": "FORMAT_AMOUNT_WITHOUT_CURRENCY",
        "BusinessRule": {
            "signDisplay": "auto",
            "minimumFractionDigits": 2,
            "maximumFractionDigits": 2,
            "locale": ""
        }
    },
    "TIMESTAMP": {
        "BusinessRuleType": "FORMAT_TIMESTAMP",
        "BusinessRule": {
            "inputFormat": "YYYY-MM-DDTHH:mm:ssZ[Z]",
            "displayFormat": "MM/DD/YYYY"
        }
    },
    "AMOUNT_WITH_SUP": {
        "BusinessRuleType": "FORMAT_AMOUNT_WITH_SUP",
        "BusinessRule": {
            "minimumFractionDigits": 2,
            "maximumFractionDigits": 2,
            "style": "currency",
            "currency": "USD",
            "currencyLocale": "en-US"
        }
    },
    "AMOUNT_WITH_CURRENCYCODE": {
        "BusinessRuleType": "FORMAT_AMOUNT_WITH_CURRENCYCODE",
        "BusinessRule": {
            "signDisplay": "auto",
            "currencyDisplay": "code",
            "minimumFractionDigits": 2,
            "maximumFractionDigits": 2,
            "locale": ""
        }
    },
    "AMOUNT_WITH_CURRENCYSYMBOL": {
        "BusinessRuleType": "FORMAT_AMOUNT_WITH_CURRENCYSYMBOL",
        "BusinessRule": {
            "signDisplay": "auto",
            "minimumFractionDigits": 2,
            "maximumFractionDigits": 2,
            "locale": ""
        }
    },
    "WHOLE_NUMBER": {
        "BusinessRuleType": "FORMAT_WHOLE_NUMBER",
        "BusinessRule": {}
    }
};

FormatUtils.js

The FormatUtils.js file handles the business logic based on the implementation in the FormatJSON.js file. It stores the information such as the default format JSON, currency code JSON, and the current locale information in the constructor.

The FormatUtils.js file uses the following methods to

• formatData Method
• updateFormatJSON Method

formatData Method

The formatData method interprets the key-value pairs provided in the custom data format and the code inside the FormatJSON.js file. This method converts the raw input data from the application to formatted data based on the format type.

let formattedValue = scope.formatUtils.formatData(format, data, dependentData);

updateFormatJSON Method

The method adds a new format or overrides the existing format from the default FormatJSON.js file.

{
    "AMOUNT_WITH_CURRENCYCODE": {
        "BusinessRuleType": "FORMAT_AMOUNT_WITH_CURRENCYCODE",
        "BusinessRule": {
            "signDisplay": "auto",
            "currencyDisplay": "code",
            "minimumFractionDigits": 2,
            "maximumFractionDigits": 2,
            "locale": "de-DE"
        }
    },
    "AMOUNT_WITHOUT_CURRENCY": {
        "BusinessRuleType": "FORMAT_AMOUNT_WITHOUT_CURRENCY",
        "BusinessRule": {
            "signDisplay": "auto",
            "locale": "ja-JP"
        }
    }
}

this.formatUtils.updateFormatJSON(customDataFormat);

Custom Format Type

The Data Formatting framework also allows the developer to create a customized version using the Data Format contract inside the component. The custom format implemented in this manner affects the display format of the data inside the component. It does not affect the format of the data globally.

To provide a custom format, here is the data that you must provide.

• The name of the format. This name must be different from the pre-defined format provided inside the FormatJSON.js file.
• BusinessRuleType key. The value provided to this key must be one of the formats provided here.
• BusinessRule key. This key accepts a JSON object containing the specifications of the layout.

Here is an example of the specification of the FORMAT_DATE inside the FormatJSON.js file. When this specification is implemented, the date will be displayed in the MM/DD/YYYY format throughout the application.

"DATE": {
	"BusinessRuleType": "FORMAT_DATE",
	//FORMAT_DATE rule type is used to format the date format.
	"BusinessRule": {
		"inputFormat": "YYYY-MM-DD",
		"displayFormat": "MM/DD/YYYY"
	}
}

To modify the display format of the date from MM/DD/YYYY to DD/MM/YYYY specifically for a component, provide the following JSON object in the Date Format contract of a component.

{
	"CUSTOM_DATE": {
		"BusinessRuleType": "FORMAT_DATE",
		"BusinessRule": {
			"inputFormat": "YYYY-MM-DD",
			"displayFormat": "DD/MM/YYYY"
		}
	}
}

When the Data Formatting property is assigned to this JSON object, the FormatUtils.js file replaces the layout specifications for FORMAT_DATE BusinessRuleType inside the FormatJSON.js file with the new specifications. This modification will be applied only to the component and will not affect the date layout in other application parts.