Tableau Extensions are a way to extend the functionality of a dashboard to your own specific needs. Most people using extensions simply grab one of the many offered via the Tableau Exchange (free or paid).
In this post I would like to encourage you to think about another option: creating your own extension!
Sometimes you get stuck when creating a dashboard because you want something which isn’t available within Tableau. At such a moment building a custom extension, just for that single dashboard, can be the solution to really improve your dashboard. With just a couple lines in Javascdript code you can really enhance the dashboard you are working on, and that extension doesn’t need to be suitable for all dashboards – just for your current project.
What this post is about
This post is not a tutorial on how to create a Tableau Extension. You can find great tutorials all over the internet. Code is shown, but it’s an example, which I wrote for my own use-case.
The post is a call to action, to make you enthusiastic about creating your own Extension for your own, single dashboard.
What is a Tableau Extension?
Tableau Extensions allows you to add features to your dashboards, increasing your possibilities in Tableau and bringing more value to your workflow.
Technically spoken: They are small web pages inside a Tableau dashboard which can interact two-way with the dashboard.
Dashboard extensions enable all sorts of scenarios, like letting you integrate Tableau with custom applications, making possible for you to modify the data for a , or even creating custom visualizations inside the dashboard. A dashboard extension is just one type of extension that can be built using the Tableau Extensions API.
3rd Party extensions, free and paid
You can easily drag and drop extensions to your dashboard from the “Objects” section. Once added, you have an overview of the Extension Gallery. It shows you all available solutions with their respective features.
Nice free extensions are “Export All” – which allows you to customize the Excel export, and “Single Checkbox Parameters”, which shows a nicer true/false interface than the default Tableau interface.
Besides free extensions you can also buy extensive ones, for example to create Sankey Charts, write data straight from your dashboard, or communicate with external applications like Microsoft Teams.
Your own extension
But why would you create your own extension?
Sometimes – maybe even more often than you would want – you do miss functionality which ‘should be’ available in Tableau, but isn’t. Often just a nuisance, but still you would like this to be fixed.
This might me a different kind of visualization, a dynamic image, interaction with other processes, …
The great part is: it is really not difficult to create your own extension. Or in better words: it is not difficult to improve your dashboard using extensions!
Tableau has made all tooling available so you can creating your own, custom extension.
My problem: update a parameter when another one changes
Just a couple of weeks ago I created a dashboard which was using two parameters: one to select a country, and one to select a Category and one to select SubCategories
(actually it was Country and Region, but bcause of the sensitive nature of the original dashboard, I ‘translated’ it to for the purpose of this blogpost to the Superstore dataset).
Both category and subcategory needed to be parameters, because of other functionality within the dashboard. It really worked well, the dashboard had a good user-flow, but while testing I noticed a very annoying side-effect. Whenever a subcategory was selected (e.g. “Tables” within the “Furniture” category), changing the main-category will lead to an empty map.
Very ugly – and not user-friendly. I might be able to create a ‘select a sub-category on the left to show map’ alert on the dashboard.
But it would be so much nicer if the dashboard would solve this problem for me by automatically assigning the ‘sub-category’ parameter to ALL whenever the user changes the main-category parameter.
What is happening
What I want:
Defining the outcome: what do I want?The first step in solving a problem is to define exactly what you are trying to accomplish. In my use-case, it is pretty simple:Whenever I change the ‘category’ parameter’ I want the ‘subcategory’ parameter to be set to the value ‘All’
Needed Knowledge and tools
Creating an Extension is dependent of requisites which needs to be taken care of:
- Some knowledge about Tableau Extensions; you need to know what you are doing. Creating a black-box is not a good thing.
- You have to know – or willing to learn – JavaScript. Or know someone who will do this for you.
- To make the extension work within Tableau Server you need to be able to upload the extension (a couple of small files) to a web server
- A Tableau Server admin needs to whitelist your extension, so it can be used within a published dashboards
But these points are usually not hard. Convincing admin of your Tableau Server to add your extension to the whitelist might be the hardest part…
The technical solution
When you need to create a Tableau Extension you need to get started, and also include a nice tutorial on a sample extension: https://tableau.github.io/extensions-api/docs/trex_examples.html
The quick overview when developing an extension is:
- Start a local web server (usually via Node.js)
- Create TREX manifest file which contains information on where Tableau can find the necessary files
- Create HTML and JavaScript files which deliver the needed functionality
- Add the TREX file to the dashboard
- Enjoy.
I will not give a step-by-step instruction on how I create the extension, the aforementioned GitHub page does a good job a that.
But in short:
– a .trex file which points to to webserver where the html file is placed
This file is relatively short – I have written many Tableau calculation with more lines.
If you have read the tutorial, you will recognize three parts:
1. Initialization of the extension (tableau.extensions.initializeAsync)
2. Keep track of parameter changes (.dashboard.getParametersAsync().then(function (parameters) { parameters.forEach(function (p) {), …)
3. If a parameter changes, check if it is the ‘category’ parameter, and if so: change the ‘sub-category’ parameter’. (setParameter(‘MissionParam’, ‘ALL’);)
As you can see, the total number of lines code isn’t that much. With my very limited JavaScript knowledge I was able to create this extension in just a couple of hours, and at the end it did exactly what I wanted: resetting a parameter when a different parameter changes. With this extensions the user-flow increased significantly, and my time spent was very well spent.
What’s next?
That’s the nice thing of this approach – if it has solved your problem, you are done. Remember: you created this extension to solve that problem, for the project you are working on right now. Many extensions in the Exchange are written so you need to find a problem to the solution they have created. This method uses the opposite direction: you have a problem, and create the solution yourself.
What should you do?
- Enjoy your code. You did a great job!
- Move on to your next workbook/dashboard/project, and use the knowledge you gained on Tableau Extensions (and JavaScript) to make more improvements.
What can you do?
- Optimize the code. Maybe the performance can be improved (“do I really need to loop trough all parameters?”)
- Make it usable for multiple dashboards. If you can use your solution on multiple dashboards you can include a configuration screen, so the extension will work with differently named parameters. The Tableau Extension SDK offers nice options for that, but ask yourself if it’s really necessary to spent a significant amount of time adapting the extension, while it’s just used on a single dashboard. And if you need similar functionality on a different dashboard, just duplicating the existing extensions and adapting it might be much more efficient.
Don’t be afraid to start!
Whenever you are working on a dashboard and encounter a problem which ‘cannot be solved by Tableau’ – ask yourself: can this be solved by a Tableau Extension? If you have in-house web-developers you can always ask them; but it’s more fun to do (or at least start) yourself.
Google your JavaScript code together, and make it possible!
On several occasions I – as non-JavaScript coder – have improved my dashboards by creating a small, self-written extension. I added dynamic images to dashboards, formatted text to look like a paper, and avoided empty spaces on the dashboard like described in this post. The users of the dashboard don’t know – but without the extensions, the dashboards would be less efficient, actionable or fun to look at.
(earlier posted on the Tableau Community blog: https://community.tableau.com/s/news/a0A8b00002GG8qWEAT/write-your-own-tableau-extension-for-your-current-dashboard)
