From a5a0ff690fcccd3dcc5545915e3ac137f4c462e3 Mon Sep 17 00:00:00 2001 From: Brian Date: Wed, 20 Oct 2021 14:42:03 -0700 Subject: [PATCH 1/2] dashboard object visibility and other samples --- .../DashboardObjectVisibility.trex | 19 ++++ .../dashboardObjectVisibility.html | 24 +++++ .../dashboardObjectVisibility.tsx | 90 +++++++++++++++++++ Samples-Typescript/Formatting/formatting.tsx | 51 +++++++---- .../DashboardObjectVisibility.trex | 19 ++++ .../dashboardObjectVisibility.html | 28 ++++++ .../dashboardObjectVisibility.js | 74 +++++++++++++++ Samples/Formatting/formatting.html | 8 +- webpack.config.js | 1 + 9 files changed, 296 insertions(+), 18 deletions(-) create mode 100644 Samples-Typescript/DashboardObjectVisibility/DashboardObjectVisibility.trex create mode 100644 Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html create mode 100644 Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx create mode 100644 Samples/DashboardObjectVisibility/DashboardObjectVisibility.trex create mode 100644 Samples/DashboardObjectVisibility/dashboardObjectVisibility.html create mode 100644 Samples/DashboardObjectVisibility/dashboardObjectVisibility.js diff --git a/Samples-Typescript/DashboardObjectVisibility/DashboardObjectVisibility.trex b/Samples-Typescript/DashboardObjectVisibility/DashboardObjectVisibility.trex new file mode 100644 index 00000000..14c8c3b8 --- /dev/null +++ b/Samples-Typescript/DashboardObjectVisibility/DashboardObjectVisibility.trex @@ -0,0 +1,19 @@ + + + + en_US + + Dashboard Object Visibility Sample + + 1.7 + + http://localhost:8765/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html + + 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 + + + + Dashboard Object Visibility Sample + + + diff --git a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html new file mode 100644 index 00000000..a577fef9 --- /dev/null +++ b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html @@ -0,0 +1,24 @@ + + + + Dashboard Object Visibility Sample + + + + + + + + + + + + + + +
+

Dashboard Object Visibility Sample

+

Dashboard Content List

