Dashboard App Filter

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.

Options

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.

Options

{
  "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
      }
    ]
  }
}

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.

{
  "clientId": "id",
  "workspaceName": "workspacename",
  "params": {
    "dashboardAppFilters": [
      {
        "dashboardId": "dashboard-id",
        "values": {
          // single string
          "name": "Eric",
          "country": {
            "sql": "SELECT \\\"name\\\" FROM \\\"public\\\".\\\"countries\\\" WHERE isEnabled=true",
            "columnName": "name"
          },
          // date-picker
          "timePeriod": { "startDate": "2024-01-01", "endDate": "2024-3-23" },
          // range
          "price": { "min": 1000, "max": 5000 }
        },
        "isShowOnUrl": true // true/false
      }
    ]
  }
}

Key Benefits:

Dynamic Updates: The SQL query retrieves only the latest relevant options from your database.
- Example: SELECT "name" FROM "public"."countries" WHERE isEnabled=true fetches active country names.
Efficiency: Eliminates the need to manually manage large datasets in the configuration.
Flexibility: The columnName specifies the field in the query result to use as filter values.
Scalability: Handles thousands of options seamlessly, reducing payload size and improving performance.

This approach is ideal for keeping filters updated with minimal effort, ensuring they remain efficient and user-friendly.

Embedding Setup

MCP Server

Framework Integration

Component Options

Authentication & Security

Filtering & Personalization

Customization

Events & Interactions

End-User Features

AI Chat Mode

Self-Hosted Deployment

Solution Patterns

Testing & Debugging

Migration & Legacy

Additional Resources

Dashboard App Filter

Method 1: Passing from Component

Options

Method 2: Passing from Guest Token

Options

Method 3: Handling Large Selections with SQL Integration

Key Benefits:

​Method 1: Passing from Component

Options

​Method 2: Passing from Guest Token

Options

​Method 3: Handling Large Selections with SQL Integration

​Key Benefits:

Method 1: Passing from Component

Method 2: Passing from Guest Token

Method 3: Handling Large Selections with SQL Integration

Key Benefits: