Frequency Picker

Overview

The Frequency Picker component provides a UI for the user to define and select the intervals based on a date or occurrence for performing actions such as payment or transfer. The Frequency Picker component contains the following UI elements: DropDown component, Bottom Sheet component, Date Picker, and Key-in field to form fields such as Frequency, Duration, Start Date, Send On, End Date, and Due Date.

The Frequency Picker component provides the following features.

The Frequency drop-down shows the following static list: Once, Daily, Weekly, Every Two Weeks, Monthly, Quarterly, Half Yearly, Yearly.
The Duration drop-down shows the following list: Date Range, Number of Transactions, and Until I cancel.
The Number of Transactions field can display the number based on the user selected Frequency, Start Date, and End Date entered. This field also allows the user to enter the number manually.
The Start Date, Send On, End Date, and Due Date fields support the following date formats: DD-MM-YYYY, DD/MM/YYYY, DD.MM.YYYY, MM-DD-YYYY, MM/DD/YYYY, MM.DD.YYYY, YYYY-MM-DD, YYYY/MM/DD, and YYYY.MM.DD.

NOTE: The Frequency Picker component is used inside the Mobile Banking application.

Frequency Picker Contracts

The Frequency Picker component provides the contracts given below.

Service Parameters
Data Mapping
Data Formatting
Conditional Mapping Key
Conditional Mapping
Frequency Picker
Frequency Options
Duration Options
onError Event
onDataEntered Event
setContext Method
setDataToBePrepopulated Method
setConfigsFromParent Method

Service Parameters

The Service Parameters contract of the Frequency Picker component sets the service details required to configure the APIs that the component requires.

Here is a sample of the JSON object provided in the Service Parameter contract of the Frequency Picker component.

{ }

Data Mapping

The Data Mapping contract of the Frequency Picker component maps the widget IDs with the data to be displayed. The Data Mapping contract retrieves the data from the Context Data object and maps it with the corresponding keys.

Here is a sample of the JSON object provided in the Data Mapping contract of the Frequency Picker component.

{
	"frequency": {
		"heading": "${i18n{i18n.common.frequencyHeadingWithColon}}",
		"frequencySelectorHeading": "${i18n{i18n.common.frequency}}",
		"frequencySelectorSubHeading": "${i18n{i18n.common.frequencyHeading}}",
		"availableOptions": {
			"once": "${i18n{i18n.common.once}}",
			"daily": "${i18n{i18n.common.daily}}",
			"weekly": "${i18n{i18n.common.weekly}}",
			"everyTwoWeeks": "${i18n{i18n.common.everyTwoWeeks}}",
			"monthly": "${i18n{i18n.common.monthly}}",
			"quarterly": "${i18n{i18n.common.quarterly}}",
			"everySixMonths": "${i18n{i18n.common.everySixMonths}}",
			"annually": "${i18n{i18n.common.annually}}"
		}
	},
	"duration": {
		"heading": "${i18n{i18n.common.duration}}",
		"durationSelectorHeading": "${i18n{i18n.common.durationHeadingWithColon}}",
		"durationSelectorSubHeading": "${i18n{i18n.common.durationHeading}}",
		"availableOptions": {
			"dateRange": "${i18n{i18n.common.dateRange}}",
			"numberOfTransactions": "${i18n{i18n.common.noOfTransactions}}",
			"untilCancel": "${i18n{i18n.common.untilICancel}}"
		}
	},
	"sendOn": {
		"heading": "${i18n{i18n.common.sendOnHeadingWithColon}}",
		"dateFormat": "MM/DD/YYYY",
		"calendarHeading": "${i18n{i18n.common.sendOnHeading}}",
		"calendarSubHeading": "${i18n{i18n.common.sendOnSubHeading}}",
		"countOfValidDays": 10
	},
	"startDate": {
		"heading": "${i18n{i18n.common.startDateHeadingWithColon}}",
		"dateFormat": "MM/DD/YYYY",
		"calendarHeading": "${i18n{i18n.common.startDateHeading}}",
		"calendarSubHeading": "${i18n{i18n.common.startDateSubHeading}}",
		"countOfValidDays": 10
	},
	"endDate": {
		"heading": "${i18n{i18n.common.endDateHeadingWithColon}}",
		"dateFormat": "MM/DD/YYYY",
		"calendarHeading": "${i18n{i18n.common.endDateHeading}}",
		"calendarSubHeading": "${i18n{i18n.common.endDateSubHeading}}",
		"countOfValidDays": 10
	},
	"transactionsCount": {
		"description": "${i18n{i18n.common.transactionsCountHeading}}",
		"maxTextLength": 3,
		"mandatoryErrorMsg": "${i18n{i18n.common.manadatoryErrorMessage}}",
		"invalidTransactionCountErrorMsg": "${i18n{i18n.common.invalidTransactionCountErrorMsg}}"
	}
}

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

