Build your first Tableau Dashboard Extension
In this blogpost I will walk you through building your first Tableau dashboard extension. It is aimed at those that have no prior experience with creating extensions. I’ll explain my setup for building them and then we will build a basic extension that allows you to auto refresh your dashboard on a timer. This could be useful for when you are publicly displaying a dashboard and it needs a regular data refresh. This process would then be automated.
With Tableau Dashboard Extensions you are building web applications that have two-way communication with your dashboard. These extensions are dashboard objects, similar to containers and images. You have to be on version 2018.2 of Tableau in order to use extensions.
As mentioned in the introduction we are going to build a simple extension, purely to demonstrate all the elements that you have to take care of when creating them. We’re not reinventing the wheel with the functionality of this extension, others such as, Tamas Foldi have done this in the past. My aim with this blog is to introduce you to my setup, making sure you understand the building blocks of an extension and to give you a kick start to developing your own extensions.
I’ve been using a Mac for the past 10 years and therefore this setup bit is focused on those that have a Mac. I’m certain Windows has equivalent tools. Actually building extension is platform agnostic of course.
In addition you will need to download Chromium – which is a browser built by the Google Chrome team. Chromium is used for easily (remote) debugging of your extension and it is the browser that’s in the actual extension window in your dashboard. Tableau recommends that you install version 47.0.2526.0 of Chromium.
You also need a place where you write your code. You can use any text editor you want but I would recommend using either VS Code, Atom or Sublime. What these tools offer over regular text editors is that you can install packages or extensions that make it easy to do code formatting and starting up a live development server. I use VS Code and have these extensions installed. I’d recommend that you also install these extensions in order to follow along with this blog post.
Step 1: Folder structure
The first step when you create an extension is to make an empty folder. The first file you’re going to add here is the .trex file. If you want to read more about what a trex file is then head over to my previous blogpost. You can download the supporting trex file for this post here.
Step 2: Display Extension in Tableau
Let’s now try and make our extension show up in a dashboard. First of all, make sure you’ve started a server on localhost. The easiest way to do that is, if you use VS Code, to use the Live Server extension that I mentioned earlier. You can right click the index.html file and start the live server. The location and the port is what you’ll need to add to your .trex file. In my case it looks as follows in the trex file:
If you’re following along then copy this into your index.html file and open up Tableau 2018.2. You then want to drag the Extension dashboard object somewhere in your dashboard, and navigate to the trex file. After you’ve consented to have this extension on your dashboard you will see ‘Hello Tableau’ in the extension window.
At this point you want to read how you can enable remote debugging. This is where Chromium comes in. Head over to the Tableau documentation, and follow these steps. Make sure you open an instance of Tableau through the terminal/command line because that enables you to do remote debugging. After you’ve established a connection between your dashboard and Chromium you should be able to see the name of your dashboard in the web console.
Step 3: Do more with your Extension
This is a great start! We’ve managed to initialise our extension and also figured out how to do remote debugging of an extension. Now it’s time to re-arrange our HTML file. We want to add an input box where we can add the number of seconds it should take to refresh the data source, a start and stop button. I also added a paragraph with some information of when the auto-refresh is running and when it stopped. The final HTML for this extension should look like this.
Step 4: Make improvements
I’ve now given you a starting point for building out Extensions. There is still a lot left to do in order to make this a production-ready extension. I’ve not added any styling to it and therefore it looks like it walked straight out of the 90’s. You could use CSS-libraries such as Bootstrap, Foundation or Skeleton to make it look pretty or code up your own CSS. The aim of this blog was not to create something beautiful, but rather to introduce you to building extensions and to have a setup ready so you can start developing your own. The next step would be deployment. This means that others can use your extension because at the moment you’re only running your extension locally. I will probably blog about that in the future.