Getting information about filters used on a Embeded Dashboard

Get Help
1

In my application I'm using the Embedded Dashboards with filters.
I'd like to give my user the ability to save the filters they made so they can access the information quicker the next time.
I know I can include the filter on the URL so the dashboard is loaded with the filter, by this documentation.

I'm just having trouble "intercepting" the filters set by the user since the dashboard is used within an iframe.
Is there any way to get the filters the user selected so I can save the information on my side and include the information the next time the user accesses the Dashboard?

A example so it's maybe simpler to understand:
I have a Dashboard with 2 filters: user_name and user_company. When the user accesses the dashboard, none of them are filtered.

Once the user filters the dashboard by user_name for "JohnDoe", I'd like to get this information on my application side(probably with Javascript) and save it.

The next time the user accesses the Dashboard I'd like to already embed the dashboard with the url with &user_name=JonhDoe.

2

Hi, you should decode the url which has a base64 encoded string with all the information of what’s being shown on the iframe

3

The decoded base64 show the params I create when processing the URL on the backend. What I'd like to do is to get the filters the user applied on the dashboard that is embedded with the iframe.
The iframe URL doesn't change, the iframe itself makes a new request with the new query params but the iframe URL remains the same.

4

Hi @basquens
Sounds like you're looking for this:
https://github.com/metabase/metabase/issues/7811 - upvote by clicking :+1: on the first post
You would need to use postMessage, which might work in recent versions for Signed Embedding.

5

This was very helpful!
My team was able to do it with this code:

window.addEventListener("message", (event) => {
  // replace {yourcompany} for the link of your company
  if (event.origin !== 'https://{yourcompany}.metabaseapp.com' )
    return;

  if (!event.data?.metabase)
      return;

  if (event.data.metabase.type !== 'location')
      return;
    
  console.log(event.data.metabase.location.search)
  
}, false);

Don't forget that this might not work on localhost, because of security reasons.

Going to leave it here so maybe it helps someone on the feature.
Thanks for the help Luiggi and flamber.