Driving external content from a Tableau embed on a webpage

By 20th December 2012Development
Driving external content from a Tableau embed on a webpage

We are currently building a global Tableau-based data visualisation website using Tableau Public Premium.  It’s a very enjoyable project and as you would expect of such a large project, is throwing its fair share of curve balls at us, technically.

One such curve ball was how to allow an iframe embedded Tableau dashboard drive the external webpage.   An example was a dashboard that had a world map, and clicking a country or state on the world map would then display some nice AJAX-based content based on the chosen country or state ON the webpage, OUTSIDE the iframe embed!

Well, I like a challenge.  And my attitude is always “yep, it can be done – we just haven’t worked out how yet” 🙂

So, if you’re faced with a similar technical challenge, here’s how to do it!

1. Create the map in Tableau desktop

  • In Tableau desktop, create a map and connect to whatever data you wish

2. Create the dashboard

  • Create a dashboard and add the map you’ve created in step 1
  • On the dashboard, add a WEB PAGE object – put it somewhere nice and small and out of the way.  Make the URL about:blank – that will set the base URL to a blank webpage

Tableau Desktop - edit url action

  • Add an URL action to the dashboard.  Set the Source sheet as your map.  Enter the URL – here’s where you are passing the country or state – in my instance I wanted to set the based url to http://site.com/myhandler/ and I clicked the right arrow after the URL and chose the STATE parameter – so my final URL was http://site.com/myhandler/?s=<State> – if you click “Test Link” you can see if the resulting URL will go to a valid page on your own website, passing in the desired map parameter.  You could also pass in other parameters at this stage – perhaps a Year/date page parameter or something else.  What my example has done is it’ll open the “myhandler” page on my website, passing in a parameter called s with a value of the chosen State … so a final URL could be http://site.com/myhandler/?s=California.  Sweet!

3. Embed the dashboard on your webpage as an iframe.

  • An example may be:
http://public.tableausoftware.com/views/MyView/MyDashboard?:embed=y

3. Create the handler on your website

OK, so here comes the trick part which is SO simple, you’ll kick yourself.  I’ve actually done this within a WordPress website, but although the page is PHP, it’s actually just got a bit of Javascript on it so could be from any server tech really.

In step 2 above, we’re opening a page called myhandler.  So now we need to create that page on our own website.

  • So, first create a page/text file called myhandler.php
  • The code in that myhandler.php is very simple indeed –
<script><br /><br />function gup( name ){<br /> name = name.replace(/[[]/,"\[").replace(/[]]/,"\]");<br /> var regexS = "[\?&]"+name+"=([^&#]*)";<br /> var regex = new RegExp( regexS );<br /> var results = regex.exec( window.location.href );<br /> if( results == null ) return "";<br /> else return results[1];<br /> }<br /><br />var my_state = gup('s');<br /> top.window.location.href = '/america/'+ my_state;<br /><br /></script>

So all that’s in the file is some Javascript!

The “gup” function is taken from here and it’s a nice bit of refined Javascript to get a url parameter.  I decided to use this for flexibility – if I have lots more handlers or want to pass multiple parameters to my handler webpage, I can do so, with no fear the URL parameter parsing function will screw up.

  • I then go and populate my_state with the “s” parameter being passed in – from step 2, that would be California.
  • And then the last line is the trick line – don’t forget this webpage is currently embedded INSIDE an iframe which is inside my webpage I’m trying to drive!  So I simply set the top-most container (the top webpage) URL to be “/america/” and the California state parameter.

So taking this approach and script you can then go where you want.  For instance, the last line, instead of being top.window. … etc could actually go and run some AJAX code which populates some DIV on the page with some CMS content.   Or if you were really crafty, you could ACTUALLY show a POPUP over the top of the iframe with some clever absolute positioning and z-index stuff that shows whatever you want OVER THE TOP of the Tableau embed.

I hope that’s of use to someone out there in TV land.  If you have any further ideas or have some questions, please please leave some comments and I’ll get back to you soonest.

  • Sumit

    Hi Mark, thanks for sharing this solution on passing parameters along url. Is there a way to invoke external .jar file or python code file the same way? I wish to pass parameters as well.

  • sumit kumar

    Thank Mark
    This is really very helpful.