In the "Apply On" section, enable the App Filter option.
Step 2:
Passing Filter Values
Method 1: Passing from Component
Use the parameter "global-filter-options" to pass values directly from a component to the dashboard filter.
Configuration changes based on the Filter Type and the Data Type.
Single-Select Filter:
For string-based filters, pass just the value:
global-filter-options={
JSON.stringify({
"Filter name for a string datatype": {
defaultOption: 'James Smith'
},
"Filter name for a number datatype": {
defaultOption: {min: 100, max: 900}, // number range
},
"Filter name for a date datatype": {
defaultOption: {startDate: '2024-01-01', endDate: '2024-12-31'}, // date range
},
})
}
Multi-Select Filter:
For string-based filters, pass an array of values:
global-filter-options={
JSON.stringify({
"Filter name for a string datatype": {
options: [
{ value: 'James Smith', label: 'James' },
{ value: 'Olivia Johnson', label: 'Olivia' },
{ value: 'Emma Brown', label: 'Emma' },
], // in case you want the drop down.
defaultOption: ['James Smith', 'Emma Brown'], // selected values
},
"Filter name for a number datatype": {
defaultOption: {min: 100, max: 900}, // number range
},
"Filter name for a date datatype": {
defaultOption: {startDate: '2024-01-01', endDate: '2024-12-31'}, // date range
},
})
}
Refer the below "Options" document for further queries.
Method 2: Passing from Guest Token
You can link a guest token here to pass the filter values dynamically.
Refer the below document to generate a guest token.
{
"clientId": "id",
"workspaceName": "workspacename",
"params": {
"dashboardAppFilters": [
{
"dashboardId": "dashboard-id",
"values": {
// single string
"name": "Eric",
// multi select
"country": ["USA", "CANADA"] || "USA", // based on filter variant(select or multi select)
// date-picker
"timePeriod": { "startDate": "2024-01-01", "endDate": "2024-3-23" },
// range
"price": { "min": 1000, "max": 5000 }
}
"isShowOnUrl": true, // true/false
}
]
}
}
Make sure the options and values match the data type of the filter for successful integration.
Method 3: Handling Large Selections with SQL Integration
Filters with a large number of options (e.g., over 500), manually passing all values becomes inefficient. With SQL integration, you can dynamically fetch options from your database, simplifying the process.
The SQL query specified under the "sql" key dynamically fetches the latest values from the specified database table.