Merge pull request #483 from tableau/dev

Merge dev with main for release 1.8.1

Author: elbandito

README.md

@@ -9,7 +9,7 @@ The Extensions API lets you do more without leaving Tableau. Build Tableau exten
 ## Setup and Running Samples
 
 ### Prerequisites
-* You must have Node.js and npm installed. You can get these from [http://nodejs.org](http://nodejs.org).
+* You must have Node.js and npm installed. You can get these from [https://nodejs.org](https://nodejs.org).
 
 ### Install Extensions API SDK Components and Start Server
 
@@ -35,15 +35,14 @@ The Extensions API lets you do more without leaving Tableau. Build Tableau exten
 
 ### Typescript Development
 Samples written in Typescript are located in the `Samples-Typescript` folder.
-If you want to use TypeScript to write your extensions, you can run a script that starts up the HTTP server and actively listens for changes to the `.ts` files located in the `Sample-Typescript` folder. You can then add your extension to the folder and use the script to transpile your extension to JavaScript.
+If you want to use TypeScript to write your extensions, you can run a script that starts up the HTTP server and actively listens for changes to the `.ts` files located in the `Samples-Typescript` folder. You can then add your extension to the folder and use the script to transpile your extension to JavaScript.
 
 * To start the the HTTP server and listen for changes to the `.ts` files.
 
     **npm run dev**
 
 For more information, see [Use TypeScript with the Extensions API](https://tableau.github.io/extensions-api/docs/trex_typescript.html).
 
-
 ### Sandboxed Extension Development Environment
 
 Tableau is introducing development support for Sandboxed Extensions with Tableau 2019.3. Sandboxed Extensions run in a virtual sandbox and ensure the extension can’t make network calls outside of the hosting Tableau Server. The Extensions API SDK provides a local development environment that replicates the Tableau Hosting Cloud Service for Sandboxed Extensions. You can test your Sandboxed extensions locally with the same sandbox policies.
@@ -56,22 +55,19 @@ Tableau is introducing development support for Sandboxed Extensions with Tableau
 
 For more information, see [Create and Test Sandboxed Extensions](https://tableau.github.io/extensions-api/docs/trex_sandbox_test.html).
 
+## Contributions
+Contributions and improvements by the community are welcomed!
+See the LICENSE file for current open-source licensing and use information.
 
-## Submissions
-We would love submissions to either the Docs or Sample code! To contribute, first sign our CLA that can be found [here](https://tableau.github.io/contributing.html).  To submit a contribution, please fork the repository then submit a pull request to the `submissions` branch.
+Before we can accept pull requests from contributors, we require a signed [Contributor License Agreement (CLA)](https://tableau.github.io/contributing.html). To submit a contribution, please fork the repository then submit a pull request to the `main` branch.
 
 ## Code Style
 Our sample code follows the [Semi-Standard Style](https://github.com/Flet/semistandard) for JavaScript samples linting and [tslint](https://palantir.github.io/tslint/) for TypeScript.  If you add your own extension code to the Samples or Samples-Typescript directories, you can run `npm run lint` to validate the style of your code.  Please run this command before submitting any pull requests for Sample code.
 
-## Contributions
-Code contributions and improvements by the community are welcomed!
-See the LICENSE file for current open-source licensing and use information.
-
-Before we can accept pull requests from contributors, we require a signed [Contributor License Agreement (CLA)](http://tableau.github.io/contributing.html).
+`npx semistandard --fix` to fix linting issues which can be fixed automatically.
 
 ## Documentation
 [Visit the project website and read the documentation here.](https://tableau.github.io/extensions-api/)
 
-
 ## Issues
-Use [Issues](https://github.com/tableau/ProjectFrelard/issues) to log any problems or bugs you encounter in the docs or sample  code. 
+Use [Issues](https://github.com/tableau/extensions-api/issues) to log any problems or bugs you encounter in the docs or sample code, or to discuss any proposed changes or additions.

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="[email protected]" 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>iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH4QgLDTYEcBRoeAAABp9JREFUeNrlm01sHEUWx//vVbs79gThjAd2iflIAkEcEARfEciBSYLEbbV8SJaDEpIAMQgkViuirA8IskKcdiEJX3G0C5dNpAVxQLIyiYw4YYIQBw4RBoMgBBIbCRtnOsx0vbcHd9sTZ3r8ge2p2bQ0B/+7unp+1dX/eX71ivL5TgAwAAQAxR/rsiYidvv2btq6ddcqVRwE8JCqgoigqgAAIvpKVbf29v51cHDwUxWRav2pWbdujcH04cUnPFc1EZGOjtv5hRdebv3tt9I+IupWVSaiGBxgJqhqlpnPj42NnchmsxpFUbX+mJORiE9E8eigorEzmohEHR23U1/fO63j47/+nYh2qqpJ4CcHgKEKMPOxIPBfef75PeUwDNPuoclozGxgXdMq4X/5ZWwfEe1Q1crZO/UKENGxIPCfKBbD4U2bNvo17qEeAHYJNA3+jjtuW2x4TgbAAmhyATRNy+XauK/vndaxsfEXFwk+0SIv/kNR/d2rOzwAc+TIu5ExnCeiR2vA9weB3zNXeM/zImutSUzQWfgYUpnNlapa6eCVP3slIjoShheGN2++Z1b4q6/+Q3T69Jng7Nlz0hAmODFxhq+4ol1S4AHAF5Fe3286u2PH1v5Dh9724nOX9Hf8+IfllpaWm8Mw3E2Eo4wGMMGVK1cLM6fBJ9q6cjna39W1c0tX14PW9/2q8JlMy01hGL4C4GlV/IsxHRnVHTRNi2G5BnyirbPWHty+vSe/YcOt5Pv+JfDFYrgfwBYAUNX1jGkTrDtoLU1E7CzwybEWwBsvvfSPe9evvxHGsKbAg4imwk1yBRTVTRCe5xlr7WzwibYGwOsHDry1O4qi/pnwAMDMEBEkL5YToGlaGP7E1tpaJlhNW2ut3e953rZiMfxnJXxlu4aIBJub/1gyxngiMlf4RLvRWnsQgF+tHRGp8yZYKAyUgiC4RVW75gmfaCtQ3UDLqnrUaRMsFAZKK1asuKVcLr+pqncuAD5NswAONzc3P+lsJDgD/q5Fhu/L5bJ/C8Nw1EkTXHr4tr3nzo2Obtx4NzlngssDPzKaz3d6xrBbJriM8E00mUayzvw7vEB4JaL3VfUDZjYARERgjGFrrY01FZGJtrZsoQI+ua9xIhJcKDwzHWU2T5dKpbP9/e/RNdes1h9++J7b26+TH388QwBw/fVrdGjoFJ869aXOgPcQJ0TQyPDd3Q+Pbtq0sQnTma0IF2e4Es2bCY965wQXA/67777nBX4XBlA/E6wzvEG8SFIXE3QAPtGWPyfoELyH+BXAZQq/vCboIPzymaCD8Mtngo7CJ9rSmqDj8Etrgg0Av3Qm2CDwS2OCDQK/NCbYQPCJtngm2IDwi2eCDQq/OCbYwPC/3wQbGD7dBEUkuuqqHHd0bLDbtj0iJ09+wu3t15XiFFM0mXY6zfff/+dSc3PDwieaoXy+M6mgrKzGWjU+Pp5nNq1xchEAWESsMcZYa4WZPVXtmseKjWvwF+cEK+vwkmosa22yNj8FlSxRz3Oh0kl4JCY4nyLEBWiuwk+a4PnzRXsZwk+ZIKlaam1dtSquvb1c4BONiJmzqvoiEe26zOA9ABER0X+I8CfVqcWE3wsPZnqf2ezq7n74Z5fhEQdCD4poNXgBcGEhAyKiH5TL5XOOwzMAZlWli+vtpwuPmflxAF/PdzYwM6dVajqkEQDLafBB4PdYa//d1OQ9parDc4WPD4n7dQG0lmbiJ6Uz4Z8oFsPhzZvv8ffs+Uu/MaYHwDdzhIeIYGLijFOFFymaXlQ9NbPeXkSijz/+xPT07DxGRI8T0bdzeRWMMbxy5WpxCDTdBIloSCR9s4G1loaGvsZzzz1zAsBjyUyoNRustXZGdUa9QWua4CPM/Krvp282KJVK3ueff6GHDx84bozZDWB4FhN0CbR2JLhly708PPytd+21qyNjTM2LiAiFwkDZ87xt1trXAATVZgMz77LWvpXPd85l20pdI0G21uratTfMCg8AhcJAOZNpucla+0AaPIBIRCYGB080hAl6ACAis15UreS8CrwFcLitLXu8UPgw2YvoAmjNSHDWJzUP+L5crm3vyMjoyMDAR67DT5ogZskJzhe+SilavUFrR4KYzglectGzzz4ZZTKZm4vF8NX/M/hEq7owwgCQybREvb37gmKxuBvAfcD0NpNKwwNwKJfLTpWfVoHnKl/CFU05fvoUN9D4ExWLIZ88+dkFIjoK4KsEXkSmBkBV/xsEwd6RkZ9H8/lOJiKN+7mkP1e1/wFtM6PWK/V/BwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0wOC0xMVQxMzo1NDowNC0wNDowMMrC9wEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMDgtMTFUMTM6NTQ6MDQtMDQ6MDC7n0+9AAAAAElFTkSuQmCC</icon>
+  </dashboard-extension>
+  <resources>
+    <resource id="name">
+      <text locale="en_US">Dashboard Object Visibility Sample</text>
+    </resource>
+  </resources>
+</manifest>

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>

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();
+})();

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();
 })();

Samples-Typescript/MoveAndResize/MoveAndResize.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.moveAndResize" extension-version="0.1.0">
+    <default-locale>en_US</default-locale>
+    <name resource-id="name"/>
+    <description>MoveAndResize Sample</description>
+    <author name="tableau" email="[email protected]" organization="tableau" website="https://www.tableau.com"/>
+    <min-api-version>1.7</min-api-version>
+    <source-location>
+      <url>http://localhost:8765/Samples-Typescript/MoveAndResize/moveandresize.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">MoveAndResize Sample</text>
+    </resource>
+  </resources>
+</manifest>