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 Infinity 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
setData
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
});
setSegData
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);
getData
Returns data of the component
- resultsData
- selectedIndices
- filtersSheet
Example:
var data = this.view.filterResults.getData();
getSelectedIndices
Returns selected indices of the segment.
Example:
var selectedIndices = this.view.filterResults.getSelectedIndices();
showError
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);
hideError
Hides error message at the mentioned row and section
Parameters:
- sectionIndex ( int) - mandatory
-
rowIndex ( int) - mandatory
Example:
this.view.filterResults.hideError(0,1);
hideAllError
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