Updating formatting examples (#418)

Author: b-carver

Samples-Typescript/Formatting/formatting.tsx

@@ -14,18 +14,34 @@ import * as ReactDOM from 'react-dom';
     }
 
     private async Render() {
+      if (tableau.extensions.environment.workbookFormatting) {
+        await this.RenderFormatting();
+      } else {
+        await this.RenderInfoMissing();
+      }
+    }
+
+    private async RenderFormatting() {
       const tooltipClassNames = 'tooltiptext ' + tableau.ClassNameKey.Tooltip;
 
       ReactDOM.render(<>
         <h2 className={tableau.ClassNameKey.WorksheetTitle}>Subheader, using tableau-worksheet-title class</h2>
-        <text className={tableau.ClassNameKey.Worksheet}>Text, using worksheet class</text>
+        <text className={tableau.ClassNameKey.Worksheet}>Text, using tableau-worksheet class</text>
         <h3 className='tooltip-header'>Hover to see tooltip text, which is using tableau-tooltip class
             <span className={tooltipClassNames}>Tooltip text, using tableau-tooltip class</span>
         </h3>
         <li className={tableau.ClassNameKey.StoryTitle}>Bullet Point, using tableau-story-title class</li>
         <text className={tableau.ClassNameKey.DashboardTitle}>Text, using tableau-dashboard-title class</text>
       </>, document.getElementById('formattingExample'));
     }
+
+    private async RenderInfoMissing() {
+      const message = 'Tableau formatting information for extensions is missing from this version of Tableau.';
+
+      ReactDOM.render(<>
+        <div style={{color: 'blue'}}>{message}</div>
+      </>, document.getElementById('formattingExample'));
+    }
   }
 
   console.log('Initializing Formatting extension.');

Samples/Formatting/formatting.html

@@ -58,7 +58,7 @@
       <h1>Tableau Formatting Sample</h1>
       <button id="initTableauButton" class="btn btn-primary">Click to Initialize the Extension</button>
       <h2 class="tableau-worksheet-title">Subheader, using tableau-worksheet-title class</h2>
-      <text class="tableau-worksheet">Text, using worksheet class</text>
+      <text class="tableau-worksheet">Text, using tableau-worksheet class</text>
       <h3 class="tooltip-header">Hover to see tooltip text, which is using tableau-tooltip class
         <span class="tooltiptext tableau-tooltip">Tooltip text, using tableau-tooltip class</span>
       </h3>
@@ -77,13 +77,17 @@ <h3 class="tooltip-header">Hover to see tooltip text, which is using tableau-too
 <script>
   $("#initTableauButton").click(function () {
     tableau.extensions.initializeAsync().then(function () {
-      console.log("Done!!!");
+      console.log("initializeAsync finished");
       console.log(tableau.extensions.dashboardContent.dashboard);
-      console.log(tableau.extensions.environment.workbookFormatting.formattingSheets);
+      if (tableau.extensions.environment.workbookFormatting) {
+        console.log(tableau.extensions.environment.workbookFormatting.formattingSheets);
+        $('#initializeExtensionComment').hide();
+      } else {
+        $('#initializeExtensionComment').text('Tableau formatting information for extensions is missing from this version of Tableau');
+      }
       $('#initTableauButton').text('Extension Initialized');
-      $('#initializeExtensionComment').hide();
     }, function (err) {
-      console.log("Error!!!: " + err);
+      console.error("Error during initializeAsync: " + err);
     });
   })
   function toggleClassAndText(newClass) {
@@ -93,11 +97,11 @@ <h3 class="tooltip-header">Hover to see tooltip text, which is using tableau-too
     $('#toggleFormattingButton').text('Currently ' + newClass + ' below');
   }
   $('#toggleFormattingButton').click(function () {
-    if ($('#toggleFormattingButton').text().includes('tableau-worksheet-title')) {
-      toggleClassAndText('tableau-dashboard-title');
+    if ($('#toggleFormattingButton').text().includes(tableau.ClassNameKey.WorksheetTitle)) {
+      toggleClassAndText(tableau.ClassNameKey.DashboardTitle);
     }
     else {
-      toggleClassAndText('tableau-worksheet-title');
+      toggleClassAndText(tableau.ClassNameKey.WorksheetTitle);
     }
   })
 </script>