Key	Description
frequency	Maps the data in the frequency drop-down list. This key accepts a JSON object with the following keys. `heading`: Sets the placeholder text of the frequency selector input box. `frequencySelectorHeading`: Sets the heading of the frequency selector drop-down. `frequencySelectorSubHeading`: Sets the sub-heading of the frequency selector drop-down. `availableOptions`: Sets the frequency options inside the drop-down list.
duration	Maps the data in the duration drop-down list. This key accepts a JSON object with the following keys. `heading`: Sets the placeholder text of the dropdown selector input box. `durationSelectorHeading`: Sets the heading of the frequency selector drop-down. `durationSelectorSubHeading`: Sets the sub-heading of the frequency selector drop-down. `availableOptions`: Sets the frequency options inside the drop-down list.
sendOn	Maps the data in the sendOn field. This key accepts a JSON object with the following keys. `heading`: Sets the placeholder text of the sendOn input box. `dateFormat`: Sets the format of the date in the sendOn field. `calendarHeading`: Sets the heading of the sendOn date calendar. `calendarSubHeading`: Sets the sub-heading of the sendOn date calendar. `countOfValidDays`: The number of days from the start date to the end date that the user can select.
startDate	Maps the data in the startDate field. This key accepts a JSON object with the following keys. `heading`: Sets the placeholder text of the startDate input box. `dateFormat`: Sets the format of the date in the startDate field. `calendarHeading`: Sets the heading of the startDate date calendar. `calendarSubHeading`: Sets the sub-heading of the startDate date calendar. `countOfValidDays`: The number of days from the start date to the end date that the user can select.
endDate	Maps the data in the endDate field. This key accepts a JSON object with the following keys. `heading`: Sets the placeholder text of the endDate input box. `dateFormat`: Sets the format of the date in the endDate field. `calendarHeading`: Sets the heading of the endDate date calendar. `calendarSubHeading`: Sets the sub-heading of the endDate date calendar. `countOfValidDays`: The number of days from the start date to the end date that the user can select.
transactionsCount	Maps data for the Number of Transactions Input box. This key accepts a JSON object with the following keys. `heading`: Sets the placeholder text of the endDate input box. `dateFormat`: Sets the format of the date in the endDate field. `calendarHeading`: Sets the heading of the endDate date calendar. `calendarSubHeading`: Sets the sub-heading of the endDate date calendar. `countOfValidDays`: The number of days from the start date to the end date that the user can select.

Data Formatting

Data formatting property adds a new formatting type or overrides the existing formatting type in the default format JSON.

{}

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.

By default, the Frequency Picker component does not contain any value for this key.

""

Conditional Mapping

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

By default, the Frequency Picker component does not contain any customization for this key.

{}

Frequency Picker

The Frequency Picker group contains the following contract.

Dependency Config

Dependency Config

This contract configures the fields to be made visible based on the user-selected frequency.

