When embedding a Luzmo dashboard in your application, your application might have additional filter capabilities (such as custom filter components) which should apply to an embedded dashboard. This article outlines how you can easily achieve this by utilizing parameterized filters.

These are the three steps to set up an externally filtered dashboard:

  1. Configure parameterized filters in dashboards
  2. Dynamically override the parameter values when requesting an authorization token
  3. Apply new filter selections on embedded dashboards

1. Setting up parameterized filters in dashboards

In your Luzmo dashboards, the first step is to set up parameterized filters. These filters will allow the dashboards to be dynamically filtered based on the external filter values provided by your parent application. It's important to make sure you set up the correct filter expression for your drillthrough setup; in case of doubt, you can always use the is in filter expression as that will allow you to filter to zero, one, or multiple values.

2. Overriding parameter values when embedding

When you embed a dashboard in your app, you can override the parameter values in the Embed authorization request in your backend (see Developer documentation for the full request). This allows you to dynamically apply filters based on the initial selection within your app. On initial dashboard load, you can then pass along the authorization key-token pair via the authKey and authToken properties in the frontend component.

"parameter_overrides": {
  "<parameter_name>": ["value_1_selected_in_external_filter"]
}

3. Applying new filter selections on embedded dashboards

When an external filter selection changes after the dashboard has already been embedded, you should request a new Embed authorization token from your backend with the updated parameter overrides. When receiving the authorization key-token pair, you should use the setAuthorization and refreshData methods from Luzmo's frontend component API to update the embedded dashboard. This approach allows the dashboard to update smoothly, reflecting the new filter values without a full reload.
That's it! With these steps your embedded Luzmo dashboard should always reflect any filter selection(s) that occurred in your application's custom component(s) 🎉

Need more information?

Do you still have questions? Let us know how we can help.
Send us feedback!