Let's Make a Tableau Extension - P1

Let's Make a Tableau Extension - P1

You have an idea for an extension or think you might, but you aren’t sure how to get started. You might not even know what Tableau Extensions are. Don’t worry, I wasn’t sure either. That’s why I set out to create a simple example inspired by Let’s Make a Bar Chart.

By the time you are through this post, you’ll have successfully created your first (local) Extension. This is a BIG DEAL! Inspiration WILL strike again and when it does you won’t need to start all over. The hardest part (getting started) will already be behind you and Extensions won’t be nearly as mysterious.

While this post isn’t for seasoned developers I will assume you’ve run commands from your command line interface, possibly started your own local server and have some familiarity with HTML. Again, depth of knowledge in these areas isn’t required, but you there might be a couple bumps to get through if you’ve never been down this road before.

Step 1. Getting set up for success

We’ll first need to check and see if Node is on our computer. We’ll do this from the Command Line Interface (CLI). So, pop it open and type node -v If Node is installed you’ll see a version number printed on the next line.

Node Version

Don’t worry if your screen looks different than mine. The CLI on Macs is called Terminal and on PCs it’s called the Command Prompt. I’m using different Terminal for Mac called Hyper. If you’d like to go deeper into the CLI command here’s a course I enjoyed.

If Node is not recognized as a command you’ll want to download the latest stable version.

Node.js

Follow the prompts that come along with the download and try running node -v afterward to make sure you are good to go with Node.

Step 2. Create the files you’ll need

Create a new folder called my-extension. In that folder create a file called index.html and manifest.trex file. The index.html is going to be our web app. It’s all we need to prove our awesomeness. The manifest.trex is where we’ll put information about our extension (meta-data). It’s also what Tableau uses to register our Extension.

Your folder structure should look like.

Empty Folder

Hint: At this point, it would be nice to download a proper text editor such as VS Code if you don’t have one already.

Visual Studio Code

Before we move on, let’s add some HTML to our index.html (here’s the code), so we don’t have a blank screen when we run our Extension for the first time.

Step 3. Modify our manifest file

To learn more about Manifest files visit Tableau’s wonderful documentation.

We’re going barebones with a Manifest (here’s the code) by only using those tags that are required.

Required trex tags:

  • default-locale

  • name

  • description

  • author

  • min-api-version

  • source-locationicon

Feel free to edit the author tag attributes to your liking. After all, this is your extension. More involved Extensions will include more tags. Our aim here is to keep it simple.

Step 4. Configure your extension

Configuring our Node apps is done with a package.json (here’s the code). The package.json file is a handy place for us to add instructions Node will understand. Most of the lines below are for npm in the case you publish your package to their site.

package.json

Now, don’t go and punch in the commands I’m about to mention just yet. I want to set the stage.

When we start our app we’ll run the command npm start from our working directory.

That command will send Node to read through our package.json where it will find our start script "start": "node node_modules/http-server/bin/http-server -p 8765". In the script, you’ll notice http-server.

Next well execute npm install. Node will then read our package.json file and see the http-server dependency.

Node will visit the npm site where it will install our http-server and all of its dependencies.

http-server

This is great! A tiny command to get us all the goodies we need to create our apps stack.

If you have waited patiently, your directory still looks like…

Folder with package.json

… if you jumped ahead you might be in a mess.

Ready to run your app? Let’s first make sure we are in our my-extension folder. Again, if you need to brush up on your command line skills there are a lot of courses out there, but I especially like Wes Bos’s teaching style in this course.

Navigate with command line

Once in the proper directory, run npm install and then npm start.

npm build

This is going to install all the node modules we need, including http-server, and create another file called package-lock.json. You’ll now be able to see your web app running from http://localhost:8765/

Hello World! in Browser

Step 5. Add the extension to a dashboard

While your local web server is running, open Tableau 10.2.x or higher, navigate to a dashboard and drop in an extension object. We are going to choose “My Extension” and select the manifest.trex file you created.

Extension in Tableau

💥BOOM! Pat yourself on your back 👏

Optional - Adding your own style

Yes, this is beautiful, but it can be made even more beautifuler.

I did some hunting and found this fantastic YouTube video with slick styles I thought would be cool to show off. And with web Extensions, we now have the ability to incorporate all the slick style of the web into our dashboards.

To do this we need to update our index.html (here’s the code) and add a style.css (here’s the code) to our my-extension folder. To see your updates in Tableau, remove the current instance of your extension and pop in the new one.

Extension with Style

💥BOOM! More back pats 👏

What’s to come in P2?

You put all this work into creating a great extension. Now you need to share it with the world. We will do this by publishing our web app to a hosting service anyone with the Trex file can use in their Tableau dashboards.


#KnowledgeGaps | Clean D3 Code Written with Classes

#KnowledgeGaps | Clean D3 Code Written with Classes