DB Write-Back Part 3: Add Tableau Dashboard and Workbook Name List to Extension UI

Let’s show the name of the dashboard and the names of the workbooks within the dashboard in our extension’s page.

Output the Dashboard Name

Create a part3 directory, and create part3a.html and part3.js files within it.

part3a.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="../lib/tableau.extensions.1.latest.js" defer></script>
        
    <!-- jQuery -->                                                    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
    <!-- Reference our JavaScript file -->
    <script src="./part3a.js" defer></script>  
    
    <title>TabBlogs.com DB Write-Back Tableau Extension: Soup To Nuts</title>
  </head>
  <body>
    <p id="dashboardName"></p>
  </body>
</html>

In part3a.html, we’ve changed the body of the html page to contain just one element, an empty paragraph with the element id “dashboardName”. If we were to just run this html page without calling part3a.js, it would give us a blank page. We’ll use jQuery in our js file to assign a value to the dashboardName html element.

part3a.js:

tableau.extensions.initializeAsync().then(() => {
    const dashboard = tableau.extensions.dashboardContent.dashboard;
    
    //Use jQuery to select the html element #dashboardName and assign it the name of the Tableau dashboard.
    $('#dashboardName').text('Dashboard name: '+dashboard.name);
});

The constant declaration is simply creating a shorthand variable for the Tableau extension dashboard object.

The “$(‘#dashboardName’)…” line calls the jQuery function (abbreviated “$”) in order to get access to the “dashboardName’ html element in the part3a.html document object. Once we have access to the element, we assign it a string value by concatenating ‘Dashboard name: ‘ and the value of the name property of the dashboard.

Edit your trex file to refer to part3a.html file.

<source-location>
  <url>http:localhost:3000/part3/part3a.html</url>
</source-location> 

Re-load the extension, and you should see this:


Output the Workbook Names in an HTML Table

part3b.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="../lib/tableau.extensions.1.latest.js" defer></script>
        
    <!-- jQuery -->                                                    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    
    <!-- Reference our JavaScript file -->
    <script src="/part3/part3b.js" defer></script>  
    
    <title>TabBlogs.com DB Write-Back Tableau Extension: Soup To Nuts</title>
  </head>
  <body>
    <p id="dashboardName"></p>
    <table id="worksheets">
      <tbody></tbody>
    </table>
  </body>
</html>

In part3b.html, we’ve added a table with an element id of #worksheets and an empty body.

part3b.js:

tableau.extensions.initializeAsync().then(() => {
    const dashboard = tableau.extensions.dashboardContent.dashboard;
    
    //Use jQuery to select the html element #dashboardName and assign it the name of the Tableau dashboard.
    $('#dashboardName').text('Dashboard name: '+dashboard.name);
    
    dashboard.worksheets.forEach( worksheet => {
      $('#worksheets > tbody').append(`<tr><td>Worksheet: ${worksheet.name}<td><tr>`);
    });
    
});

In part3b.js, we have removed the “I am initialized” line and added a forEach loop that iterates through each worksheet in the dashboard. For each of the worksheets, we call the jQuery function to get access to the #worksheets table’s body. To that we append a new row containing the worksheet name. It’s tough to notice, but in order to use JavaScript ES6 standard template literals (that ${worksheet.name} placeholder in the string we’re appending), we need to wrap the string with backticks rather than single quotes. Absolutely maddening to replicate / debug if you don’t know that.

Edit your trex file to refer to part3b.html file.

<source-location>
  <url>http://localhost:3000/part3/part3b.html</url>
</source-location> 

Re-load the extension, and you should see this:

Formatting

Since the 20th century if not before, web developers have been using cascading style sheets (CSS) to format web pages. The 21st century has brought us Bootstrap, an open source toolkit that shortcuts many CSS formatting tasks.

part3c.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script src="../lib/tableau.extensions.1.latest.js" defer></script>
        
    <!-- jQuery -->                                                    
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" >
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" ></script>
    
    <!-- Reference our JavaScript file -->
    <script src="./part3c.js" defer></script>  
    
    <title>TabBlogs.com DB Write-Back Tableau Extension: Soup To Nuts</title>
  </head>
  <body>
    <p id="dashboardName" class="lead"></p>
    <table id="worksheets" class="table-bordered">
      <tbody></tbody>
    </table>
  </body>
</html>

Part3c.html includes two additional references, a bootstrap css file and a bootstrap JavaScript file. Within the body of part3c.html, we have added class=”lead” to the dashboardName paragraph tag in order to have bootstrap format it for us. We have also added the Bootstrap class table-bordered to the worksheets table.

There are no changes in part3c.js from part3b.js.

Edit your trex file to point to part3c and reload the extension to see the subtle effect that bootstrap has on the format of the extension.

Summary

The Tableau extensions dashboard object gives us programmatic access to the dashboard, worksheets and other aspects of the Tableau environment. This article has walked through the process of accessing some of those attributes and writing them to a web page.

In Part 4, we will step back from extension development and explore SQL Server connectivity from a JavaScript app.

Author: Larry Clark

Larry has been a Tableau employee since October of 2018. Prior to Tableau, Larry was a BI consultant for Catapult Systems. Prior to Catapult, Larry was in DB/BI technical sales for Microsoft for >20 years.

Leave a Reply

Your email address will not be published. Required fields are marked *