Numerical Range

Overview

The Numerical Range component is a contractual component that provides UI for the user to enter a numerical value or a range of values and provides it to the component consumer. This component helps the user to enter the amount or check number. The user can also offer a range of values to search through a list of records.

NOTE: The Numerical Range component is used inside the Mobile Banking application.

Numerical Range Contracts

The Numerical Range component contains the following contracts for customizing the widgets and data.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• Numerical Range
• onError Event
• onTextEntered Event
• setContext Method
• getSelectedRange Method

Service Parameters

The Numerical Range component uses the Context variable to navigate a different screen. The component does not use the Service Parameters contract.

By default, the Numerical Range component does not contain any value for the Service Parameter contract.

{}

Data Mapping

The Data Mapping property of the Numerical Range component maps the widget IDs with the data to be displayed. The data is mapped to the template widgets using the Context variable.

Here is a sample of the JSON object provided in the Data Mapping of the Numerical Range component.

{
    "headerSection": {
        "lblNrRangeTitle": "${i18n{i18n.common.amountTitle}}",
        "lblNrRangeOption": "${i18n{i18n.common.optionAddRange}}"
    },
    "common": {
        "nrRangeCurrency": "${CNTX.currency}",
        "nrRangePlaceholder": "${CNTX.placeholder}",
        "nrRangeErrorInvalid": "${i18n{i18n.common.errorInvalidFormat}}",
        "nrRangeErrorNegative": "${i18n{i18n.common.errorNegativeInterval}}",
        "inputMode": "Numeric",
        "maxLength": "10",
        "restrictChar": "#,&$<>?:{}|[];' `!@#$%^&*~/`\\\".=+-_©®™✓°¥€¢£∆¶×÷π√•()℅←↑↓→♪′∞≈≠′″′∞≈≠′″′§ΠμΩ♣♠♥♦‰«≤‹⟨"
    },
    "fromSection": {
        "lblNrRangeFrom": "${i18n{i18n.common.fromWithColon}}",
        "tbxNrRangeFrom": "${CNTX.nrRangeFrom}",
        "mandatoryValidation": {
            "isMandatory": true,
            "mandatoryErrorMessage": "${i18n{i18n.common.manadatoryErrorMessage}}"
        }
    },
    "toSection": {
        "lblNrRangeTo": "${i18n{i18n.common.toWithColon}}",
        "tbxNrRangeTo": "${CNTX.nrRangeTo}",
        "mandatoryValidation": {
            "isMandatory": false,
            "mandatoryErrorMessage": "${i18n{i18n.common.manadatoryErrorMessage}}"
        }
    }
}

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

Important Considerations

A developer must follow any of these formats to map data with the widgets inside the Data Mapping contract.

• To map a plain string, provide the text in the String format. For example, follow this format to map an image with lblNrRangeFrom Label.
  

  "lblNrRangeFrom": "From"

• To map an i18n value, provide the i18n key in a String format. For example, follow this format to map the lblNrRangeFromLabel with the i18n key for From.
  

  "lblNrRangeFrom": "${i18n{i18n.common.from}}"

• To map a context or a collection object, provide the value in a String format. For example, follow this format to map the lblNrRangeFrom Label to the Account Type data retrieved from the Context Data Object.
  

  "lblNrRangeFrom": "${CNTX.nrRangeFrom}"

• While designing a new template, follow the naming conventions for the widgets. For example, the name of a Label widget must start with lbl, a RichText widget must start with rtx, and the name of a FlexContainer widget must start with flx.

Data Formatting

The Data Formatting property provides a custom format for a specific requirement. By default, this component contains no value in this contract.

{}

Conditional Mapping Key

The Conditional Mapping Key defines mapping based on a criterion. The property specifies the value on which the conditional data mapping check should happen.

The Numerical Range component does not contain any value for this key by default.

""

Conditional Mapping

The Conditional Mapping property key maps a widget with data from the Collection Object as per the Conditional Mapping key.

The Numerical Range component does not contain any value for this key by default.

{}

Numerical Range

The Numerical Range group is a group of contracts specific to the Numerical Range component. This group contains the contract given below.

• Add Range Option
• Display

Add Range Option

This contract is used to enable or disable the widgets to display an interval. When the value of this contract is true, the component displays a From and To field to enter the range interval. When the value of this contract is false, the components displays input fields to enter the numerical values.

true

Display

This contract sets the widget alignments of the From and To fields.

Horizontal

onError event

The OnError event handles any error that occurs during the user journey. The onError passes an error object to the parent widget containing the information about the error and where it had happened.

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

onTextEntered Event

This event is triggered when the user enters the data in the input field.

this.onTextEntered(data);

setContext Method

This method is invoked inside the parent component or form controller. This method passes a text used to the input box in place of the entry in the input box.

this.view.numericalrange.setContext(contextData);

getSelectedRange Method

This method fetches the data using the range that the user selects as input.

this.view.numericalrange.getSelectedRange();

Context Object

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

• nrRangeFrom
• nrRangeTo
• currency

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

var contextData={
  "nrRangeFrom": "3",
  "nrRangeTo": "528",
  "currency": "$"
};