Filter from url

[MaximeGuillemin]

Hello everyone,

I have a question regarding filter functionality in Superset. Is it possible to pass filter values directly in the URL? For example, something like https://dashboard.fr/?filter[color]="red" to set the color filter to red.

Thank you for your help!

[dosubot[bot]]

There are several discussions and issues related to passing filter values directly in the URL for Superset dashboards.

1. A similar discussion titled Pass filter parameters between dashboards is currently unsolved. It explores the possibility of passing filter parameters between dashboards ^[1].

2. Another related discussion is Choose Native Filter in URL, which is also unsolved and discusses selecting native filters via URL ^[2].

3. A closed issue, Can we pass url parameters for dashboards, suggests a solution flow: dashboard URL parameters -> map to chart parameters -> generate SQL lab query -> rendered by charts in the dashboard ^[3].

4. Another closed issue, URL filter parameters not working in Superset dashboard, might provide insights into challenges faced with URL parameters ^[4].

In the Superset codebase, functions like getUrlParam, getChartUrlParams, and getDashboardUrlParams facilitate the parsing and application of URL parameters to filters. These functions are part of the superset-frontend/src/utils/urlUtils.ts file ^[5].

These resources might help you understand how to implement URL-based filtering in Superset.

To continue talking to Dosu, mention @dosu.

[mike-atalan]

@MaximeGuillemin were you able to find any headway on passing in native filters through the URL? I have had some success with passing in simple values (below), but ranges and times I have not. update - got date filters working.

export function createValueFilter(filterId, columnName, filterValue) {
  const filterObject = {
    __cache: {
      label: `${filterValue}`,
      validateStatus: false, 
      value: [filterValue], 
    },
    extraFormData: {
      filters: [
        {
          col: columnName,
          op: "IN",
          val: [filterValue], 
        },
      ],
    },
    filterState: {
      label: `${filterValue}`,
      validateStatus: false, 
      value: [filterValue], 
    },
    id: filterId, 
    ownState: {}, 
  };

  const risonString = rison.encode(filterObject);
  return `${filterId}:${risonString}`;
} 

export function createDateFilter(filterId, columnName, startDate, endDate) {
  const filterObject = {
    __cache: {
      label: `${startDate} to ${endDate}`,
      validateStatus: false,
      value: `${startDate} : ${endDate}`,
    },
    extraFormData: {
      filters: [
        {
          col: columnName,
          op: "TEMPORAL_RANGE",
          val: `${startDate} : ${endDate}`,
        },
      ],
    },
    filterState: {
      label: `${startDate} to ${endDate}`,
      validateStatus: false,
      value: `${startDate} : ${endDate}`,
    },
    id: filterId,
    ownState: {},
  };

  const risonString = rison.encode(filterObject);
  return `${filterId}:${risonString}`;
}