tableau · b-carver · Dec 10, 2021 · Oct 20, 2021 · Dec 10, 2021
diff --git a/Samples-Typescript/DashboardObjectVisibility/DashboardObjectVisibility.trex b/Samples-Typescript/DashboardObjectVisibility/DashboardObjectVisibility.trex
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
+  <dashboard-extension id="com.tableau.extensions.samples.dashboardobjectvisibility" extension-version="0.1.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>Dashboard Object Visibility Sample</description>
+    <author name="tableau" email="github@tableau.com" organization="tableau" website="https://www.tableau.com"/>
+    <min-api-version>1.7</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html</url>
+    </source-location>
+    <icon>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</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">Dashboard Object Visibility Sample</text>
+    </resource>
+  </resources>
+</manifest>
diff --git a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Dashboard Object Visibility 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>
+
+  <script src="../../lib/tableau.extensions.1.latest.js"></script>
+
+  <!-- Our extension's code -->
+  <script src="../../dist/dashboardObjectVisibility.js"></script>
+</head>
+<body>
+  <div class="container">
+    <h1>Dashboard Object Visibility Sample</h1>
+    <h3>Dashboard Content List</h3>
+    <div id="dashboard-object-list" class="container"></div>
+</body>
+</html>
diff --git a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx
@@ -0,0 +1,89 @@
+import { DashboardObject, TableauEvent } from '@tableau/extensions-api-types';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+// Wrap everything in an anonymous function to avoid polluting the global namespace
+(async () => {
+  interface IDashboardObjectVisibilityState {
+    dashboardObjects: DashboardObject[];
+    visiblityOverrides: Map<number, boolean>;
+  }
+
+  class DashboardObjectVisibility extends React.Component<{}, IDashboardObjectVisibilityState> {
+    public constructor(props = {}) {
+      super(props);
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      console.log(dashboard.objects);
+      this.state = { dashboardObjects: dashboard.objects, visiblityOverrides: new Map() };
+      dashboard.addEventListener(tableau.TableauEventType.DashboardLayoutChanged,
+        (event) => this.onDashboardLayoutChange(event));
+    }
+
+    public static async initializeAndRender(): Promise<void> {
+      // This is the entry point into the extension.  It initializes the Tableau Extensions Api, and then
+      // will create button elements to show/hide dashboard objects on the dashboard.
+      console.log('Initializing extension API');
+      await tableau.extensions.initializeAsync();
+
+      ReactDOM.render(<DashboardObjectVisibility></DashboardObjectVisibility>,
+        document.getElementById('dashboard-object-list'));
+    }
+
+    public render(): JSX.Element {
+      return <>
+        {this.state.dashboardObjects.map(dashboardObject => (
+          this.renderListItem(dashboardObject)
+        ))}
+      </>;
+    }
+
+    private renderListItem(dashboardObject: DashboardObject): JSX.Element {
+      const isVisible = this.getCurrentIsVisible(dashboardObject);
+      const buttonText = (isVisible ? 'Hide "' : 'Show "') + dashboardObject.name + '"';
+
+      return <li className='list-group-item list-group-item-primary'>
+        <button onClick={() => this.showHideDashboardObject(dashboardObject)}>{buttonText}</button>
+      </li>;
+    }
+
+    private getCurrentIsVisible(dashboardObject: DashboardObject): boolean {
+      if (this.state.visiblityOverrides.has(dashboardObject.id)) {
+        return this.state.visiblityOverrides.get(dashboardObject.id);
+      } else {
+        return dashboardObject.isVisible;
+      }
+    }
+
+    private onDashboardLayoutChange(event: TableauEvent): void {
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      this.setState({ dashboardObjects: dashboard.objects, visiblityOverrides: new Map() });
+    }
+
+    private showHideDashboardObject(dashboardObject: DashboardObject): void {
+      const currentIsVisible = this.getCurrentIsVisible(dashboardObject);
+      this.updateStateForVisiblityChange(dashboardObject, currentIsVisible);
+
+      const dashboardObjectVisibilityMap = new Map();
+      const newDashboardObjectVisibilityType = currentIsVisible ?
+        tableau.DashboardObjectVisibilityType.Hide : tableau.DashboardObjectVisibilityType.Show;
+
+      dashboardObjectVisibilityMap.set(dashboardObject.id, newDashboardObjectVisibilityType);
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      dashboard.setDashboardObjectVisibilityAsync(dashboardObjectVisibilityMap).then(() => {
+        console.log('Done changing dashboard object visiblity');
+      });
+    }
+
+    private updateStateForVisiblityChange(dashboardObject: DashboardObject, currentIsVisible: boolean): void {
+      const id = dashboardObject.id;
+      const newIsVisible = !currentIsVisible;
+      this.setState(prevState => {
+        const newVisiblityOverrides = new Map(prevState.visiblityOverrides);
+        newVisiblityOverrides.set(id, newIsVisible);
+        return { visiblityOverrides: newVisiblityOverrides };
+      });
+    }
+  }
+
+  await DashboardObjectVisibility.initializeAndRender();
+})();
diff --git a/Samples-Typescript/Formatting/formatting.tsx b/Samples-Typescript/Formatting/formatting.tsx
@@ -1,49 +1,65 @@
+import { TableauEvent } from '@tableau/extensions-api-types';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
 // Wrap everything in an anonymous function to avoid polluting the global namespace
 (async () => {
+  interface IFormattingState {
+    formattingUpdated: number;
+  }
+
+  class Formatting extends React.PureComponent<{}, IFormattingState> {
+    public constructor(props = {}) {
+      super(props);
+      this.state = { formattingUpdated: 0 };
+      tableau.extensions.dashboardContent.dashboard.addEventListener(tableau.TableauEventType.WorkbookFormattingChanged,
+        (event) => this.onWorkbookFormattingChanged(event));
+    }
 
-  class Formatting {
-    // This is the entry point into the extension.  It initializes the Tableau Extensions Api, and then
-    // will create elements with appropriate class names to get Tableau formatting
-    public async initialize() {
+    public static async initializeAndRender(): Promise<void> {
+      // This is the entry point into the extension.  It initializes the Tableau Extensions Api, and then
+      // will create elements with appropriate class names to get Tableau formatting
       console.log('Initializing extension API');
       await tableau.extensions.initializeAsync();
-      await this.Render();
+      ReactDOM.render(<Formatting></Formatting>, document.getElementById('formattingExample'));
+    }
+
+    private onWorkbookFormattingChanged(event: TableauEvent): void {
+      this.setState(prevState => {
+        return { formattingUpdated: prevState.formattingUpdated + 1 };
+      });
     }
 
-    private async Render() {
+    public render(): JSX.Element {
       if (tableau.extensions.environment.workbookFormatting) {
-        await this.RenderFormatting();
+        return this.renderFormatting();
       } else {
-        await this.RenderInfoMissing();
+        return this.renderInfoMissing();
       }
     }
 
-    private async RenderFormatting() {
+    private renderFormatting(): JSX.Element {
       const tooltipClassNames = 'tooltiptext ' + tableau.ClassNameKey.Tooltip;
+      const formattingChangedText = 'WorkbookFormattingChanged called ' + this.state.formattingUpdated + ' times';
 
-      ReactDOM.render(<>
+      return <>
         <h2 className={tableau.ClassNameKey.WorksheetTitle}>Subheader, using tableau-worksheet-title class</h2>
         <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>
+          <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'));
+        <text className={tableau.ClassNameKey.DashboardTitle}>{formattingChangedText}</text>
+      </>;
     }
 
-    private async RenderInfoMissing() {
+    private renderInfoMissing(): JSX.Element {
       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'));
+      return <div style={{ color: 'blue' }}>{message}</div>;
     }
   }
 
-  console.log('Initializing Formatting extension.');
-  await new Formatting().initialize();
+  await Formatting.initializeAndRender();
 })();
diff --git a/Samples/DashboardObjectVisibility/DashboardObjectVisibility.trex b/Samples/DashboardObjectVisibility/DashboardObjectVisibility.trex
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest manifest-version="0.1" xmlns="http://www.tableau.com/xml/extension_manifest">
+  <dashboard-extension id="com.tableau.extensions.samples.dashboardobjectvisibility" extension-version="0.1.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>Dashboard Object Visibility Sample</description>
+    <author name="tableau" email="github@tableau.com" organization="tableau" website="https://www.tableau.com"/>
+    <min-api-version>1.7</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html</url>
+    </source-location>
+    <icon>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</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">Dashboard Object Visibility Sample</text>
+    </resource>
+  </resources>
+</manifest>
diff --git a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Dashboard Object Visibility Sample</title>
+  <!-- jQuery -->
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+
+  <!-- React -->
+  <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.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>
+
+  <script src="../../lib/tableau.extensions.1.latest.js"></script>
+
+  <!-- Our extension's code -->
+  <script src="./dashboardObjectVisibility.js"></script>
+</head>
+<body>
+  <div class="container">
+    <h1>Dashboard Object Visibility Sample</h1>
+    <h3>Dashboard Content List</h3>
+    <div id="dashboard-object-list" class="container"></div>
+</body>
+</html>
diff --git a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js
@@ -0,0 +1,73 @@
+'use strict';
+var React;
+var ReactDOM;
+
+// Wrap everything in an anonymous function to avoid polluting the global namespace
+(async () => {
+  class DashboardObjectVisibility extends React.Component {
+    constructor (props = {}) {
+      super(props);
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      console.log(dashboard.objects);
+      this.state = { dashboardObjects: dashboard.objects, visiblityOverrides: new Map() };
+      dashboard.addEventListener(tableau.TableauEventType.DashboardLayoutChanged, (event) => this.onDashboardLayoutChange(event));
+    }
+
+    static async initializeAndRender () {
+      // This is the entry point into the extension.  It initializes the Tableau Extensions Api, and then
+      // will create button elements to show/hide dashboard objects on the dashboard.
+      console.log('Initializing extension API');
+      await tableau.extensions.initializeAsync();
+      ReactDOM.render(React.createElement(DashboardObjectVisibility, null), document.getElementById('dashboard-object-list'));
+    }
+
+    render () {
+      return React.createElement(React.Fragment, null, this.state.dashboardObjects.map(dashboardObject => (this.renderListItem(dashboardObject))));
+    }
+
+    renderListItem (dashboardObject) {
+      const isVisible = this.getCurrentIsVisible(dashboardObject);
+      const buttonText = (isVisible ? 'Hide "' : 'Show "') + dashboardObject.name + '"';
+      return React.createElement('li', { className: 'list-group-item list-group-item-primary' },
+        React.createElement('button', { onClick: () => this.showHideDashboardObject(dashboardObject) }, buttonText));
+    }
+
+    getCurrentIsVisible (dashboardObject) {
+      if (this.state.visiblityOverrides.has(dashboardObject.id)) {
+        return this.state.visiblityOverrides.get(dashboardObject.id);
+      } else {
+        return dashboardObject.isVisible;
+      }
+    }
+
+    onDashboardLayoutChange (event) {
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      this.setState({ dashboardObjects: dashboard.objects, visiblityOverrides: new Map() });
+    }
+
+    showHideDashboardObject (dashboardObject) {
+      const currentIsVisible = this.getCurrentIsVisible(dashboardObject);
+      this.updateStateForVisiblityChange(dashboardObject, currentIsVisible);
+      const dashboardObjectVisibilityMap = new Map();
+      const newDashboardObjectVisibilityType = currentIsVisible ? tableau.DashboardObjectVisibilityType.Hide
+       : tableau.DashboardObjectVisibilityType.Show;
+      dashboardObjectVisibilityMap.set(dashboardObject.id, newDashboardObjectVisibilityType);
+      const dashboard = tableau.extensions.dashboardContent.dashboard;
+      dashboard.setDashboardObjectVisibilityAsync(dashboardObjectVisibilityMap).then(() => {
+        console.log('Done changing dashboard object visiblity');
+      });
+    }
+
+    updateStateForVisiblityChange (dashboardObject, currentIsVisible) {
+      const id = dashboardObject.id;
+      const newIsVisible = !currentIsVisible;
+      this.setState(prevState => {
+        const newVisiblityOverrides = new Map(prevState.visiblityOverrides);
+        newVisiblityOverrides.set(id, newIsVisible);
+        return { visiblityOverrides: newVisiblityOverrides };
+      });
+    }
+  }
+
+  await DashboardObjectVisibility.initializeAndRender();
+})();