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

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

ℹ️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.