Filter Results
This component is used to display results after the data is filtered.
Following are the various views of the Filter Results component:
- No data
- With data
- Desktop and tablet view
- Mobile view
- Desktop and tablet view
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Temenos Digital
- Origination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- height = “preferred”
- Insert the component in the Flex Container.
APIs

Sets data to the component
Parameters:
data - mandatory
The data parameter is of the Object type. This contains the following keys:
- resultsData (array) - mandatory
Results segment data - filtersSheet (Object) - mandatory
mobile filterSheet component instance. - doneCallback (function) - optional
- keyUpCallback (function) - optional
Example:
cdData: [ [{ "lblHeader": "CD Plans between $ 10,000 - 20,000", }, [{ "flxCDPlansCard": { "skin": "flxBorderShadowGrey", }, "flxInfoContent": { "isVisible": false, }, "flxTbx": { "isVisible": false, }, "imgCheckbox": "checkbox_inactive.png", "imgInfo": "info.png", "imgTooltip": "tooltip.png", "lblAPYKey": "APY", "lblAPYValue": "0.98%", "lblAmountError": { text: "Enter value between $ 10,000 - 20,000", }, "lblCurrency": "$", "lblDepositAmountKey": { "text": "Deposit Amount", "top": "20dp", }, "lblDepositAmountValue": { "isVisible": true, "text": "$ 10,000 - 20,000", }, "lblInterestKey": "Term", "lblInterestValue": "0.98%", "lblTermKey": "Term", "lblTermValue": "6 months", "rtxInfo": "APY(Annual Percentage Yield) is the amount of interest you earn on a bank account in one year", "tbxAmount": { "placeholder": "Enter Amount", }, }, { "flxCDPlansCard": { "skin": "flxBorderShadowGrey", }, "flxInfoContent": { "isVisible": false, }, "flxTbx": { "isVisible": false, }, "imgCheckbox": "checkbox_inactive.png", "imgInfo": "info.png", "imgTooltip": "tooltip.png", "lblAPYKey": "APY", "lblAPYValue": "0.98%", "lblAmountError": { text: "Enter value between $ 10,000 - 20,000", }, "lblCurrency": "$", "lblDepositAmountKey": { "text": "Deposit Amount", "top": "20dp", }, "lblDepositAmountValue": { "isVisible": true, "text": "$ 10,000 - 20,000", }, "lblInterestKey": "Term", "lblInterestValue": "0.98%", "lblTermKey": "Term", "lblTermValue": "6 months", "rtxInfo": "APY(Annual Percentage Yield) is the amount of interest you earn on a bank account in one year", "tbxAmount": { "placeholder": "Enter Amount", }, }, ], ], ], this.view.filterResults.setData({ resultsData: cdData, filtersSheet: this.view.filtersSheet });

Sets segment data to the component
Parameters:
data - mandatory
The data parameter is of the array type. Results segment data
Example:
cdData: [ [{ "lblHeader": "CD Plans between $ 10,000 - 20,000", }, [{ "flxCDPlansCard": { "skin": "flxBorderShadowGrey", }, "flxInfoContent": { "isVisible": false, }, "flxTbx": { "isVisible": false, }, "imgCheckbox": "checkbox_inactive.png", "imgInfo": "info.png", "imgTooltip": "tooltip.png", "lblAPYKey": "APY", "lblAPYValue": "0.98%", "lblAmountError": { text: "Enter value between $ 10,000 - 20,000", }, "lblCurrency": "$", "lblDepositAmountKey": { "text": "Deposit Amount", "top": "20dp", }, "lblDepositAmountValue": { "isVisible": true, "text": "$ 10,000 - 20,000", }, "lblInterestKey": "Term", "lblInterestValue": "0.98%", "lblTermKey": "Term", "lblTermValue": "6 months", "rtxInfo": "APY(Annual Percentage Yield) is the amount of interest you earn on a bank account in one year", "tbxAmount": { "placeholder": "Enter Amount", }, }, { "flxCDPlansCard": { "skin": "flxBorderShadowGrey", }, "flxInfoContent": { "isVisible": false, }, "flxTbx": { "isVisible": false, }, "imgCheckbox": "checkbox_inactive.png", "imgInfo": "info.png", "imgTooltip": "tooltip.png", "lblAPYKey": "APY", "lblAPYValue": "0.98%", "lblAmountError": { text: "Enter value between $ 10,000 - 20,000", }, "lblCurrency": "$", "lblDepositAmountKey": { "text": "Deposit Amount", "top": "20dp", }, "lblDepositAmountValue": { "isVisible": true, "text": "$ 10,000 - 20,000", }, "lblInterestKey": "Term", "lblInterestValue": "0.98%", "lblTermKey": "Term", "lblTermValue": "6 months", "rtxInfo": "APY(Annual Percentage Yield) is the amount of interest you earn on a bank account in one year", "tbxAmount": { "placeholder": "Enter Amount", }, }, ], ], ], this.view.filterResults.setSegData(cdData);

Returns data of the component
- resultsData
- selectedIndices
- filtersSheet
Example:
var data = this.view.filterResults.getData();

Returns selected indices of the segment.
Example:
var selectedIndices = this.view.filterResults.getSelectedIndices();

Displays error message in the row mentioned
Parameters:
- sectionIndex ( int) - mandatory
- rowIndex ( int) - mandatory
- errMsg ( int) - optional
Example:
"value entered is greater than committed value"; this.view.filterResults.showError(0,1,msg);

Hides error message at the mentioned row and section
Parameters:
- sectionIndex ( int) - mandatory
-
rowIndex ( int) - mandatory
Example:
this.view.filterResults.hideError(0,1);

Hides all the errors in the component
Example:
this.view.filterResults.hideAllError();
Callbacks
There are two callbacks:
- doneCallback
- keyUpCallback
These can be set through the setData API.
In this topic