tableau · lbrendanl · Oct 5, 2017 · Oct 4, 2017 · Oct 4, 2017 · Oct 4, 2017
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Project Frelard
 
-![Image of T-Flex the T-Rex](./assets/tflx.png)
+![Image of Flex the T-Rex](./assets/flex.png)
 
 
 ## Setup and Running Samples

diff --git a/Samples/Parameters/parameters.html b/Samples/Parameters/parameters.html
@@ -15,15 +15,34 @@
     <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.6.0.js"></script>
+    <script src="../../lib/tableau-extensions-0.6.1.js"></script>
 
     <!-- Our extensions's code -->
     <script src="./parameters.js"></script>
   </head>
   <body>
     <div class="container">
-      <div>
-        <h1>Parameters Sample</h1>
+      <div id="parameters">
+        <h4>Parameters</h4>
+        <div class="table-responsive">
+          <table id="loading" class="table">
+            <tbody><tr><td>Initializing...</td></tr></tbody>
+          </table>
+          <table id="parameterTable" class="table table-striped hidden">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Data Type</th>
+                <th>Current Value</th>
+                <th>&nbsp;</th>
+              </tr>
+            </thead>
+            <tbody><!-- Stuff will be inserted here --></tbody>
+          </table>
+          <table id="addParameterWarning" class="table bg-danger hidden">
+            <tbody><tr><td>To use this extension, add a parameter to the workbook.</td></tr></tbody>
+          </table>
+        </div>
       </div>
     </div>
   </body>

diff --git a/Samples/Parameters/parameters.js b/Samples/Parameters/parameters.js
@@ -1 +1,100 @@
-//TODO
+'use strict';
+
+(function () {
+  $(document).ready(function () {
+    const table = $('#parameterTable');
+    const tableBody = table.children('tbody');
+
+    // This is the entry point into the extension.  It initializes the Tableau Extensions Api, and then
+    // grabs all of the parameters in the workbook, processing each one individually.
+    tableau.extensions.initializeAsync().then(function () {
+      tableau.extensions.dashboardContent.dashboard.getParametersAsync().then(function (parameters) {
+        parameters.forEach(function (p) {
+          p.addEventListener(tableau.TableauEventType.ParameterChanged, onParameterChange);
+          parameterRow(p).appendTo(tableBody);
+        });
+
+        // This is used to manipulate what part of the UI is visible.  If there are no parameters
+        // found, we want to give you a message to tell you that you need to add one, otherwise, we
+        // show the table we created.
+        $('#loading').addClass('hidden');
+        if (parameters.length === 0) {
+          $('#addParameterWarning').removeClass('hidden').addClass('show');
+        } else {
+          $('#parameterTable').removeClass('hidden').addClass('show');
+        }
+      });
+    });
+  });
+
+  // When the parameter is changed, we recreate the row with the updated values.  This keeps the code
+  // clean, and emulates the approach that something like React does where it "rerenders" the UI with
+  // the updated data.
+  //
+  // To avoid multiple layout processing in the browser, we build the new row unattached to the DOM,
+  // and then attach it at the very end.  This helps avoid jank.
+  function onParameterChange (parameterChangeEvent) {
+    parameterChangeEvent.getParameterAsync().then(function (param) {
+      const newRow = parameterRow(param);
+      const oldRow = $("tr[data-fieldname='" + param.id + "'");
+      oldRow.replaceWith(newRow);
+    });
+  }
+
+  //
+  // DOM creation methods
+  //
+
+  // A cell in the table
+  function cell (value) {
+    const row = $('<td>');
+    row.append(value);
+    return row;
+  }
+
+  // A simple cell that contains a text value
+  function textCell (value) {
+    const cellElement = $('<td>');
+    cellElement.text(value);
+    return cellElement;
+  }
+
+  // The allowable values column has a complex structure, so to make things easier/cleaner,
+  // this function creates the subtree for the value of the allowable values column.
+  function allowableValues (value) {
+    function termKey (key) {
+      return $('<dt>').attr('id', key).text(key);
+    }
+
+    function termValue (value, default_) {
+      return $('<dd>').text(value || default_);
+    }
+
+    const allowable = $('<dl class="dl-horizontal">');
+
+    if (value.type === 'all') {
+      allowable.append(termKey('Restrictions'));
+      allowable.append(termValue('None'));
+    } else {
+      allowable.append(termKey('Min Value'));
+      allowable.append(termValue(value.minValue._value, 'No Min'));
+      allowable.append(termKey('Max Value'));
+      allowable.append(termValue(value.maxValue._value, 'No Max'));
+      allowable.append(termKey('Step Size'));
+      allowable.append(termValue(value.maxValue.stepSize, 'default'));
+    }
+
+    return allowable;
+  }
+
+  // This function creates a subtree of a row for a specific parameter.
+  function parameterRow (p) {
+    let row = $('<tr>').attr('data-fieldname', p.id);
+    row.append(textCell(p.name));
+    row.append(textCell(p.dataType));
+    row.append(textCell(p.currentValue.formattedValue));
+    row.append(cell(allowableValues(p.allowableValues)));
+
+    return row;
+  }
+})();
diff --git a/assets/Frelard_addin3.gif b/assets/Frelard_addin3.gif
diff --git a/assets/tflx.png → assets/flex.png b/assets/tflx.png → assets/flex.png
diff --git a/assets/frelard_addins1.png b/assets/frelard_addins1.png