Parameter	Value
Syntax	JSON object containing the following keys. `frequencyType`: Configures the fields based on frequency type `frequencyOptions`: The frequency options keys as listed in the Data Mapping contract. `dependentFields`: The fields to be made visible based on the frequency type. `durationType`: Configures the fields based on duration type `dependentFields`: The fields to be made visible based on the duration type.
Programmatic Name	`dependencyConfig`
Default Value	{ "frequencyType": { "oneTimeTransfer": { "frequencyOptions": ["${frequency.availableOptions.once}"], "dependentFields": ["sendOn"] }, "recurringTransfer": { "frequencyOptions": ["${frequency.availableOptions.daily}", "${frequency.availableOptions.weekly}", "${frequency.availableOptions.everyTwoWeeks}", "${frequency.availableOptions.monthly}", "${frequency.availableOptions.quarterly}", "${frequency.availableOptions.everySixMonths}", "${frequency.availableOptions.annually}"], "dependentFields": ["duration"] } }, "durationType": { "${frequency.duration.availableOptions.dateRange}": { "dependentFields": ["startDate", "endDate"] }, "${frequency.duration.availableOptions.numberOfTransactions}": { "dependentFields": ["startDate", "transactionsCount"] }, "${frequency.duration.availableOptions.untilCancel}": { "dependentFields": ["startDate"] } } }
Type	JSON

Frequency Options

The Frequency Options group contains the following contracts to customize the Frequency drop-down list.

Row Template Config
Header Template Config
Label Id to be Mapped in Template

Row Template Config

The Row Template contract sets the Segment row template for the drop-down lists in the component.

A developer can set the value for this contract in two formats.

String Format: The dynamic row template ID is provided in a String format. For example: flxTempSort7, where flxTempSort7 is the row template ID.
JSON Format: This format supports the inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

Parameter	Value
Syntax	This parameter sets the row template ID as a String or a JSON object containing the following keys. `templateID`: Sets the row template ID as a String. `microAppName`: Sets the name of the Microapp containing the template.
Programmatic Name	`freqRowTemplateConfig`
Default Value	{ "templateID": "flxTempSort7", "microAppName": "ResourcesMA" }
Type	JSON/String

Header Template Config

The Header Template contract sets the Segment section header template for the drop-down lists in the component.

A developer can set the value for this contract in two formats.

String Format: The dynamic row template ID is provided in a String format. For example: flxTempSort1, where flxTempSort1 is the row template ID.
JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

Parameter	Value
Syntax	This parameter sets the row template ID as a String or a JSON object containing the following keys. `templateID`: Sets the row template ID as a String. `microAppName`: Sets the name of the Microapp containing the template.
Programmatic Name	`freqSelectedRowTemplateConfig`
Default Value - JSON	{ "templateID": "flxTempSort1", "microAppName": "ResourcesMA" }
Type	JSON/String

Label Id to be Mapped in Template

The ID of the Label widget in the Segment row template that displays the selected Frequency Type

Parameter	Value
Syntax	This parameter accepts the Label widget ID in a String format.
Programmatic Name	`freqLabelId`
Default Value	lblOption
Type	String

Duration Options

The Duration Options group contains the following contracts to customize the Duration drop-down list.

Row Template Config
Header Template Config
Label Id to be Mapped in Template

Row Template Config

The Row Template contract sets the Segment row template for the drop-down lists in the component.

A developer can set the value for this contract in two formats.

String Format: The dynamic row template ID is provided in a String format. For example: flxTempSort7, where flxTempSort7 is the row template ID.
JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

Parameter	Value
Syntax	This parameter sets the row template ID as a String or a JSON object containing the following keys. `templateID`: Sets the row template ID as a String. `microAppName`: Sets the name of the Microapp containing the template.
Programmatic Name	`durationRowTemplateConfig`
Default Value	{ "templateID": "flxTempSort7", "microAppName": "ResourcesMA" }
Type	JSON/String

Header Template Config

The Header Template contract sets the Segment section header template for the drop-down lists in the component.

A developer can set the value for this contract in two formats.

