Tableau Dashboard Extensions

Tableau dashboard extensions are web applications that have two-way communication with the dashboard.

Dashboard extensions enable the integration of Tableau with custom applications, making it possible to modify the data for a viz, or even creating custom visualizations inside the dashboard. It’s a type of extension that can be built using the Tableau Extensions API.

Components needed for Tableau extension are manifest file (.trex), a web page that uses a Tableau-provided JavaScript library and the JavaScript file (or files) that contain extension logic. The Tableau extensions are supported on Tableau Desktop, Tableau Server, and Tableau Online.

1. It enables customers to integrate and interact with data from other applications directly in Tableau
2. Usage of third-party charting libraries like d3.js to add custom visualizations
3. Write-back functionality which helps to modify data in a viz and have that change automatically update the source data in the database or web application
4. Build custom viz and interactivity types, such as a filter replacement with a custom interface and network diagram

Steps to follow as prerequisites before creating the extension in your Tableau desktop:

1. https://nodejs.org/en/download/  installed in the system to run the dashboard extension demos. Node.js is a JavaScript runtime. npm is a package manager for Node.js and is installed when you install Node.js.
2. Requirements for using dashboard extensions in Tableau:
   1. Tableau Desktop 2018.2 and later
   2. Tableau Server 2018.2 and later
   3. Tableau Online
3. Download the Tableau Extensions API SDK (.zip file) and extract the files to your computer link
4. Start a web server to host the sample dashboard extension:
   1. Navigate to the “extensions-api” directory
   2. To install the web server components, run the following npm commands in CLI to install the package:
      npm install
      npm run build
   3. To start the web server, run the following npm command:

npm start

Note:The start command runs a script to start the web server over port 8765 and to troubleshoot the javascript install chromium browser and hit it will the local host:http://localhost:8765.

Start Tableau and add an extension to the dashboard

1. Start Tableau, open a workbook and create a new dashboard
2. In the dashboard, under Objects, select Extension and drag it on to the dashboard
   
3. In “Choose an Extension” dialog box, click “My Extensions”. Every Tableau extension has a manifest file (.trex) that describes the extension and identifies the location of the web application.
   
4. Open the DataSources.trex file. The sample extension (web application) appears in the dashboard frame. The DataSources sample finds and displays the data source for each worksheet in the dashboard.

The extension has been created using HTML for frontend and JavaScript for backend development. That said for logic and architecture, the functionalities have been covered in different methods here. Firstly in HTML we will check the worksheet to grab field values and use it in extension.

When we get the value from Dashboard table or worksheet then we hit the Prediction Builder API and it does the entire prediction calculation for us. However, before we start the Prediction Builder, we’ll need to create a story in Einstein Discovery which helps us to calculate the prediction value from it.

To showcase the new prediction value, we need a User Interface where we can edit the values and submit it by clicking the “Submit” button and then hitting the Prediction Builder API to get the new calculated value to display on extension.

It’s crucial to note that the trex file holds the path for the local server and for Tableau online. Hence, the trex file primarily keeps the path of the html and Javascript code from the local system and runs it while NPM starts.

 

It’s worth an experience working with these two powerful BI tools. With the new Tableau extension, it is definitely going to raise the bar for BI. In this example, we’ve used the code(HTML+JavaScript) to create an extension on Tableau which can run on both; The Local Server and Tableau Online.

This Extension carries the value from the worksheet on a click and allows the user to update those values through the extension. It then hits the Prediction Builder API of Salesforce and calculates the new value. As we move along the extension usage, this will set a benchmark for the Prediction, AI, and Analytics platforms. Keep watching this space for more.