Welcome

Introductions… (and cool pics)

Introductions… (and cool pics)

Flex the T-Rex

Automation

Extensions

Embedded Analytics

Data Connectivity

Data Science

Tableau Platform

Inte

gra

tion

s

Enabling Integrations for Developers

Developer Deep Dive:Dashboard Extensions

# T C 1 8

John Dance

Principal Software Engineer

Tableau

Ankit Patel

Senior Software Engineer

Tableau

Wait! Did they just say something like ‘code’ and ‘JavaScript’ in the same sentence!?

Someone in the audience

Am I in the right session?

That same someone in the audience

E X T E N S I O N S R E L AT E D S E S S I O N S

Extending Tableau Front and BackOct-23 | 14:15 – 15:15

(Hands on Training) Dashboard ExtensionsOct-23 | 14:15 – 16:45 Oct-24 | 13:45 – 16:15

Developer Deep Dive | Dashboard ExtensionsOct-24 | 10:15 – 11:15 Oct-25 | 14:15 – 15:15

Real-world Tableau Using Extensions and TabPyOct-24 | 15:30 – 16:30 Oct-25 | 10:45 – 11:45

E X T E N S I O N S R E L AT E D S E S S I O N S ( C O N T. )

Extensions FOMO Cure | Extensions to Use TodayOct-24 | 10:15 – 10:45 Oct-25 | 11:45 – 12:15

You Did What With the Extensions API!?Oct-23 | 16:00 – 17:00 Oct-24 | 15:30 – 16:30

Close the Loop & Light it Up with ExtensionsOct-23 | 14:15 – 15:15 Oct-25 | 10:45 – 11:45

Are you ready?

John & Ankit

What is a dashboard extension?

A few in the audience

Tableau Extensions Gallery

Setup & Manifest

Event API Interactive API

Settings API

Initialization API

Data API

Setup & Manifest

Event API Interactive API

Settings API

InitializationAPI

Data API

Setup & Manifest

Setup & Manifest

Setup & Manifest

https://tableau.github.io/extensions-api/#

CodeLoading the extension

Setup & Manifest

Event API Interactive API

Settings API

Initialization API

Data API

Initializing an Extension

Occurs at the beginning of every extension:

tableau.extensions.initializeAsync().then(function() {

// Once this promise has resolved, all extension

// APIs have been initialized and can be used.

});

Javascript Promise

requestTShirtAsync().then(function() { iamHappy() },function() { iamSad() });

requestTShirtAsync : is a function returning a Promise

then : is a method of Promise

iamHappy : is called if Promise is fulfilled

iamSad : is called if Promise is rejected

CodeLoading the extension

Initializing the extension

Setup & Manifest

Event API Interactive API

Settings API

InitializationAPI

Data API

CodeLoading the extension

Initializing the extension

Getting data from the dashboard

Setup & Manifest

Event API Interactive API

Settings API

InitializationAPI

Data API

Event Listening Pattern

worksheet.addEventListener(eventType, eventHandlerFunction);

// somewhere else in the .js file

function eventHandlerFunction(event) {

// do something interesting with the event …

}

// eventType can be: FilterChanged, MarkSelectionChanged, ParameterChanged, SettingsChanged

CodeLoading the extension

Initializing the extension

Getting data from the dashboard

Adding an event handler

Setup & Manifest

Event API Interactive API

Settings API

InitializationAPI

Data API

CodeLoading the extension

Initializing the extension

Getting data from the dashboard

Adding an event handler

Saving state with settings

Setup & Manifest

Event API Interactive API

Settings API

InitializationAPI

Data API

Example Actions

// add to, remove, or replace the selection

worksheet.selectMarksByValueAsync(selectionCriteria, updateType) : Promise<void>

// change the value of a parameter

Parameter.changeValueAsync(newValue) : Promise<DataValue>

// change a filter

worksheet.applyFilterAsync(fieldName, values, updateType): Promise<string>

CodeLoading the extension

Initializing the extension

Getting data from the dashboard

Adding an event handler

Saving state

Calling dashboard actions

If debugging is the process of removing software bugs, then programming must be the process of putting them in.

Edsger W. Dijkstra (not in the audience)

Debuggingtableau --remote-debugging-port=8696

Chromium (Chrome in 2019.1)

see: https://tableau.github.io/extensions-api/#

With great power comes great responsibility.

Uncle Ben, and someone from the IT department in the audience

Tableau Extensions Site Settings

Tableau Extensions Site Settings

Tableau Extensions Site Settings

Tableau Extensions Server Settings

Tableau Extensions Server Settings

Roads? Where we’re going, we don’t need roads.

Doc Brown

Back to the Future

Future Extensions Roadmap

Transparency

Show/Hide

Printing

Beyond Dashboard Extensions

Extensions are the most AMAZING, MIND–BLOWING thing I have ever seen! … How do I learn more?

Everyone in the audience

E X T E N S I O N S R E L AT E D S E S S I O N S

Extending Tableau Front and BackOct-23 | 14:15 – 15:15

(Hands on Training) Dashboard ExtensionsOct-23 | 14:15 – 16:45 Oct-24 | 13:45 – 16:15

Developer Deep Dive | Dashboard ExtensionsOct-24 | 10:15 – 11:15 Oct-25 | 14:15 – 15:15

Real-world Tableau Using Extensions and TabPyOct-24 | 15:30 – 16:30 Oct-25 | 10:45 – 11:45

E X T E N S I O N S R E L AT E D S E S S I O N S ( C O N T. )

Extensions FOMO Cure | Extensions to Use TodayOct-24 | 10:15 – 10:45 Oct-25 | 11:45 – 12:15

You Did What With the Extensions API!?Oct-23 | 16:00 – 17:00 Oct-24 | 15:30 – 16:30

Close the Loop & Light it Up with ExtensionsOct-23 | 14:15 – 15:15 Oct-25 | 10:45 – 11:45

#DataDev Resources

TC18 Developer Track Contenthttp://tabsoft.co/tcdevtrack

Tableau Developer Programhttp://tableau.com/developer

Free environment for development

Early access to info and APIs

Tableau on GitHubhttp://github.com/tableau

What amazing extensions will you invent and write?

Flex the T-Rex

Thank you!

#TC18

#DataDev Resources

TC18 Developer Track Contenthttp://tabsoft.co/tcdevtrack

Tableau Developer Programhttp://tableau.com/developer

Free environment for development

Early access to info and APIs

Tableau on GitHubhttp://github.com/tableau