Filter Sheet
This component is used to take input from user to filter results.
Following are the various views of the Filter Sheet component:
- Desktop and tablet
- Mobile
Usage
For desktop and tablet
Here are the steps to set the component for the desktop and tablet view:
- Open the Temenos DigitalOrigination 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.
For mobile
Here are the steps to set the component for the mobile view:
- Open the Temenos DigitalOrigination project in Quantum Visualizer.
- Drag and drop a Flex Container widget in the dialogues Flex.
- Select the Flex Container and set the following properties:
- width: "100%"
- left: "100%"
- top: "100%"
- height: "100%"
- Insert the component in the Flex Container.
Skip this step if this component is being used with Filter Results component because the Filter results component already contains a button. Add a button which calls showFilters API. This button should only be visible in desktop break point.
APIs

Sets data to the component
Parameters:
data (String) - mandatory
This contains the following keys:
- form (Object) - mandatory
form scope - dialogs (Object) - mandatory
dialogues flex of the form - desktopComp (Object) - mandatory
desktop instance of filtersSheet component - mobileComp (Object) - mandatory
mobile instance of filtersSheet component - segData (Object) - mandatory
segment data for the checkbox segment in UI - rangeData (Object) - mandatory
data which has to be sent to setData API of rangeStepper component in filtersSheet component. look at Range Stepper component for more info about it. - selectedIndices : array - Optional
if any of the options are to be selected by default they should be passed through this
Example:
this.view.filtersSheet.setData({ "desktopComp": this.view.filtersSheetDW, "dialogs": this.view.flxDialogs, "form": this.view, "mobileComp": this.view.filtersSheet, "rangeData": sampleData.rangeStepper, "segData": sampleData.filtersData }); this.view.filtersSheetDW.setData({ "desktopComp": this.view.filtersSheetDW, "dialogs": this.view.flxDialogs, "form": this.view, "mobileComp": this.view.filtersSheet, "rangeData": sampleData.rangeStepper, "segData": sampleData.filtersData });

Returns the data of the filterSheet component.
- desktopComp
- dialogs
- form
- mobileComp
- rangeData
- segData
- selectedIndices
The getData API also does the validation in range stepper component while getting data and throws error.
Example:
var data = this.view.filterSheet.getData();

Returns selected indices of the checkbox segment.
Example:
var selIndices = this.view.filterSheet.getSelectedIndices();

Validates the range selected by user and returns boolean value.
Example:
var isRangeValid = this.view.rangeStepper.validateRange();

Clears the filters selected.
Example:
this.view.rangeStepper.clear();

Displays mobile filtersSheet component.
A button which calls this function should be added to the form and it should only be visible in mobile break point. This can be ignored if the component is being used along with the Filter Results component because it already contains the required button.
Example:
this.view.rangeStepper.showFilters();
In this topic