SegmentedUI

Overview

The SegmentedUI component is a utility component used inside other components for selecting options. The SegmentedUI component helps the user to select a single option from a list of options (maximum four). The SegmentedUI component binds an action with every option. When the user selects an option, the action set for the corresponding option is invoked.

NOTE: The SegmentedUI Tab component is used inside the Mobile Banking application.

Using the SegmentedUI Component

To use the SegmentedUI component, a developer must follow these steps.

1. From Quantum Visualizer, open the application in the Design view.
2. Under the Project Explorer, expand the application name > Forms, and open the form to which the component is to be added.
3. Add the SegmentedUI component to the Form.
4. Under the Project Explorer, expand the application name > Controllers.
5. Select and open the form controller of the parent of the component.
6. In the Form Controller, invoke the setData method to set the list of options and their corresponding actions in the preShow or postShow event of the form.

The sample code given below shows how to define the set of options inside the Form Controller of the component consumer.

define({
	/**
	 * @api : preShow
	 * Gets invoked initially before rendering of UI
	 * @return : NA
	 */
	preshow: function() {
		var scope = this;
		var dataSegment = [{
				title: "Transactions",
				action: scope.alertTransactions,
				selected: true
			},
			{
				title: "Blocked Funds",
				action: scope.alertFunds
			}
		];
		//set data to the segmentedUI
		scope.view.SegmentedUI.setData(dataSegment);
	},

	/**
	 * @api : onClick
	 * when the tab is clicked trigger this callback
	 * @return : NA
	 */
	alertTransactions: function() {
		alert("transactions are dispalyed");
	},

	alertFunds: function() {
		alert("Blocked Funds are displayed");
	},
});

SegmentedUI Contracts

The SegmentedUI component does not contain any properties or events. It contains the following method to define the options in the component.

• setData Method

setData Method

This method is used to define the list of options (or tabs) to be displayed and set their corresponding actions in the SegmentedUI component. It can set up to four tabs.

this.view.SegmentedUI.setData([{
		title: "Option 1",
		action: this.action1
	},
	{
		title: "Option 2",
		action: this.action2,
		selected: true
	},
]);