[FIXED] How to add new filters to an embedded Looker dashboard

Issue

I’m using JavaScript events on an embedded Looker report and attempting to update the filters on it. It seems reasonable that the dashboard:filters:update method would allow me to update a dashboard with new filters but the documentation explicitly mentions that this cannot be done, though it doesn’t not mention how I actually can add new filters to a dashboard.

Do I need to run the dashboard:load event with additional_filters passed as part of the payload object? Or how can I add filters to a dashboard that doesn’t already have any filters applied? Are there any examples of this?

My current code (triggered on button click) looks like this but the filters are not applied:

    const handleButtonClick = () => {
        const lookerIframe = document?.querySelector('iframe')?.contentWindow;
        const eventPayload = {
            type: "dashboard:load",
            id: "looker_dashboard_id",
            dashboard_filters: {
                "Company Name": "XYZ Corp"
            },
        };
        lookerIframe.postMessage(
            JSON.stringify(eventPayload),
            lookerDashboardUrl,
        );
    }

Is there a different event I should be triggering or a different property I can pass?

Solution

In this situation, the key here is the definition of "add"ing a filter. For my purposes, the Company filter already existed on the dashboard it just hadn't been applied in the UI with any value. Even though it had no value, this didn't mean I had to "add" it, running this event was still valid because it was simply an update.

The documentation means that if you need to add an entirely new filter to the dashboard then you'll need to do this through the Looker dashboard configuration.

Answered By - Brady Dowling

Answer Checked By - Gilberto Lyons (PHPFixing Admin)