Tableau JavaScript API without Embedding -Databoss

FOR BI PROS FOR EVERYONE Tableau

Tableau JavaScript API without Embedding

August 29, 2016

api, coffeescript, howto, javascript, javascript api, tableau, tableau api, tableau server, tableau web data connector

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.

PS C:\users\Administrator> & 'C:\Program Files\Tableau\Tableau Server\10.0\bin\tabadmin.exe' import_webdataconnector .\j
sapi_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

PS C:\users\Administrator> & 'C:\Program Files\Tableau\Tableau Server\10.0\bin\tabadmin.exe' import_webdataconnector .\j

sapi_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

# Install all dependencies
npm install

# Install the gulp command line tool
sudo npm install gulp --global

# 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.

About
Latest Posts

Tamás Földi

Director of IT Development at Starschema

Decades of experience with data processing and state of the art programming. From nuclear bomb explosion simulation to distributed file systems. ethical hacking, real time stream processing practically I always had a great fun with those geeky ones and zeros.

Latest posts by Tamás Földi (see all)

Python Experiments in Tableau 1. – Add live currency conversion to Tableau Dashboards using TabPy - January 9, 2018
HOWTO: Tableau Server Linux in Docker Container - November 2, 2017
Tableau Filestore Consistency Checker – How Repository Maps to Filestore - August 17, 2017

roshan

it didnt work. 🙁
- Tamas Foldi
  
  it should, could you post your error messages from the Chrome development tool’s console?
  - roshan
    
    My Bad! It works when i use the server with the ‘servername’.
    It is not working when its ‘Localhost’. I was trying whole the time till I posted the comment with Localhost.
  - roshan
    
    Great work! Thank you very much.
Shyju

Does the same steps apply for 9.3 also ?
- Tamas Foldi
  
  I just replied to your corporate email address 10 mins ago..:) It definitely works, but instead of getdata we need to call a vizql web command if we need the underlying data as well
Andrée Roos

This is great work Tamás and will open up lots of possiblities when it comes to dashboard creation.
Andrée Roos

I tried the example above, but couldn’t get it to work. I got the error message:

Error: Permission denied to access property “tableau”

Any ideas on what might be causing this?
- Tamas Foldi
  
  it seems that the frame inside your dashboard does not have the same hostname as your tableau server. can you double check? like the host names must be equal
JG

https://uploads.disquscdn.com/images/cd2fb0a6f779660eb671c22c6526e0610e3865faf2d720105fd3ce82812bfaa9.png Hi Tamas – I imported the html file as a web data connector and published the workbook to my local server. It shows the text from the WDC so it looks like it imported correctly (“Please select a row from the left…”) but I am not seeing any JS chart show up when I make selections. Any ideas? Thanks!
- Tamas Foldi
  
  did you change the URL parameter in the workbook to the same host as your gateway host? if yes, then check chrome’s error console for potential JS errors and share them here
  - JG
    
    Yes I changed the parameter in the workbook. Looks like there are some cross-origin errors which are blocking access to your scripts https://uploads.disquscdn.com/images/92591ff4b1767f54641e435bf416c0f9ccb054bb258e82ee3edf74431821d97d.png . Maybe I need to change another tabadmin setting?
    - Tamas Foldi
      
      Look strange as the web data connector’s origin is the same as frame origin. Are you available for a 5 mins screen share?
      
      Just to be sure: your tableau server host name is http://jebghardt-lap3/ – is that what you see in your browser’s address bar?
      - Psuanm5030
        
        I get the same error – had you found out the issue and care to share? Here is what I am showing: https://uploads.disquscdn.com/images/c87f8857fb580d0692263512192a7c324b25d3f1d67917bfc58487f3b4cef71b.png
      - Tamas Foldi
        
        it seems you are using different host names in the url bar and in the html frame location in the dashboard. one is a short host name while the other is a full qualify host name
      - Psuanm5030
        
        Wow, thats silly. I swear I looked at that. I guess I just blindly took the value that tabadmin returned. thanks tamas!!
Venkatesh

Hi Tamas, great article. I am just about to start trying this. I have written few JavaScripts using Tableau API now in an Embedded model but I want to do that on the workbooks / views directly.
Do you reckon that could be done? That is, without calling HTMLs. Or second option, if I create an HTML which mostly holds javascript and some PHP code, I was wondering if that could be used as web connector.
Regards, Venkatesh
Gaurav Jindal

Hi Tamas
Amazing stuff !!! The sample worked perfectly fine on my server setup. I was watching your another video on youtube where you showed REST API for Tableau Desktop (without using Tableau Server). I am really looking foward to that as in our use-case we want to share Tableau workbooks with end-users without publishing them to server. Could you please provide more details on that approach?
Regards/Gaurav
Jackeline Russell

The Information which you provided is very much useful for JavaScript Learners. Thank You for Sharing Valuable Information.
Bryant

Hi Tamas,
We tried this recently and found that you might need to put a bit of a delay in on recent Tableau Server versions. I wrote up the interval code for the test on the page where I cross-link this article originally —

https://tableauandbehold.com/2016/09/06/using-the-javascript-api-without-embedding/
rkp

it does not work for me, I need help, I downloaded the html file and that is not the same name you use here.
Siva Prasad Padhy

Really this is good post. Initially I faced a trouble after downloading the html, and later on it worked for me.
Thanks
Siva prasad
(tekslate.com)
- mufeed M
  
  Hi Siva.
  How did you it?
  i got this problem https://uploads.disquscdn.com/images/134b179ce2429d19036c77f0d1e58dfa62325a280c0df4fb52ff00ede2ad7737.png
  
  i did not receive a link when i use tsm command
  regards.
mufeed M

Hi Tamas,
when I tried to use your demo, I got this
https://uploads.disquscdn.com/images/1b4a5022ddbf13bfb2b5315661aba7f553a7f9c1a5205f776fa1c648f7dcb402.png

could you help me?
- Tamas Foldi
  
  The new version on github fixes this issue

The Magic

How to try it out?