DataDev Bingo

Challenge the #DataDev in you!

One of the biggest benefits of joining Tableau’s Developer Program is a free personal developer site. With this site, developers can learn about and test the latest Tableau APIs on the most current version of Tableau. It gives you a safe and secure space away from your production environment to hack on!

Enter the #DataDev Site Challenge; a way to educate and encourage you, our developer community, to do more with your site, discover new ways to use it, and have a little fun along the way.

Keep Calm and Play DataDev BINGO!

Step 1: Download your Bingo card.

Step 2: Start with a “B” column challenge. We have 24 mini challenges for you to solve with different levels of difficulty while using various APIs and/or developer tools. All of this is for you to expand your Tableau Developer Platform knowledge in a fun, engaging way.

Remember to use BINGO challenge list below to access the details and directions for each challenge.

Step 3: You have to complete four challenges in a row (we provide the middle space as a freebie!), so you can call out, “Bingo!” by sending us an email or sharing on social media (Twitter, LinkedIn, Instagram) by tagging #DataDev in a public post.
 

 

The Challenges

B

  • Learn the basics of embedding:

When starting to use a new API, tutorials are a great way to learn. For this level, you are going to follow along with this tutorial on the JavaScript API. This tutorial is a sample web application, created with Tableau's JavaScript API. It's designed to help you explore and learn about the API using a series of steps that guide you through the basics.

Bonus: The tutorial is using a viz from Tableau Public, try to replace it with a viz published on your Developer Sandbox site.

 
  • Learn more about the new Embedding API v3

In 2021.4, we released the new Embedding API v3. We've redesigned he experience for embedding to make your life easier, to modernise the experience, and to enable new functionality. Try the latest version in Developer Preview here. You can host your code on Glitch for example, or just save it locally on your laptop.

Hint: We published on Glitch a playlist with sample codes.

 
  • Build your first dashboard extension

Complete one of these DataDev mini-projects:

      - Update a Date Filter

      - Refresh All Data Resources

 
  • Start the Dashboard Extensions Tutorial

Tutorials are a great way to get started with a new API and to learn the basics.
Follow the first three steps from our Dashboard Extensions Tutorial.

 
  • Sign-in to your site using Personal Access Token (PAT)

Before doing any request using the REST API or Tableau Server Client (TSC), you will need to sign in to your site.
You can use your username and password or a Personal Access Token (PAT). For this challenge, we want you to use a PAT to sign-in. A sign-in using a PAT returns the same info as a username and password sign-in (a credential token, site LUID, and user LUID), but without the security risk of exposing hard-coded usernames and passwords, or an interactive login experience.
Hint:

      - REST API: Make a Sign In Request with a Personal Access Token

      - TSC: Sample code

 

I

  • Add functionality to your embedded page 

One of the benefits of using the JavaScript API to embed your viz in your application is the two-way communication between the viz and your application. Your application can respond to events in the viz, but also the other way around, the viz can respond to events in the application.

For this challenge, you are going to:

  • Add a text zone in the web page that is going to display all the values that are currently set on the filter. For example, if you are using the Superstore dataset, and you have filtering on Category, the web page should display: Furniture, Office Supplies and Technology if all the values are selected.
  • Add a button to clean any filters on your viz.

The following steps are a suggested outline (you might have other ideas that are valid and accomplish the same goals) of the steps you could take to solve this:

  • To add the dynamic text zone:
  1. Solve B1: Get a basic embed page working
  2. If you are embedding a dashboard, get all the worksheets on the dashboard. Hint: The JavaScript has a propery getWorksheets() to get the collection of worksheet contained in the dashboard
  3. Get all the filters on the worksheet(s) Hint: The JavaScript API has a method getFilterAsync() that fetches the collection of filters used on the sheet.
  4. Get all the applied values for the filters. Hint: The JavaScript API has a method getAppliedValues() that gets the collection of values that are currently set on the filter.
  5. Display these values in the HTML. Hint: You might want to use the property innerHTML to set the HTML content of an element
  6. Add an event to this button. Hint: The event you want to use it onclick
  7. Apply a filter that adds all values to the filter. Hint: The JavaScript API has a method applyFilterAsync that applies a simple categorical filter.
  • Add cleaning button:
  1. Add a button in HTML. Hint: Button can be defined in HTML using the <button> tag

 

  • Select marks and get data

The JavaScript API lets you get the underlying data for an embedded viz. It is really handy when you want to bring data into other applications or libraries such D3.js to build custom charts. For this challenge, embed a viz from your Developer Sandbox and when a user selects marks, your web page displays the underlying data.

The following is a suggested outline of the steps you could take to solve this. You might have other ideas that are valid and can accomplish the same goals:

 

 

  • Create a search field extension

Create an extension that allows you to search all fields in a worksheet.
You enter text, and it selects any items in your viz that match that text.
For example, in Superstore 'table' should match the 'Tables' sub-category and 'KI Conference Tables' product name.

Hint:

- The method get Summary Data Async() gets the summary data table for this worksheet.

- Get data from a dashboard

 

  • Finish Dashboard Extensions Tutorial

Complete the last three steps from our Dashboard Extensions Tutorial.
Once you built the final extension, it’s time to do the happy T-Rex dance (Don’t forget to send us the recording), and implement the show/hide feature. You can use the ZoneVisibilityType enum and setZoneVisibilityAsync method to control whether the objects in a dashboard are visible or hidden. The goal is to hide the extension when the end-user is not selecting any marks.