String Format: The dynamic row template ID is provided in a String format. For example: flxTempSort1, where flxTempSort1 is the row template ID.
JSON Format: This format supports inter-app access while using composite apps. In this format, the developer must provide both the Microapp Name and the template ID as a JSON object.

Parameter	Value
Syntax	This parameter accepts the row template ID as a String or a JSON object containing the following keys. `templateID`: Sets the row template ID as a String. `microAppName`: Sets the name of the Microapp containing the template.
Programmatic Name	`durationSelectedRowTemplateConfig`
Default Value - JSON	{ "templateID": "flxTempSort1", "microAppName": "ResourcesMA" }
Type	JSON/String

Label Id to be Mapped in Template

The Label widget ID in the Segment row template that displays the selected Duration Type

Parameter	Value
Syntax	This parameters assigns a Label widget ID in a String format.
Programmatic Name	`durationLabelId`
Default Value	lblOption
Type	String

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.

Parameter Value

Parameter	Value
Input parameter	The JSON object contains the following keys: `level`: This key contains the String value regarding where the error occurs. It can be from the component View controller or the component Business controller. `method`: This key contains the function that handles the error. `error`: This key contains the actual error message and the stack.
Sample Input	var errordata = { "level": "ComponentViewController", "method": "methodName", "error": errorMsg }; this.onError(errordata);
Return Type	None

Input parameter

The JSON object contains the following keys:

level: This key contains the String value regarding where the error occurs. It can be from the component View controller or the component Business controller.
method: This key contains the function that handles the error.
error: This key contains the actual error message and the stack.

Sample Input

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

Return Type

None

onDataEntered Event

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

Parameter	Value
Input parameter	`data`: The user-entered information in the input field in a JSON object format.
Programmatic Name	`onDataEntered`
Sample Code	this.onDataEntered(data);
Return Type	None

setContext Method

Sets the data in the component which component consumer wants to set.

Parameter	Value
Syntax	`this.view.componentID.setContext(contextData);`
Input parameter	JSON object containing the context variable. For more information on the context object, click here.
Sample Input	this.view.frequencypicker.setContext(contextData);
Return Type	None

setDataToBePrepopulated Method

This method to pre-populates the frequency options in the Frequency Picker component while loading.

Parameter	Value
Syntax	`this.view.componentID.setDataToBePrepopulated(dataToBePrepopulated);`
Input parameter	The JSON object contains the following keys: `frequency`: Sets the frequency type, `duration`: Sets the duration type. `sendOn`: Sets the input in the sendOn field. `startDate`: Sets the input in the startDate field. `endDate`: Sets the input in the endDate field.
Sample Input	var dataToBePrepopulated = { "frequency": "once", "duration": "dateRange", "sendOn": "01/05/2022", "startDate": "01/05/2022", "endDate": "01/05/2022" }; this.view.frequencypicker.setDataToBePrepopulated(dataToBePrepopulated);
Return Type	None

setConfigsFromParent Method

This method sets the configurations from the parent component to the Frequency Picker component when the Frequency Picker component is placed inside another component.

Parameter	Value
Syntax	`this.view.<componentID>.setConfigsFromParent(configParams);`
Input parameter	`configParams`: Sets the JSON object required for the child component. The JSON object can contain all the contracts used in the Email Address component as keys. `serviceParameters`: JSON object containing the Service configurations. `dataMapping`: JSON object containing the data mapped with the widget. `dataFormatting`: JSON object containing the look and feel of the data.
Sample Input	var configParams ={ "serviceParameters": "this._frequencyPickerServiceParameters", "dataMapping": "this._frequencyPickerDataMapping", "dataFormatting": "this._frequencyPickerDataFormatting" } this.view.frequencypicker.setConfigsFromParent(configParams);
Return Type	None

Context Object

A context object is a JSON object that passes the data required for the component. The context variable helps the component get the data using the frequency options such as daily.

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

var contextData = {
	"data": {
		"daily": "Daily"
	}
}

Dark Mode

Expand/Collapse

In this topic