tableau · lbrendanl · Feb 14, 2018 · Feb 12, 2018 · Feb 12, 2018 · Feb 14, 2018
diff --git a/Samples/DataSources/DataSources.trex b/Samples/DataSources/DataSources.trex
@@ -5,7 +5,7 @@
     <name resource-id="name"/>
     <description>DataSources Sample</description>
     <author name="tableau" email="github@tableau.com" organization="tableau" website="www.tableau.com"/>
-    <min-api-version>1.1</min-api-version>
+    <min-api-version>0.8</min-api-version>
     <source-location>
       <url>http://localhost:8765/Samples/DataSources/datasources.html</url>
     </source-location>

diff --git a/Samples/DataSources/datasources.html b/Samples/DataSources/datasources.html
@@ -15,7 +15,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 
     <!-- Extensions Library (this will be hosted on a CDN eventually) -->
-    <script src="../../lib/tableau-extensions-0.8.0.js"></script>
+    <script src="../../lib/tableau-extensions-0.latest.js"></script>
 
     <!-- Our extension's code -->
     <script src="./dataSources.js"></script>

diff --git a/Samples/DataSources/datasources.js b/Samples/DataSources/datasources.js
@@ -51,14 +51,14 @@
 
   // Displays a modal dialog with more details about the given dataSource.
   function showModal (dataSource) {
-    var modal = $('#infoModal');
+    let modal = $('#infoModal');
 
     $('#nameDetail').text(dataSource.name);
     $('#idDetail').text(dataSource.id);
     $('#typeDetail').text((dataSource.isExtract) ? 'Extract' : 'Live');
 
     // Loop through every field in the dataSource and concat it to a string.
-    var fieldNamesStr = '';
+    let fieldNamesStr = '';
     dataSource.fields.forEach(function (field) {
       fieldNamesStr += field.name + ', ';
     });
@@ -69,7 +69,7 @@
     dataSource.getConnectionSummariesAsync().then(function (connectionSummaries) {
       // Loop through each connection summary and list the connection's 
       // name and type in the info field
-      var connectionsStr = '';
+      let connectionsStr = '';
       connectionSummaries.forEach(function (summary) {
         connectionsStr += summary.name + ': ' + summary.type + ', ';
       });
@@ -80,7 +80,7 @@
 
     dataSource.getActiveTablesAsync().then(function (activeTables) {
       // Loop through each table that was used in creating this datasource
-      var tableStr = '';
+      let tableStr = '';
       activeTables.forEach(function (table) {
         tableStr += table.name + ', ';
       });

diff --git a/Samples/Filtering/Filtering.trex b/Samples/Filtering/Filtering.trex
@@ -5,7 +5,7 @@
     <name resource-id="name"/>
     <description>Filtering Sample</description>
     <author name="tableau" email="github@tableau.com" organization="tableau" website="www.tableau.com"/>
-    <min-api-version>1.1</min-api-version>
+    <min-api-version>0.8</min-api-version>
     <source-location>
       <url>http://localhost:8765/Samples/Filtering/filtering.html</url>
     </source-location>

diff --git a/Samples/Filtering/filtering.html b/Samples/Filtering/filtering.html
@@ -15,7 +15,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 
     <!-- Extensions Library (this will be hosted on a CDN eventually) -->
-    <script src="../../lib/tableau-extensions-0.8.0.js"></script>
+    <script src="../../lib/tableau-extensions-0.latest.js"></script>
 
     <!-- Our extension's code -->
     <script src="./filtering.js"></script>

diff --git a/Samples/Parameters/Parameters.trex b/Samples/Parameters/Parameters.trex
@@ -5,7 +5,7 @@
     <name resource-id="name"/>
     <description>Parameters Sample</description>
     <author name="tableau" email="github@tableau.com" organization="tableau" website="www.tableau.com"/>
-    <min-api-version>1.1</min-api-version>
+    <min-api-version>0.8</min-api-version>
     <source-location>
       <url>http://localhost:8765/Samples/Parameters/parameters.html</url>
     </source-location>

diff --git a/Samples/Parameters/parameters.html b/Samples/Parameters/parameters.html
@@ -15,7 +15,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 
     <!-- Extensions Library (this will be hosted on a CDN eventually) -->
-    <script src="../../lib/tableau-extensions-0.8.0.js"></script>
+    <script src="../../lib/tableau-extensions-0.latest.js"></script>
 
     <!-- Our extension's code -->
     <script src="./parameters.js"></script>

diff --git a/Samples/Settings/Settings.trex b/Samples/Settings/Settings.trex
@@ -5,7 +5,7 @@
     <name resource-id="name"/>
     <description>Settings Sample</description>
     <author name="tableau" email="github@tableau.com" organization="tableau" website="www.tableau.com"/>
-    <min-api-version>1.1</min-api-version>
+    <min-api-version>0.8</min-api-version>
     <source-location>
       <url>http://localhost:8765/Samples/Settings/settings.html</url>
     </source-location>

diff --git a/Samples/Settings/settings.html b/Samples/Settings/settings.html
@@ -14,7 +14,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
 
     <!-- Extensions Library (this will be hosted on a CDN eventually) -->
-    <script src="../../lib/tableau-extensions-0.8.0.js"></script>
+    <script src="../../lib/tableau-extensions-0.latest.js"></script>
 
     <!-- Our extension's code -->
     <script src="./settings.js"></script>

diff --git a/Samples/Settings/settings.js b/Samples/Settings/settings.js
@@ -52,8 +52,8 @@
   }
 
   function saveSetting () {
-    var settingKey = $('#keyInput').val();
-    var settingValue = $('#valueInput').val();
+    let settingKey = $('#keyInput').val();
+    let settingValue = $('#valueInput').val();
 
     tableau.extensions.settings.set(settingKey, settingValue);
 

diff --git a/Samples/UINamespace/uiNamespace.html b/Samples/UINamespace/uiNamespace.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Settings Sample</title>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
+
+    <!-- Extensions Library (this will be hosted on a CDN eventually) -->
+    <script src="../../lib/tableau-extensions-0.latest.js"></script>
+
+    <!-- Our extension's code -->
+    <script src="./uiNamespace.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <p id="mainContent">
+        <div id="active" style="display: none;">
+          Refreshing <b><span id="datasourceCount">0</span></b> datasource(s) every <b><span id="interval">5</span></b> minutes.
+          <button type="button" id="pause" class="btn btn-default btn-sm">
+            <span class="glyphicon glyphicon-pause"></span>
+          </button>
+        </div>
+        <div id="inactive">
+          No refreshes currently running, hit play.
+          <button type="button" id="play" class="btn btn-default btn-sm">
+            <span class="glyphicon glyphicon-play"></span>
+          </button>
+        </div>
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/Samples/UINamespace/uiNamespace.js b/Samples/UINamespace/uiNamespace.js
@@ -0,0 +1,112 @@
+'use strict';
+
+/**
+ * UINamespace Sample Extension
+ * 
+ * This sample extension demonstrates how to use the UI namespace
+ * to create a popup dialog with additional UI that the user can interact with.
+ * The content in this dialog is actually an extension as well (see the 
+ * uiNamespaceDialog.js for details).  
+ * 
+ * This sample is an extension that auto refreshes datasources in the background of 
+ * a dashboard.  The extension has little need to take up much dashboard space, except
+ * when the user needs to adjust settings, so the UI namespace is used for that.
+ */
+
+// Wrap everything in an anonymous function to avoid polluting the global namespace
+(function () {
+  const defaultIntervalInMin = '5';
+  let refreshInterval;
+  let activeDatasourceIdList = [];
+
+  $(document).ready(function () {
+    tableau.extensions.initializeAsync().then(function() {
+      $('#play').click(configure);
+      $('#pause').click(pause);
+
+      // This event allows for the parent extension and popup extension to keep their
+      // settings in sync.  This event will be triggered any time a setting is
+      // changed for this extension, in the parent or popup (i.e. when settings.saveAsync is called).
+      tableau.extensions.settings.addEventListener(tableau.TableauEventType.SettingsChanged, (settingsEvent) => {
+        updateExtensionBasedOnSettings(settingsEvent.newSettings)
+      });
+    });
+  });
+
+  function configure() {
+    // This uses the window.location.origin property to retrieve the scheme, hostname, and 
+    // port where the parent extension is currently running, so this string doesn't have
+    // to be updated if the extension is deployed to a new location.
+    const popupUrl = `${window.location.origin}/Samples/UINamespace/uiNamespaceDialog.html`;
+
+    /**
+     * This is the API call that actually displays the popup extension to the user.  The
+     * popup is always a modal dialog.  The only required parameter is the URL of the popup,  
+     * which must be the same domain, port, and scheme as the parent extension.
+     * 
+     * The developer can optionally control the initial size of the extension by passing in 
+     * an object with height and width properties.  The developer can also pass a string as the
+     * 'initial' payload to the popup extension.  This payload is made available immediately to 
+     * the popup extension.  In this example, the value '5' is passed, which will serve as the
+     * default interval of refresh.
+     */
+    tableau.extensions.ui.displayDialogAsync(popupUrl, defaultIntervalInMin, { height: 500, width: 500 }).then((closePayload) => {
+      // The promise is resolved when the dialog has been expectedly closed, meaning that
+      // the popup extension has called tableau.extensions.ui.closeDialog.
+      $('#inactive').hide();
+      $('#active').show();
+
+      // The close payload is returned from the popup extension via the closeDialog method.
+      $('#interval').text(closePayload);
+      setupRefreshInterval(closePayload);
+    }).catch((error) => {
+      // One expected error condition is when the popup is closed by the user (meaning the user
+      // clicks the 'X' in the top right of the dialog).  This can be checked for like so:
+      switch(error.errorCode) {
+        case tableau.ErrorCodes.DialogClosedByUser:
+          console.log("Dialog was closed by user");
+          break;
+        default:
+          console.error(error.message);
+      }
+    });
+  }
+
+  /**
+   * This function sets up a JavaScript interval based on the time interval selected
+   * by the user.  This interval will refresh all selected datasources.
+   */
+  function setupRefreshInterval(interval) {
+    refreshInterval = setInterval(function() { 
+      let dashboard = tableau.extensions.dashboardContent.dashboard;
+      dashboard.worksheets.forEach(function (worksheet) {
+        worksheet.getDataSourcesAsync().then(function (datasources) {
+          datasources.forEach(function (datasource) {
+             if (activeDatasourceIdList.indexOf(datasource.id) >= 0) {
+               datasource.refreshAsync();
+             }
+          });
+        });
+      });
+    }, interval*60*1000);
+  }
+
+  /**
+   * Called when the user clicks the pause button to terminate auto refreshes.
+   */
+  function pause() {
+    clearInterval(refreshInterval);
+    $('#active').hide();
+    $('#inactive').show();
+  }
+
+  /**
+   * Helper that is called to set state anytime the settings are changed.
+   */
+  function updateExtensionBasedOnSettings(settings) {
+    if (settings.selectedDatasources) {
+      activeDatasourceIdList = JSON.parse(settings.selectedDatasources);
+      $('#datasourceCount').text(activeDatasourceIdList.length);
+    }
+  }
+})();
diff --git a/Samples/UINamespace/uiNamespace.trex b/Samples/UINamespace/uiNamespace.trex
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest manifest-version="0.1" xmlns="http://wwww.tableau.com/xml/extension_manifest">
+  <dashboard-extension id="com.tableau.extensions.samples.uinamespace" extension-version="0.6.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>UI Namespace Sample</description>
+    <author name="tableau" email="github@tableau.com" organization="tableau" website="www.tableau.com"/>
+    <min-api-version>0.9</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples/UINamespace/uinamespace.html</url>
+    </source-location>
+    <icon>iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAlhJREFUOI2Nkt9vy1EYh5/3bbsvRSySCZbIxI+ZCKsN2TKtSFyIrV2WuRCJuBiJWxfuxCVXbvwFgiEtposgLFJElnbU1SxIZIIRJDKTrdu+53Uhra4mce7Oe57Pcz7JOULFisViwZ+29LAzOSjQYDgz1ZcCvWuXV11MJpN+OS/lm6179teqH0yDqxPTCyKSA8DcDsyOmOprnCaeP7459pdgy969i0LTC3IO/RQMyoHcQN+3cnljW3dNIFC47qDaK3g7BwdTkwBaBELT4ZPOUVWgKl4ZBnjxJPUlMDnTDrp0pmr6RHFeEjjcUUXPDGeSEwDN0Xg8sivxMhJNjGzbHd8PkM3eHRfkrBM5NkcQaY2vUnTlrDIA0NoaX+KLXFFlowr14tvVpqb2MICzmQcKqxvbumv+NAhZGCCIPwEw6QWXKYRL/VUXO0+rAUJiPwAk5MIlgVfwPjjHLCL1APmHN94ZdqeYN+NW/mn6I4BvwQYchcLnwFhJMDiYmlRxAzjpKWZkYkUCcZ2I61wi37tLbYyjiN0fHk5Oz3nGSLSzBbNHCF35R7f6K1/hN9PRhek11FrymfQQQKB4+Gl05P2qNRtmETlXW7e+b2z01dfycGNbfFMAbqNyKp9Jp4rzOT8RYFs0njJkc2iqsCObvTsOsDWWqA5C1uFy+Uz/oXJeKwVT4h0RmPUXhi79vuC0Ku6yOffTK3g9lfxfDQAisY516sg5kfOCiJk7HoLt2cf9b/9LANAc7dznm98PagG1fUOZ9IP5uMB8Q4CPoyNvausapkTt3rNMuvdf3C/o6+czhtdwmwAAAABJRU5ErkJggg==</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">UI Namespace Sample</text>
+    </resource>
+  </resources>
+</manifest>
diff --git a/Samples/UINamespace/uiNamespaceDialog.html b/Samples/UINamespace/uiNamespaceDialog.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Settings Sample</title>
+
+    <!-- jQuery -->
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
+
+    <!-- Extensions Library (this will be hosted on a CDN eventually) -->
+    <script src="../../lib/tableau-extensions-0.latest.js"></script>
+
+    <!-- Our extension's code -->
+    <script src="./uiNamespaceDialog.js"></script>
+  </head>
+  <body>
+    <div class="container">
+      <h4>Auto Data Source Refresh Extension</h4>
+      <p>
+        This Extension refreshes the selected datasources at the selected interval.
+      </p>
+      <hr />
+
+      <h5>Apply to these datasources: </h5>
+      <div style="margin-left: 14px" id="datasources">
+      </div>
+      <h5>Refresh interval in minutes:</h5>
+      <input style="margin-left: 14px" type="number" id="interval" name="quantity" min="1" max="60">
+
+      <hr />
+      <button id="closeButton">Start Auto Refresh</button>
+    </div>
+  </body>
+</html>