Looker Connect Training

Help Center

Documentation

Community

Cloud Certifications

Question

Loading drill-down data from an Iframe into a JS/React modal

  • 17 July 2019
  • 1 reply
  • 475 views
Gabriella_DiVentura

Has anyone seen, or know of any examples where you can visually drill down using a dashboard URL, but open a secondary dashboard in a modal using JS events? Any insight would be greatly appreciated. Currently I can drill down on a dashboard, but the way the UI tab panels are structured in our React application, there is no way to go back in the UI except with the browsers back arrow. I would like for a JS event to trigger when the user clicks on the URL that goes to the secondary URL, but rather than embed that secondary dashboard view in the DOM, have the secondary view injected into a native modal. I’ve already whitelisted domains (following Looker’s docs and read all the Looker embedded JS events stuff).

1 reply

izzy
Userlevel 7
Badge +1

I built something like this a long time ago, and it’s NOT pretty. Unless something has changed, I don’t believe there’s really any way for a Looker iframe to communicate the value of something you’ve clicked on back to the parent page. I worked around this by adding a link/html parameter to my field that had target=“parent” and set the hash of the page to the value of whatever I’d clicked on using {{ value }}.


So say you’re on Gabriella_Diventura.com, and you’ve got an embedded looker iframe. If you clicked on a field that said blahblah, the parent page URL would become Gabriella_Diventura.com#blahblah, which would not refresh the page or cause any visual changes, just change the URL silently.


It’s easy to catch that hashchange event using javascript, and then show the relevant value in a modal:


$(window).on('hashchange', function(e) {

    var lookerVal = location.hash;

    $('#drillModal').modal('show'); ///Shows the modal

    $("#modal-bod").text(lookerVal) ///Sets the modal body to show the value you've clicked in Looker

}

Happy to share more of my frankenstein example if you’d like, but hopefully that’s enough to kickstart your engine. Show us what you build! Always wanted to see someone take this idea and make it actually function.

Reply


Terms of Service