+
+ + diff --git a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx new file mode 100644 index 00000000..b3fe9cf9 --- /dev/null +++ b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx @@ -0,0 +1,90 @@ +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; + } + + 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 { + // 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(, + 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
  • + +
    • ; + } + + 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 }; + }); + } + } + + console.log('Initializing DashboardObjectVisibility extension.'); + await DashboardObjectVisibility.initializeAndRender(); +})(); diff --git a/Samples-Typescript/Formatting/formatting.tsx b/Samples-Typescript/Formatting/formatting.tsx index e5bee6ad..39c978ff 100644 --- a/Samples-Typescript/Formatting/formatting.tsx +++ b/Samples-Typescript/Formatting/formatting.tsx @@ -1,49 +1,66 @@ +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 { + // 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(, 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 <>

    Subheader, using tableau-worksheet-title class

    Text, using tableau-worksheet class

    Hover to see tooltip text, which is using tableau-tooltip class - Tooltip text, using tableau-tooltip class + Tooltip text, using tableau-tooltip class

  • Bullet Point, using tableau-story-title class
    • Text, using tableau-dashboard-title class - , document.getElementById('formattingExample')); + {formattingChangedText} + ; } - private async RenderInfoMissing() { + private renderInfoMissing(): JSX.Element { const message = 'Tableau formatting information for extensions is missing from this version of Tableau.'; - ReactDOM.render(<> -
    {message}
    - , document.getElementById('formattingExample')); + return
    {message}
    ; } } console.log('Initializing Formatting extension.'); - await new Formatting().initialize(); + await Formatting.initializeAndRender(); })(); diff --git a/Samples/DashboardObjectVisibility/DashboardObjectVisibility.trex b/Samples/DashboardObjectVisibility/DashboardObjectVisibility.trex new file mode 100644 index 00000000..b754b272 --- /dev/null +++ b/Samples/DashboardObjectVisibility/DashboardObjectVisibility.trex @@ -0,0 +1,19 @@ + + + + en_US + + Dashboard Object Visibility Sample + + 1.7 + + http://localhost:8765/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html + + 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 + + + + Dashboard Object Visibility Sample + + + diff --git a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html new file mode 100644 index 00000000..e8916920 --- /dev/null +++ b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html @@ -0,0 +1,28 @@ + + + + Dashboard Object Visibility Sample + + + + + + + + + + + + + + + + + + +
    +

    Dashboard Object Visibility Sample

    +

    Dashboard Content List

    +
    + + diff --git a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js new file mode 100644 index 00000000..c217d474 --- /dev/null +++ b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js @@ -0,0 +1,74 @@ +'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 }; + }); + } + } + + console.log('Initializing DashboardObjectVisibility extension.'); + await DashboardObjectVisibility.initializeAndRender(); +})(); diff --git a/Samples/Formatting/formatting.html b/Samples/Formatting/formatting.html index cc0d6819..0dea014e 100644 --- a/Samples/Formatting/formatting.html +++ b/Samples/Formatting/formatting.html @@ -71,6 +71,7 @@

    Hover to see tooltip text, which is using tableau-too

    You will not see Tableau formatting until you have initialized the extension.
    +

    @@ -78,10 +79,15 @@

    Hover to see tooltip text, which is using tableau-too $("#initTableauButton").click(function () { tableau.extensions.initializeAsync().then(function () { console.log("initializeAsync finished"); - console.log(tableau.extensions.dashboardContent.dashboard); + const dashboard = tableau.extensions.dashboardContent.dashboard; + console.log(dashboard); if (tableau.extensions.environment.workbookFormatting) { console.log(tableau.extensions.environment.workbookFormatting.formattingSheets); $('#initializeExtensionComment').hide(); + dashboard.addEventListener(tableau.TableauEventType.WorkbookFormattingChanged, (event) => { + console.log(event.formatting); + $('#formattingUpdatedComment').text('Workbook formatting updated'); + }); } else { $('#initializeExtensionComment').text('Tableau formatting information for extensions is missing from this version of Tableau'); } diff --git a/webpack.config.js b/webpack.config.js index d6b90d05..91a521ca 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,6 +9,7 @@ module.exports = { filtering: './Samples-Typescript/Filtering/filtering.ts', formatting: './Samples-Typescript/Formatting/formatting.tsx', parameters: './Samples-Typescript/Parameters/parameters.ts', + dashboardObjectVisibility: './Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx', vizImage: './Samples-Typescript/VizImage/vizImage.ts', }, mode: 'production', From 15ceb0deaa06c867a870d238ceb5d1384128e286 Mon Sep 17 00:00:00 2001 From: Brian Date: Fri, 10 Dec 2021 10:37:36 -0800 Subject: [PATCH 2/2] Removing unnecessary comments and console.log statements --- .../DashboardObjectVisibility/dashboardObjectVisibility.html | 1 - .../DashboardObjectVisibility/dashboardObjectVisibility.tsx | 1 - Samples-Typescript/Formatting/formatting.tsx | 1 - Samples/DashboardObjectVisibility/dashboardObjectVisibility.html | 1 - Samples/DashboardObjectVisibility/dashboardObjectVisibility.js | 1 - 5 files changed, 5 deletions(-) diff --git a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html index a577fef9..778d911e 100644 --- a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html +++ b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.html @@ -9,7 +9,6 @@ - diff --git a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx index b3fe9cf9..7f097df3 100644 --- a/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx +++ b/Samples-Typescript/DashboardObjectVisibility/dashboardObjectVisibility.tsx @@ -85,6 +85,5 @@ import * as ReactDOM from 'react-dom'; } } - console.log('Initializing DashboardObjectVisibility extension.'); await DashboardObjectVisibility.initializeAndRender(); })(); diff --git a/Samples-Typescript/Formatting/formatting.tsx b/Samples-Typescript/Formatting/formatting.tsx index 39c978ff..7f205e87 100644 --- a/Samples-Typescript/Formatting/formatting.tsx +++ b/Samples-Typescript/Formatting/formatting.tsx @@ -61,6 +61,5 @@ import * as ReactDOM from 'react-dom'; } } - console.log('Initializing Formatting extension.'); await Formatting.initializeAndRender(); })(); diff --git a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html index e8916920..df5cc977 100644 --- a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html +++ b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.html @@ -13,7 +13,6 @@ - diff --git a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js index c217d474..3d472ba8 100644 --- a/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js +++ b/Samples/DashboardObjectVisibility/dashboardObjectVisibility.js @@ -69,6 +69,5 @@ var ReactDOM; } } - console.log('Initializing DashboardObjectVisibility extension.'); await DashboardObjectVisibility.initializeAndRender(); })();