What is a Cascading Filter Group?
A cascading filter group is a group of related filters from the same data source. Conceptually they are all related in some way and the end users wants each filter to limit the available options for each filter below.
In the example below, we have a cascading filter group with three columns: Region, State, and City.
Users can select a Region from the filter dropdown. When they subsequently select a State, only states from the selected Region(s) are available as options. The same behavior occurs when selecting a State and City. Selecting a lower level filter (e.g. City) will not affect the higher filter (e.g. Region).
Clicking Apply applies all the selected filters to the page.
Add a Cascading Filter Group Block
Add a new or existing block to the page and select Cascading Filter Group.
Learn more about adding blocks.
Configuring a Cascading Filter Group Block
The cascading filter group block is configured using a JSON config.
{
"jsonData": {
"dataSourceId": "494f0f39-1361-4404-b329-efe6834ac6af",
"autoSelectFirstValue": false,
"filters": [
{
"column": "Region",
"order": 0,
"type": "singleselect",
"help": "Choose a Region",
"label": "Region"
},
{
"column": "State",
"order": 1,
"type": "multiselect"
},
{
"column": "City",
"order": 2,
"type": "multiselect",
"help": "Choose one or more Cities",
"label": "City"
}
]
}
}dataSourceId
This is the UUID of the data source that will be used. All of the filters in this block type must exist as columns in the same data source.
autoSelectFirstValue
Optional. Set to true and the cascading filter block will select the first value in each filter as a default.
filters
This is a list of JSON objects that define each filter.
- column - The name of the column from the data source to be used a filter.
- order - The order of the cascading filters. The filters cascade, so they must be ordered appropriately. Columns with a lower order values will cascade to columns with higher order values.
- type - The type of the filter: singleselect or multiselect.
- help - Optional help text that is displayed below the filter.
- label - Optional label of the filter to show the end user.