One of the biggest myths of Tableau Javascript API is that you cannot use it inside Tableau Server. Some says that you need to embed your workbooks into external sites to leverage Javascript API. Well, don’t believe them since Tableau JS API works flawlessly in Tableau Server Vizportal with any workbook without any with some minor hacks.
Do you need D3.js in your workbook that interacts with the other sheets in the workbook? No issues. Want to re-define some part of the portal like what should happen when users want to export or see underlying data? It’s easy. Add excel export directly to the exporting options? It’s an hour of work. But how?
The Magic
This workbook contains a regular view and a ChartJS scatterplot view. When you click on any bars the scatterplot updates to show its underlying data using JS getData().
Tableau JS in VizPortal – Without Embedding
The magic is that we use an HTML object in our workbook that links to an HTML page published as web data connector. Web Data Connectors hosted on the Tableau Server, thus, they have the same domain as the portal and can access contents in their parent windows. If you refer parent.parent.tableau.VizManager.getVizs()[0] then you get instantly an already initialised Tableau JS viz object. Sounds easy and actually it is.
How to try it out?
To test it locally you need administrator privileges on a Tableau Server. This is obviously required due to the security: this HTML page can read literally everything on your sessions if embedded. (Please also check if I include some nastiness, you know, audit, audit, audit). And now the steps:
- Download this HTML file and upload to your server
- Call
tabadmin import_webdataconnector <html_file> on your server. Note the URL of the file on the server.
12345PS C:\users\Administrator> & 'C:\Program Files\Tableau\Tableau Server\10.0\bin\tabadmin.exe' import_webdataconnector .\jsapi_without_embed.html===== Importing web data connector to server...-- The web data connector with the following URL was imported to the server:http://WIN-A5E9L0I0870:80/webdataconnectors/jsapi_without_embed.html - Download this workbook
- Change the URL of Published HTML file parameter to the URL returned in step 2.
- Publish the workbook
- Open it, enjoy.
Behind the scenes
The source code is written in CoffeeScript because writing plain JavaScript is a slow and error-prone process. All of the source codes can be find in this github repo: https://github.com/tfoldi/tableau-js-api-without-embed .
We use GULP as the build tool to compile the coffeescript code down to JavaScript.
Pre-requistes
|
1 2 3 4 5 |
# Install all dependencies npm install # Install the gulp command line tool sudo npm install gulp --global |
Running the development server
The development model is fairly simple:
Start your local development server:
gulp watch serve
This tells GULP to watch for any changes on our coffeescript files, and recompile them upon change; and also start a web server that serves these compiled javascript files.
Embed into tableau
That web data connector can point to 127.0.0.1:3000 which is your local development machine, so you can see any changes you make to the javascript source code.
Questions
Ask, if you have any.
- Tableau Extensions Addons Introduction: Synchronized Scrollbars - December 2, 2019
- Tableau External Services API: Adding Haskell Expressions as Calculations - November 20, 2019
- Scaling out Tableau Extracts – Building a distributed, multi-node MPP Hyper Cluster - August 11, 2019
