tableau/js-api-samples

Sample code for the Tableau JavaScript API

js-api-samples

Deprecated

Do not use this project. To get started with Tableau embedding, see https://github.com/tableau/embedding-playbook For sample code that demonstrates the v3 embedding API, see https://github.com/tableau/embedding-api-v3-samples For a guide to migrating your code to the v3 embedding API, see https://github.com/tableau/embedding-api-v3-guide

---

This repository contains samples for the Tableau JavaScript API. You will also find companion content here for the JS API video series. Official developer docs for the JS API can be found here.

Getting Started

• Clone this repository
• Try the samples
• Use 'Issues' to note any bugs or to request new samples
• Let us know if you have samples of your own you'd like to share
• Check out the Tableau Developer Portal at http://developers.tableau.com for a tutorial, the official docs, and the community forum

JS API Samples

These are created and maintained by Tableau.

Demo	Source Code	Description
Basic Embed	basicEmbed.html	Embed a visualization in a div element.
Dynamic Load	dynamicLoad.html	Dynamically load and remove visualizations. Click the Previous and Next buttons to display other visualizations in a predefined list.
Export to PDF	exportToPDF.html	Export the current visualization view to a PDF file.
Filter	filter.html	Apply a filter to a visualization using controls on the page.
Get Data	getDataBasic.html	Get the underlying data for the currently displayed viz.
Resize	resize.html	Resize a visualization to a size that you specify.
Respond to Events	respondToEvents.html	Display information about marks as you select them.
Select Marks	selectMarks.html	Select a set of marks in a visualization.

Videos

The videos are hosted on YouTube:

Title	Length	Learning Objectives
JS API: Introduction	13:39	Why to use JS API, how it works, get started using it, helpful resources Detailed Outline: Learning objectives (00:50) Why use the JS API? (01:36) What do you need? (06:53) How it works (07:28) HTML & JS code (09:17) More resources (12:00)
JS API: Tutorial Walk-Through	27:09	Embedding a viz, using Filters and Tabs, Selecting values, export to PDF and CSV, custom JavaScript for events Detailed Outline: Learning objectives (01:22) Starting the tutorial (02:20) Embedding the viz (04:09) Filtering (06:35) Switching tabs (08:08) Selecting values (09:21) Chaining calls (11:12) Working with sheets (15:26) Using the toolbar (19:08) Eventing (20:39) More resources (25:35)
JS API: Embedding and Interactions	22:58	More with embedding, switching tabs, filtering and selecting marks Detailed Outline: Learning objectives (00:58) Prerequisites (01:24) Companion content set-up (02:15) Project overview & coding environment (03:14) Adding the JS API library (05:54) Adding <div> for the viz (06:56) Custom JS functions (07:40) Load the viz (09:00) Switching the view (13:18) Applying a filter (15:28) Selecting marks (19:05) More resources (21:10)
JS API: Tips and Tricks	28:30	Common 'gotchas', how to use asynchronous functions, creating event listeners Detailed Outline: Learning objectives (01:05) Prerequisites (01:53) Getting started & set-up (02:41) Preview: final application (03:50) Understanding API versions (05:23) Tip: Publish sheets as tabs (06:57) Tip: Dashboards and javascript sheet.applyFilterAsync error (7:50) Tip: using async correctly (13:17) Event listeners (19:01) Doing work as a viz loads (23:36) More resources (26:21)

js-api-samples's Issues

document.write blocked by Chrome

Simply trying to look at the Basic Embed sample but running into these errors in Chrome resulting in a blank, white screen. (see screenshot)

Also: I uploaded it to my web server and accessed via Firefox and Safari — also got a blank white screen.

Last update looks like it was from 4 years ago... Is the JS API still supported?

v3

All these examples appear to be for the v2 api. In light of the v3 api it would be great to get examples that utilized up-to-date best practices

Object doesn't support property or method 'getUnderlyingDataAsync'

Object doesn't support property or method 'getUnderlyingDataAsync'

this function is not available in the api. any solution for this?

Client-Side Caching of Dashboards (Visualizations)

Has anyone seen examples of caching Tableau visualizations on the client-side?

I have a collection of visualizations throughout my web application, and I would like to avoid reloading them as users navigate between views/pages.

From my understanding, the visualizations are Javascript objects of type Viz(), and they are managed by a parent object of type VizManager(); VizManager having a collection of Vizs as an attribute (Viz[]).

Would it be reasonable to persist the VizManager and its collection of Vizs in localStorage or indexedDB, to be loaded from memory on subsequent reloads?

Viz stopped working after Server update

After updating Tableau Server to 2020.3 my views don't connect throught JS api. This bug only occours on Chrome.

I'm using Chorme version 87.0.4280.66 and trusted authentication.
Works normally at other browsers.

applyFilterAsync regular expression

Hi team,
I am using tableau js api, applyFilterAsync where i am trying to match the regular expression of values, i am using wild cards like * and % before and after but api does not work please help , if this behavior is supported by the tableau js API.

JS API change Pages Value

Are there JS commands to affect values in the Pages Shelf?

