New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

embedded dashboards: send message to parent HTML doc when params change #7817

Open
wants to merge 1 commit into
base: master
from

Conversation

Projects
None yet
3 participants
@snarfed
Copy link

snarfed commented Jun 6, 2018

embedded dashboards: send message to parent HTML doc when params change

for #7811. this lets HTML pages that embed Metabase dashboards detect and handle when the user changes parameter values.

as an example, with this PR, you can add this JS to the outer HTML page to propagate parameter values in and out of the dashboard iframe, so you can share URLs to specific queries:

<script type="text/javascript">
function receiveMessage(event) {
  if (event.origin == "http://localhost:3000" &&
      event.data.source == "Metabase" &&
      event.data.name == "dashboard-parameters") {
    window.location.hash = event.data.value.slice(1);  // strip leading ? char
  }
}
window.addEventListener("message", receiveMessage, false);

if (window.location.hash) {
  document.getElementById("metabase").src += "?" +
      window.location.hash.slice(1);  // strip leading # char
}
</script>
  • No backend changes afaict. (If there are changes to the backend codebase, run the backend tests with lein test && lein eastwood && lein bikeshed && lein docstring-checker && ./bin/reflection-linter)
  • Run the frontend and integration tests with yarn lint && yarn flow && yarn test)
  • Sign the Contributor License Agreement
    (unless it's a tiny documentation change).
@snarfed

This comment has been minimized.

Copy link
Author

snarfed commented Jun 19, 2018

to elaborate a bit, the example JS above propagates the filters in the URL query string into the top-level URL's fragment, eg #foo=1&bar=z. i then followed https://www.simoahava.com/gtm-tips/track-url-fragments-as-pageviews/ to get those fragments into Google Analytics, which gets us nice tracking and reporting of the exact queries people are doing in the embedded dashboard. woot!

@MarcGJA

This comment has been minimized.

Copy link

MarcGJA commented Jul 12, 2018

If I understand this proposal correctly, were Metabase to adopt this approach with embeds into one's own apps there would be something to latch onto to detect filter selections and pass them up to the parent page or send some from the parent page back to the iframe.

Definitely! This would be a welcome feature for app embeds! To track yes, and to allow app end users to save off their own default filter selections to a table within the app itself for a Metabase iframe embed to pick up on demand! Especially with highly dimensional data such an ability would be a big plus! That way rather than refreshing a page or iframe to a blank slate of filter selections or resource specific defaults each app end user could save off their own defaults or favorite selections! Brilliant!

Having read @salsakran's response to #6604 -- "We're definitely not going to default an iframe rendered dashboard to the last state of its filters as that does not make sense for the usual in-application embedding case." -- it was looking rather glum for such a feature ever to come about.

But with this approach there's hope! And the sooner the better! Speaking for myself I could put this to use today were it available!

@kdoh kdoh added the CLA/Signed label Jan 10, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment