Welcome

Writing your first Web Data Connector

Brett Taylor

Staff Software Engineer

Tableau

# T C 1 8

Ashwin Sekar

Software Engineer

Tableau

Automation

Extensions

Embedded Analytics

Data Connectivity

Data Science

Tableau Platform

Inte

gra

tion

s

Enabling Integrations for Developers

Agenda

What is a Web Data Connector

How to use a Web Data Connector

Live demonstration of building a Web Data Connector

What isWeb Data Connector?

Your

HTML & JavaScript

Web Data Connector

Why use a WDC?

Data Accessibility Automation

UsingWeb Data Connectors

BuildingWeb Data Connectors

It all starts here…

WDC Phase Model

Phase 1: Interactive Phase

• The UI that a user sees

• The purpose is to collect input:• Filters

• Authentication

Phase 2: Gather Data Phase

• Runs after the interactive phase

• Used to retrieve schema & data

Functions WDCs Implement

init(initCallback)Initializes WDC and specifies

advanced options [optional]

getSchema(schemaCallback)Returns schema information

getData(table, doneCallback)Returns data for requested table

Creating a Web Data Connector

Pre-req #1: Know your Web API

API Overview

API Documentation

Response format (JSON? XML?)

API parameters

Sample requests (e.g. JSON lint)

Creating a Web Data Connector

Pre-req #2: Web Data Connector tools

Download the WDC SDKgit clone https://github.com/tableau/webdataconnector.git

Download and Install a good text editor Brackets, Atom, Sublime Text

Have a web server ready to host your WDCPython (SimpleHTTPServer), IIS, Node and npm, Tomcat, WAMP

Functions WDCs Implement

init(initCallback)Initializes WDC and specifies

advanced options [optional]

getSchema(schemaCallback)Returns schema information

getData(table, doneCallback)Returns data for requested table

Creating a Web Data Connector

Let’s party in Desktop!

Load connector in Tableau Desktop

Check for any error messages

Have fun and start visualizing in Tableau Desktop!

What Else Is Possible?

What Else Is Possible?

WDC Tips

Watch out for differences in browser behavior

• WDC uses a browser called Qt WebKit which behaves differently than Chrome and Firefox.

• This can lead to “it worked in the Simulator but not Tableau”.

WDC Tips

Watch out for differences in browser behavior

• WDC uses a browser called Qt WebKit which behaves differently than Chrome and Firefox.

• This can lead to “it worked in the Simulator but not Tableau”.

We are actively working to move

WDC to use Chromium!

WDC Tips

Don’t expect state to be preserved

• WDCs are launched multiple times and state is not preserved.

• Global variables won’t be preserved.

• Use tableau.connectionData property.

WDC Tips

Refresh WDCs on Tableau Server requires extra work

• Admins must whitelist WDCs in order to refresh on Tableau Server.

• We recommend the Sync Client with Tableau Online.

More suggestions are in our WDC FAQ.

Advanced Topics

Multiple tables

User inputs in HTML

Authentication

Publishing your WDC

Final Takeaways

Read the tutorials

Don’t start from scratch!

Find an existing WDC you can re-use.

Use the WDC Simulator

Debugging JavaScript is a lot easier from the simulator.

#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

http://github.com/tableau/webdataconnector

D ATA C O N N E C T I V I T Y R E L AT E D S E S S I O N S

Data and Back Again | Lessons from Shipping WDCsOct-24 | 10:15 – 11:15 Oct-24 | 12:00 – 13:00

Write Your First Web Data Connector (WDC)Oct-23 | 14:15 – 15:15 Oct-24 | 15:30 – 16:30

Leveraging the Extract API to Build Data ModelsOct-23 | 10:45 – 11:45 Oct-24 | 10:15 – 11:15

Please complete the

session survey from the

Session Details screen

in your TC18 app

Thank you!

#TC18

Brett – btaylor@tableau.com

Ashwin – asekar@tableau.com