Dashboard App Filter

Dashboard App Filter: Instruction Manual

Using the App Filter in Dashboard

Step 1:

Create a Dashboard Filter

• In your dashboard, create a new filter.

• In the "Apply On" section, enable the App Filter option.

Step 2:

Passing Filter Values

Method 1: 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.

ℹ️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
      }
    ]
  }
}

Method 2: 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.

1. 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
         },
       })
     }
     

2. 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

Make sure the options and values match the data type of the filter for successful integration.