Getting Started With the JavaScript API With interaction, you can make an existing viz have more meaning.

Who isn’t this talk for? People who are familiar with the JavaScript API

What can I do? Interact with the viz programmatically, on a webpage that you made. Build an app. Tell a story. Provide examples here for each of these.

How do I start? 1. Build your webpage

How do I start? 1. Build your webpage 2. Reference the API JavaScript <script src=http://your-server-here/javascripts/api/tableau_v8.js>

How do I start? 1. Build your webpage 2. Reference the API JavaScript <script src=http://your-server-here/javascripts/api/tableau_v8.js> 3. Embed a viz using the JavaScript API.

Demo Time! This demo will cover loading a viz and all of the options you can use to do that, including onInteractive.

Now what? YAY I HAVE A VIZ! Great, but Tableau Server gets you that already. Let’s do the fun stuff now.

Interaction! Switching tabs Selecting Filtering

More demo time! This demo will cover how to filter, select and switch tabs.

JavaScript API Tutorial Walkthrough on our website

Geeking out with JavaScript First, how many of you have written JavaScript before? Here are some things that you might want to know about when you go to write code. I can go as deep as the audience wants at this point into how JS works. I’ll let them direct it, outside of these slides.

Debugging http://your-server-here/javascripts/api/tableau_v8.debug.js> Maybe a debugging demo, if people want it? Is that interesting?

Synchronous vs. Async If it’s asynchronous, it ends in Async Async calls say “go do this and report back” Sync calls say “do this while I wait” Ask the audience at this point if they know what ‘asynchronous’ means. I have no idea if they will or not.

The fun stuff is Asynchronous If you want asynchronous things to happen in an order, you need to chain them together. It looks a little like this: sheet.applyFilterAsync(a, b ,c)   .then(function () {     return sheet.selectMarksAsync(x, y);   }) .then(function() { return sheet.applyRangeFilterAsync(r, v); })   .otherwise(throwError) .always(doSomethingElse); Talk about how this follows the Promises/A Standard. Ask if people want to know how this works (async metods return an object called a Promise, which has a then() method and maybe lets the function you pass to then() take a parameter)

The fun stuff is Asynchronous Or, you can use event handlers, like this: handler = function(marksEvent) { // do some stuff here when marks are selected } viz.addEventListener( tableauSoftware.TableauEventName.marksselection, handler); // or maybe you can let the user select marks sheet.selectMarksAsync(x, y, tableauSoftware.SelectionUpdateType.REPLACE);

Async Demo Time Show what you can do with Promises/A and how control flow works.

Want to know more? Go to these sessions! Using the JavaScript API at the National Heritage Academies (Today, 4 – 5) You did WHAT with the JavaScript API? (Tomorrow, 3:15 – 4:15) Infinite Interactivity with the JavaScript API (Wednesday, 9:45 – noon)