Date Range

Overview

The Date range component is a contractual component that helps the user select a range of time to filter through a list of records. The Date component displays the date in a row or with a drop-down option for user selection. When the user selects the drop-down option, a calendar appears displaying the default start and end date. The Date range component allows the user to select a variety of ranges such as six months, one year, two years, or a custom range. When the custom range is selected, the component also provides the option to select the start and end date.

The developer can customize various options such as the date formats, start date, end date, headers, and sub-headers at the component level. The run-time configurations for this component should be set in the parent of the component (such as the Form Controller).

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

Date Range Contracts

The Date Range component contains the following contracts for customizing the widgets and date selection.

• Service Parameters
• Data Mapping
• Data Formatting
• Conditional Mapping Key
• Conditional Mapping
• onError Event
• setContext Method
• getSelectedRange Method
• setConfigsFromParent Method

Service Parameters

The Date Range component uses the Context variable to navigate to a different screen. The component does not use the Service Parameters contract. By default, the Date Range component does not contain any value for the Service Parameter contract.

{}

Data Mapping

The Data Mapping property of the Date 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 Date Range component.

{
	"btnRanges": {
		"Last 7days": "7",
		"Previous 30 Days": 30,
		"3M": "90",
		"6M": 180,
		"Last Year": 365,
		"Custom": "-1"
	},
	"defaultRange": {
		"selectedTab": "3M"
	},
	"configurableLabels": {
		"HeaderVisibility": true,
		"HeaderLabel": "${i18n{i18n.common.byTimePeriod}}",
		"StartDateLabel": "${i18n{i18n.common.startDate}}",
		"EndDateLabel": "${i18n{i18n.common.endDate}}",
		"customStartDateHeader": "${i18n{i18n.common.byTimePeriod}}",
		"customStartDateSubHeader": "${i18n{i18n.common.pleaseSelectDate}}",
		"customEndDateHeader": "${i18n{i18n.common.byTimePeriod}}",
		"customEndDateSubHeader": "${i18n{i18n.common.pleaseSelectDate}}",
		"validStartDate": [22, 9, 2020],
		"validEndDate": "",
		"dateFormat": "DD/MM/YYYY",
		"blockDate": [
			[12, 12, 2021],
			[23, 12, 2021],
			[20, 11, 2021]
		]
	}
}

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. By default, this component contains no value in this contract.

{}

Conditional Mapping Key

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

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. By default, this component contains no value in this contract.

{}

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. By default, this component contains no value in this contract.

{}

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

setContext Method

This method is invoked inside the parent component or form controller. Using this method, a developer can pass the data required for the component from the parent of the component.

this.view.daterange.setContext(contextData);

getSelectedRange Method

This method retrieves the date range selected by the user.

var selectedRange = {
	"startDate": startDateValue,
	"endDate": endDateValue,
	"selectedTab": selectedTab
};
selectedRange = this.view.daterange.getSelectedRange();

setConfigsFromParent Method

This method sets the configurations from the parent component to the Date Range component when the Date Range component is placed inside another component.

var configParams ={
	"serviceParameters": "this._ServiceParameters",
	"dataMapping": "this._DataMapping",
	"dataFormatting": "this._DataFormatting"
}
this.view.daterange.setConfigsFromParent(configParams);

Context Object

The Context Object is a JSON object used to pass data from the component's parent to the component. In the Date Range component, the Context Object passes the following data required for the component from the component consumer.

• dates
• selectedStartDate
• selectedEndDate
• selectedTab

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

let date = [[13, 12, 2021]];
let param = {
	"dates": date,
	"selectedStartDate": startDate,
	"selectedEndDate": endDate,
	"selectedTab": selectedTab
};