Apply multiple filters in embedded dashboard

[Nimishbansal-16]

I want to add multiple filter clauses like this - filter1 & filter2 in the superset sdk api, how to do that for embedded superset dashboard?

I am trying like this, but its not workinf-
<Superset reportId="id"
filterClause={[
{
clause: 'site_id=28'
},
{
clause: 'price>10'
}
]}
/>

Superset version: 5.0.0

@dosu Can you help

[dosubot[bot]]

The filterClause prop isn’t supported for embedding dashboards in Superset 5.0.0. To apply multiple filters, you need to use the urlParams property inside dashboardUiConfig when calling the embedDashboard function from the Superset Embedded SDK. Specifically, you should use the preselect_filters URL parameter, which takes a JSON object mapping chart IDs to column/value arrays. Each field is ANDed together, and within a field, multiple values are treated as an IN clause.

Here’s a simplified example:

embedDashboard({
  id: "your-dashboard-id",
  supersetDomain: "https://your-superset-instance",
  mountPoint: document.getElementById("dashboard"),
  fetchGuestToken: async () => "your-guest-token",
  dashboardUiConfig: {
    urlParams: {
      preselect_filters: JSON.stringify({
        // Replace with your actual chart IDs and column names
        "123": { site_id: [28] },
        "456": { price: [/* values here, but only equality/IN supported */] }
      })
    }
  }
});

Note: Only equality and IN-style filters are supported this way; complex clauses like price > 10 aren’t natively supported via embedding—only direct value matches are possible. For more, see the Superset Embedded SDK README.

If you need to filter on ranges (like price > 10), you’ll need to configure a native filter in the dashboard itself and preselect its value using preselect_filters, but the embedding API doesn’t support arbitrary SQL expressions in filters.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[Nimishbansal-16]

@dosu Can you share code/documentation for this -
If you need to filter on ranges (like price > 10), you’ll need to configure a native filter in the dashboard itself and preselect its value using preselect_filters, but the embedding API doesn’t support arbitrary SQL expressions in filters.

[dosubot[bot]]

To filter on ranges (like price > 10) in an embedded Superset dashboard, you need to:

1. In your Superset dashboard, add a native filter of type "Range" (filter_range) for your numeric column (e.g., price).
2. Find the filter's unique ID (you can get this from the dashboard's JSON metadata or by inspecting the filter in the dashboard editor).
3. When embedding, use the embedDashboard function and pass preselect_filters as a JSON string in dashboardUiConfig.urlParams. For a range filter, the value should be a two-element array: [minValue, maxValue]. For example, [10, null] means "price >= 10".

Example:

embedDashboard({
  id: "your-dashboard-id",
  supersetDomain: "https://your-superset-instance",
  mountPoint: document.getElementById("dashboard"),
  fetchGuestToken: async () => "your-guest-token",
  dashboardUiConfig: {
    urlParams: {
      preselect_filters: JSON.stringify({
        // Replace with your actual filter ID
        "NATIVE_FILTER-abc123": [10, null] // price >= 10
      })
    }
  }
});

The key must match the filter's ID, and the value is [min, max]. Use null for open-ended ranges (e.g., [null, 100] for price <= 100). This approach is based on how the Range native filter plugin expects its value in Superset's frontend code. There isn't official documentation for this specific use case, but the implementation is consistent with the codebase and how other filters are preselected via preselect_filters. See the Superset Embedded SDK README and the RangeFilterPlugin code for more details.

Let me know if you need help finding the filter ID or have questions about configuring the native filter in the dashboard UI.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[mikysetiawan]

hi I already follow your instruction to apply urlParams but it's still not working @dosu

            id: DASHBOARD_ID, // given by the Superset embedding UI
            supersetDomain: SUPERSET_HOST,
            mountPoint: document.getElementById("superset-container"), 
            fetchGuestToken: () => GUEST_TOKEN,
            dashboardUiConfig: {
                hideTitle: true,
                hideTab: true,
                hideChartControls: true,
                filters: {
                    visible: true,
                    expanded: true,
                },
                urlParams: {
                    preselect_filters: JSON.stringify({
                        // Replace with your actual chart IDs and column names
                        "NATIVE_FILTER-a2-Jc9RxO": ["ACEH"], // For a multi-select filter
                        "NATIVE_FILTER-b6BM3PULf": [11]
                        // "456": { price: [/* values here, but only equality/IN supported */] }
                    })
                }
            },
            iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox'],
            referrerPolicy: "same-origin"
        });```