Hint: Show and Hide Objects in the Dashboard documentation

 

  • List all the workbook owners

Oftentimes you need to programmatically do things with Tableau or the data & content within Tableau. The level 2 challenge for A&I asks you to figure out all the owners of workbooks on your Tableau site and then use this list as a datasource so that we can build a viz to better understand the owners of workbooks.

The following steps are a suggested outline (you might have other ideas that are valid and accomplish the same goals) of the steps you could take to solve this:

  • Write a Python script that uses the Tableau Server Client library that:
    • Sign-in to your site - Check B4
    • Requests a list of all the workbooks (and owners) on the site
    • Writes this list out as a CSV file (Need a hint?)
  • Manually login to your site and:

N

  • Add visualizations to text

Telling a story with words is great but imagine saying it with words and data visualization, that would be awesome! In this challenge, you are going to have an HTML page with plain text telling you a story about Superstore and an embedded viz published on your Developer Sandbox. Use the words and numbers in your text to trigger filtering of the viz. For example, when the user clicks on “Tables” in the following sentence “Tables are not profitable”, the viz should filter to show everything in the Tables category.
Hint:

 
  • Build your own portal with Tableau recommendations

Build an interface that would display all the visualizations recommended (to the signed-in user) by Tableau. The recommendations will be shown first as thumbnail images. When the users click on a thumbnail, the fully interactive embedded viz (and the power of Tableau’s interactive experience) is displayed and made available for use.
Hint:

 
  • Create a Write back extension

Build an extension that writes back to a data source or file. You can pick any data source/file types. For example, the extension would allow the end-user to update a salesperson's quota.

 
  • Email the calculations owners

Dashboard creators when working on a dashboard create a lot of calculated fields. Sometimes, they forget to rename them and Profit is going to stay forever Calculation1 (name that Tableau gives by default when creating a calculated field). Or while they are testing their calculations, they have 10 ‘test’ fields: test1, test2, etc. Having these badly named fields doesn’t help end users to understand what is the output of the calculations and take space on your site/server.
Build a script that will get all the bad named calculated fields (like Calculation1) and email the owners of these fields to ask them to rename these.
Hint:

G

  • Set Up a Webhook

We released Webhooks in the Tableau 2019.4 release. Webhooks are a common method whereby a computer system can notify another that an event has occurred using standard web technologies such as HTTP and JSON.

In this mini-challenge, you are going to set a Webhook to get notified when a workhook is deleted (API Event Name is: webhook-source-event-workbook-deleted). You can use the Postman Collection that is available here to set it up. For testing the Webhook, you can use webhooks.site, it will let you test Webhook without setting anything up—they provide a free, temporary URL to point to your Webhook.

 

  • Automate adding users

Adding users on Tableau via the UI is really easy but it can be time-consuming if you’re adding multiple users per day. Using the Tableau REST API or Tableau Server Client, you can automate this process.

This Excel file contains three users and the group they need to be added to. Add these users in the right group using the REST API or Tableau Server Client as unlicensed users on your Developer Sandbox.

 

  • Build an extension: From here to there

I am here and I need to go there: how many miles/kilometres are between the two points? For this challenge, you need to build an extension that calculates the distance between two selected points on a map in a dashboard. For example, if the end-user selects Mauritius-Seattle, the extension is going to display: 16,973 km.
Hint:

 

  • Tweet every time an extract is failing

When an extract is failing, you want your entire community to know. Using Tableau Webhooks, create a workflow, every time an extract is failing on Tableau Online, send a Tweet with #DataDev out.
Hint:

  • IFTTT, it is a free way to get all your apps and devices talking to each other.

 

  • Notify me when a new workbook created

Now that you set up a Webhooks and tested it, the next step is to build processes and procedures around events happening in your Tableau deployment. In this challenge, you are going to use Webhooks to send a notification when a workbook is created. You can follow this DataDev mini-project and complete one of the challenge exercises.

O

  • Get the Embed Tableau Visualizations in Salesforce Badge

Complete this project on Trailhead to earn a new badge and learn how to embed Tableau inside Salesforce

 
  • Slack me this dashboard

Users are using tools such as Slack to collaborate with their teams. They don’t want to switch between their collaboration tool, and Tableau to see their visualizations. Create a script using Slack APIs and Tableau Server Client (TSC) to post a static image of a dashboard that you’ve published to your Sandbox Site on a Slack Channel.

Bonus: Post the static image of the dashboard only when a condition is met. For example, send the Sales Dashboard only if the sales are under $10,000

 
  • Display dynamic images

Imagine a minute working in HR, and visualizing the HR data in Tableau. You have data for all your employees, but you have no idea what they look like. We have hosted all your employees' pictures and included their picture URL in this data source.

Now, you need to build a dashboard extension that is going to display dynamically images based on the image in the data.

Hint:

- The method getSummaryDataAsync() gets the summary data table for this worksheet.

 
  • Export PDF button

While embedding Tableau in an application, it happens (yes, true story) that Tableau users need a PDF version of a dashboard. Instead of display the Tableau toolbar, create a button in HTML and when the user clicks, they can export the embedded dashboard to PDF.

Hint:

- showExportPDFDialog(): Equivalent to clicking on Download > PDF from the toolbar, which shows a dialog allowing the user to select options for downloading a PDF file.

 
  • Leverage the power of Python in Tableau with TabPy

In this challenge, you are going to apply some advanced analytics techniques such as clustering algorithms to group the regions with similar average temperatures over time together. Complete this mini-project.

Useful Links