Additional Information:
My team is currently building a JavaScript workaround for the Pages shelf in Tableau Server. We have created a png "movie" for the user to see different time periods. When the "movie" is stopped we are looking to pass a value to the Pages shelf however it seems to only filter.

Extension API crashes while extracting worksheet data

I am facing an issue related to tableau extension api. The api fails while extracting the worksheet data by using the methods getSummaryColumnsInfoAsync or getSummaryDataAsync.

Code:
await worksheet.getSummaryColumnsInfoAsync().then(async colNames => {
para1ColId = colNames.find(col => col.fieldName.toLowerCase() === 'para1').fieldId;
para2ColId = colNames.find(col => col.fieldName.toLowerCase() === 'para2').fieldId;
});

Error; Cannot read property 'fieldId' of undefined

In the debugging mode: Chromium shows an error: Debugging connection was closed. Reason: WebSocket disconnected.

Tableau desktop version 2021.1
Extension version: https://extensions.tableauusercontent.com/resources/tableau.extensions.1.latest.js or https://extensions.tableauusercontent.com/resources/tableau.extensions.1.latest.min.js

Is it possible to send filters on initialize?

I have managed to attach my filters to options object, but is it possible to send the options as POST? Because they are attaching to the URL and 2048 limitation makes it impossible to send bigger filters :/

Tabcmd export command

Hi i am trying to export a dashboard with filter value in, url query param when i try with simple query param (?first name=ruksad,sam) it works but when i try with all value in query parama(?first name=all) it does not work, any help in this will be much appreciated thanks in advance

Get all worksheets in a Workbook

Hi all!
Wanted to ask if there is a way by which we can get all the worksheets present within a workbook?

I am currently trying to embed the tableau server workbook to my website. The different worksheet names would be present as tabs outside of the tableau iframe. So wanted to know why getWorksheets() is not provisioned on top of a workbook.

As of now i am hardcoding tab names and on click using activateSheetAsync method to activate other worksheets. I basically want to get rid of the hardcoded worksheet names, is there anything i can do to get those sheets via JS api?

api.FirstVizSizeKnownEvent race condition

Tableau Viz JS API (tableau-2.1.2.min.js)

We have an application that loads several independent tableau visualizations on a single page (dashboard). One of our users noticed that if they navigate away from that page at a particular time that the page would break. After I did some investigating it looks I may of found the guilty culprit that breaks the JS and therefore the renderer process....which in turn kills the browser, leaving a gray page =/ (in electron app)

It appears that, if the visualizations begin to start rendering on the page and the user navigates away that the following code breaks while trying to read the postMessage property. It seems that cf.source is undefined and therefore postMessage cannot be accessed and breaks JS. However, if the user were to stay on this page, just long enough for the visualization to start loading, this event fires with cf.source being populated with a Window object and all is well.

if (cg.get_isApiCommandName()) {
    if (cg.get_commandId() === 'xdomainSourceId') {
        cj.handleEventNotification(cg.get_name(), cg.get_parameters());
        if (cg.get_name() === 'api.FirstVizSizeKnownEvent') {
            // This is the guy in question!!
            cf.source.postMessage('tableau.bootstrap', '*')
        }
    } else {
        this.$2(cg)
    }
} else {

As far as temporary fixes from our side, we can leverage window.onerror to handle the JS from completely breaking...we could also not allow change of navigation until they are all fully loaded (not ideal).

Looking for thoughts or ideas

Duplicate HTML in examples

The HTML in selectMarks.html does not match the description:

Select a set of marks in a visualization.

and the code is the same as in respondToEvents.html

applyRelativeDateFilterAsync is not function

Uncaught TypeError: newViz.getWorkbook(...).getActiveSheet(...).applyRelativeDateFilterAsync is not a function

i have tried calling above code in onFirstInteractive mthod but does not work

Tableau filters in URL

Hi team,
I am trying to pass params in URL, and params are filters(name of column in workbook) in workbook, but passing values through params in url does not work only for date range and relative date. can some please help me does tableau support date range and relative date in url params

getdata error

Hello, thanks for your guidance for getting data from a dashboard. However, for this url

https://public.tableau.com/views/SalesOverview_16591884572210/SalesOverview?%3Adisplay_static_image=y&%3AbootstrapWhenNotified=true&%3Aembed=true&%3Alanguage=zh-CN&:embed=y&:showVizHome=n&:apiID=host0#navType=0&navSrc=Parse

I cannot get data from the right part(six line chart) while the left part (three bar chart) works well. The error is [HTTP 400]. Could you help me? Thanks a lot!

Splitting Worksheets of Dashboard

Hi All,
I'm trying to embed the published dashboard onto my website. But I want to split them up into well spaced worksheets, separate iframes.
Just wanted to know if this is achievable by maintaining the Dashboard Actions in tact by using the js apis.

Anomalies

Logging every time the Humidity or Heat doesn't fire like it should and causes an outlier.

React Error at Initializing: tableau.viz is not a constructor

Hi,

I have been trying [email protected] and everytime I create a viz object out of tableau I run into the following error,

tableau.viz is not a constructor

Question also listed on this link.

Is this a problem with this specific version? Or is there a bug or something wrong with the code?