diff --git a/README.md b/README.md index 8feb9e51..f6928510 100644 --- a/README.md +++ b/README.md @@ -30,16 +30,16 @@ Github Actions are configured to automatically test for changes. For simple typo or wording fixes, you don't need a peer review - feel free to just go ahead and merge. For actual new content, we encourage to get at least one peer review. -The released or production documentation is served from the `main` branch. -Changes or updates should first be checked into the `dev` branch and then merged to `main` when ready for public release. +The released or production documentation is served from the `gh-pages` branch. +Changes or updates should first be checked into the `gh-pages-dev` branch and then merged to `gh-pages` when ready for public release. ### Deployment -As soon as your pull request to https://github.com/tableau/test-extensions-api is merged to `main`, the new web page will be deployed automatically within a couple of minutes. +As soon as your pull request to https://github.com/tableau/extensions-api is merged to `gh-pages`, the new web page will be deployed automatically within a couple of minutes. ### View the docs | Branch | URL | |---- |---- | -| `dev` | [https://d45.github.io/test-extensions-api/dev](https://d45.github.io/test-extensions-api/dev) | -| `main` | [https://d45.github.io/test-extensions-api](https://d45.github.io/test-extensions-api/) | +| `dev` | [https://tableau.github.io/extensions-api/gh-pages-dev](https://tableau.github.io/extensions-api/gh-pages-dev) | +| `main` | [https://tableau.github.io/textensions-api](https://tableau.github.io/extensions-api/) | diff --git a/website/docs/assets/viz_ext_marks_AddExt.png b/website/docs/assets/viz_ext_marks_AddExt.png index f1437e5e..69c76aea 100644 Binary files a/website/docs/assets/viz_ext_marks_AddExt.png and b/website/docs/assets/viz_ext_marks_AddExt.png differ diff --git a/website/docs/assets/viz_ext_marks_AddExt_old.png b/website/docs/assets/viz_ext_marks_AddExt_old.png new file mode 100644 index 00000000..f1437e5e Binary files /dev/null and b/website/docs/assets/viz_ext_marks_AddExt_old.png differ diff --git a/website/docs/assets/viz_ext_marks_icon.png b/website/docs/assets/viz_ext_marks_icon.png new file mode 100644 index 00000000..8e5fd9c1 Binary files /dev/null and b/website/docs/assets/viz_ext_marks_icon.png differ diff --git a/website/docs/core/trex_configure.md b/website/docs/core/trex_configure.md index f6bfc745..2a150033 100644 --- a/website/docs/core/trex_configure.md +++ b/website/docs/core/trex_configure.md @@ -80,7 +80,7 @@ $(document).ready(function () { // This uses the window.location.origin property to retrieve the scheme, hostname, and // port where the parent extension is currently running, so this string doesn't have // to be updated if the extension is deployed to a new location. - const popupUrl = `${window.location.origin}/Samples/UINamespace/uiNamespaceDialog.html`; + const popupUrl = `${window.location.origin}/Samples/Dashboard/UINamespace/uiNamespaceDialog.html`; // // ... // initial payload string value, `defaultIntervalInMin` set @@ -135,4 +135,4 @@ In your code to close the popup window, you must pass a *non-empty* string value ``` -To better understand how to use the context menu or configuration window, and to see it in action, check out the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/UINamespace?=target="_blank") sample. +To better understand how to use the context menu or configuration window, and to see it in action, check out the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/UINamespace?=target="_blank") sample. diff --git a/website/docs/core/trex_events.md b/website/docs/core/trex_events.md index a05a79be..4a5c8131 100644 --- a/website/docs/core/trex_events.md +++ b/website/docs/core/trex_events.md @@ -43,4 +43,4 @@ In most cases, you can create an event listener by chaining the methods to the s // ... ``` -For more information, check out the sample extension, [Filtering](https://github.com/tableau/extensions-api/tree/main/Samples/Filtering). +For more information, check out the sample extension, [Filtering](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/Filtering). diff --git a/website/docs/core/trex_format.md b/website/docs/core/trex_format.md index a5be1b78..68ab0091 100644 --- a/website/docs/core/trex_format.md +++ b/website/docs/core/trex_format.md @@ -89,6 +89,6 @@ For more information about using event listeners, see [Events and Event Handling ## What's Next -* To see a working sample dashboard extension that uses workbook formatting, see the JavaScript [Formatting](https://github.com/tableau/extensions-api/tree/main/Samples/Formatting) sample in the Samples folder, or the TypeScript [Formatting](https://github.com/tableau/extensions-api/tree/main/Samples-Typescript/Formatting) sample in the Samples-Typescript folder. +* To see a working sample dashboard extension that uses workbook formatting, see the JavaScript [Formatting](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/Formatting) sample in the Samples folder, or the TypeScript [Formatting](https://github.com/tableau/extensions-api/tree/main/Samples-Typescript/Dashboard/Formatting) sample in the Samples-Typescript folder. * For information about accessing the formatting styles in a workbook, see [workbookFormatting](pathname:///api/interfaces/environment.html#workbookformatting) in the API reference documentation. diff --git a/website/docs/core/trex_tableau_viz.md b/website/docs/core/trex_tableau_viz.md index b9d7130f..d2da348b 100644 --- a/website/docs/core/trex_tableau_viz.md +++ b/website/docs/core/trex_tableau_viz.md @@ -198,7 +198,7 @@ Now that you have seen the basic steps for adding a Tableau Viz to a dashboard e * Review the [`tableau.extensions.createVizImageAsync`](pathname:///api/interfaces/extensions#createvizimageasync) method for information about the API. -* Check out the [Tableau Viz Sample - VizImage](https://github.com/tableau/extensions-api/tree/main/Samples/VizImage) and see how it works. Examine the source code to find out ways you can incorporate Tableau Viz into your own dashboard extensions. +* Check out the [Tableau Viz Sample - VizImage](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/VizImage) and see how it works. Examine the source code to find out ways you can incorporate Tableau Viz into your own dashboard extensions. --- diff --git a/website/docs/core/trex_typescript.md b/website/docs/core/trex_typescript.md index 872d80fb..cbdf8693 100644 --- a/website/docs/core/trex_typescript.md +++ b/website/docs/core/trex_typescript.md @@ -89,10 +89,10 @@ In the HTML code for the extensions, the JavaScript files are referenced. The fo ```html - + - + ``` ## Related resources diff --git a/website/docs/dashext/trex_create.md b/website/docs/dashext/trex_create.md index 8c3ac514..3cc3265e 100644 --- a/website/docs/dashext/trex_create.md +++ b/website/docs/dashext/trex_create.md @@ -28,7 +28,7 @@ For convenience, you might want to create a folder for your "Hello World" dashbo The manifest file (`EXTENSION-NAME.trex`) is an XML file that describes the extension and provides information to register the extension with Tableau. For a description of the contents of this file, see [Elements of the manifest file](trex_manifest#elements-of-the-manifest-file). 1. In the `HelloDemo` folder (or where ever you want to put your files), create a manifest file for your extension. -Name the manifest file for your extension (for example, `HelloExtension` and save it with the file name extension `.trex`. +Name the manifest file for your extension (for example, `HelloExtension`) and save it with the file name extension `.trex`. 2. Copy the following XML code into your new file. Make sure that the `` declaration appears as the first element in the file (line 1, column 1). Any blank spaces in front of the declaration will cause an error when you load the extension. @@ -123,7 +123,7 @@ Your web application must include an HTML page. This page should link to the Ext The sample code includes a link to the JavaScript library (`tableau.extensions.1.latest.js`), which is available in the `/lib` folder. The sample code also includes links to jQuery and Bootstrap libraries. -3. If necessary, adjust the relative path to the Extensions API JavaScript library (`tableau.extensions.1.latest.js`), which is available in the `/lib` folder. +3. If necessary, adjust the relative path to the Extensions API JavaScript library (`tableau.extensions.1.latest.js`), which is available in the `/lib` folder. ```html @@ -242,8 +242,8 @@ You can also use the Tableau log files to identify issues, see [Use Log files to ## What's next? -- For more information about how you can use the Extensions API, go look at the [Samples](https://github.com/tableau/extensions-api/tree/master/Samples/) or follow the [Tutorial](https://github.com/tableau/extensions-api/tree/master/Tutorial/) and learn how to build a dashboard extension, step by step. +- For more information about how you can use the Extensions API to create dashboard extensions, go look at the [Samples](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/) or follow the [Tutorial](https://github.com/tableau/extensions-api/tree/master/Tutorial/Dashboard) and learn how to build a dashboard extension, step by step. -- Get familiar with the programming interface of the Extensions API, see API Reference. +- Get familiar with the programming interface of the Extensions API, see [API Reference](pathname:///api/). diff --git a/website/docs/dashext/trex_examples.md b/website/docs/dashext/trex_examples.md index 1c2b69b2..e14beb16 100644 --- a/website/docs/dashext/trex_examples.md +++ b/website/docs/dashext/trex_examples.md @@ -7,9 +7,9 @@ The best way to learn how to build your own extensions is to look at the sample - To download the Extensions API SDK, if you have not already done so, see [Get Started](./trex_getstarted). -- You can browse the sample code for the dashboard extensions in the [Samples](https://github.com/tableau/extensions-api/tree/master/Samples?=target="_blank") and the [Tutorial](https://github.com/tableau/extensions-api/tree/master/Tutorial?=target="_blank") folders on GitHub. +- You can browse the sample code for the dashboard extensions in the [Samples](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard?=target="_blank") and the [Tutorial](https://github.com/tableau/extensions-api/tree/master/Tutorial/Dashboard?=target="_blank") folders on GitHub. -- You can also create dashboard extensions using TypeScript. See the TypeScript sample code in [Samples-TypeScript](https://github.com/tableau/extensions-api/tree/master/Samples-Typescript?=target="_blank") on GitHub. +- You can also create dashboard extensions using TypeScript. See the TypeScript dashboard sample code in [Samples-TypeScript](https://github.com/tableau/extensions-api/tree/master/Samples-Typescript/Dashboard?=target="_blank") on GitHub. - You can also check out the dashboard extensions from the community, see [Community Extensions](pathname:///community/). @@ -20,47 +20,47 @@ The following instructions assume that you have already downloaded and extracted ### About the dashboard extension samples -The dashboard extension samples are in the `Samples` folder. There is also a step-by-step tutorial you can follow in the `Tutorial` folder. +The dashboard extension samples are in the `Samples/Dashboard` folder. There is also a step-by-step tutorial you can follow in the `Tutorial` folder. -The [Samples-Typescript](https://github.com/tableau/extensions-api/tree/master/Samples-Typescript) folder shows how you can use the Extensions API type definitions to create extensions in TypeScript. For more information, see [Use TypeScript with the Extensions API](../core/trex_typescript). +The [Samples-Typescript](https://github.com/tableau/extensions-api/tree/master/Samples-Typescript/Dashboard) folder shows how you can use the Extensions API type definitions to create extensions in TypeScript. For more information, see [Use TypeScript with the Extensions API](../core/trex_typescript). -- **[DataSources](https://github.com/tableau/extensions-api/tree/master/Samples/DataSources?=target="_blank")** +- **[DataSources](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/DataSources?=target="_blank")** Shows how to use the `getDataSourcesAsync` function to find the names of the data sources for each worksheet in the dashboard. Like the Filtering sample, the DataSources sample makes use the `Promise.all` function to combine the promises from the asynchronous calls together, and then waits for them to resolve. -- **[Filtering](https://github.com/tableau/extensions-api/tree/master/Samples/Filtering?=target="_blank")** +- **[Filtering](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/Filtering?=target="_blank")** Demonstrates how to use the `getFiltersAsync` function to find and display the active filters in the dashboard and calls the `addEventListener` function to set a `FilterChanged` event on each workbook in the dashboard. Any time a filter value is changed, the extension refreshes the table that displays the active filters. -- **[Parameters](https://github.com/tableau/extensions-api/tree/master/Samples/Parameters?=target="_blank")** +- **[Parameters](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/Parameters?=target="_blank")** Finds and displays all the parameters in the dashboard and then sets an event listener that waits for a parameter to change, which triggers a refresh. -- **[Settings](https://github.com/tableau/extensions-api/tree/master/Samples/Settings?=target="_blank")** +- **[Settings](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/Settings?=target="_blank")** Uses the `settings` namespace to save settings (key-value pairs) for the extension. Demonstrates how you can save settings for each instance of an extension, which enables sharing common views of a workbook. -- **[UINamespaces](https://github.com/tableau/extensions-api/tree/master/Samples/UINamespace?=target="_blank")** +- **[UINamespaces](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/UINamespace?=target="_blank")** Demonstrates how you can use the `UI` namespace to create a modal dialog box (or popup) that runs another extension, which allows users to interact and change the settings for the parent extension. This sample controls the background auto-refresh interval for data sources in a dashboard. -- **[Tutorial](https://github.com/tableau/extensions-api/tree/master/Tutorial?=target="_blank")** +- **[Tutorial](https://github.com/tableau/extensions-api/tree/master/Tutorial/Dashboard?=target="_blank")** Walks you through the step-by-step process of creating and refining an extension that displays a summarized table of the currently selected marks. -- **[Samples-Typescript](https://github.com/tableau/extensions-api/tree/master/Samples-Typescript?=target="_blank")** +- **[Samples-Typescript](https://github.com/tableau/extensions-api/tree/master/Samples-Typescript/Dashboard?=target="_blank")** The **Samples-Typescript** folder shows how you can use the Extensions API type definitions to create extensions in TypeScript. The sample extensions include TypeScript versions of many of the JavaScript samples. For more information, see [Use the TypeScript samples](#use-the-typescript-samples) and [Use TypeScript with the Extensions API](../core/trex_typescript). -- **[VizImage](https://github.com/tableau/extensions-api/tree/main/Samples/VizImage?=target="_blank")** +- **[VizImage](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/VizImage?=target="_blank")** Shows how you can use Tableau Viz to add visualizations to your dashboard extensions. This sample demonstrates the effects of different mark types and color palettes. For more information about Tableau Viz, see [Add Tableau Viz to Your Dashboard Extensions](../core/trex_tableau_viz). -- **[Formatting](https://github.com/tableau/extensions-api/tree/main/Samples/Formatting?=target="_blank")** +- **[Formatting](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/Formatting?=target="_blank")** Shows how you can access the CSS formatting in the Tableau workbook and apply it to the HTML elements in your dashboard extension. Create a consistent look and feel across the extension and the dashboard. @@ -94,16 +94,18 @@ To install the `http-server`on your computer globally and to also start the serv ```cli npm install http-server -g && http-server -p PORT ``` + If you have already installed `http-server`, you can start the server directly: ```cli http-server -p PORT -``` +``` + The port you use for the web server also has to match the port specified in the manifest file (`.trex`) for the server. ```html - http://localhost:PORT/samples/parameters/parameters.html + http://localhost:PORT/Samples/Dashboard/parameters/parameters.html ``` @@ -117,7 +119,7 @@ After you start the web server to host the sample extensions, you can try the ex 1. Start Tableau and open a workbook that has a dashboard, or open a workbook and create a new dashboard. 2. In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard. 3. In the **Choose an Extension** dialog box, click **My Extensions**. -4. Browse to the directory where the samples are located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples`. +4. Browse to the directory where the samples are located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples\Dashboard`. 5. Select one of the folders for the samples and open the `.trex` file (for example, `DataSources.trex`).
Every Tableau extension has a manifest file (`.trex`) that describes the extension and identifies the location of the web application. @@ -129,6 +131,8 @@ The extension should appear in the dashboard. Play around with the extension. E The TypeScript samples show how you can write your source code in TypeScript and then use the Extensions API type definitions to compile (or transpile) the code into JavaScript. The samples use Node.js and webpack to build the extensions. These instructions assume that you have cloned or downloaded the Extensions API GitHub repository. +### Build the samples + 1. Go to the `extensions-api` folder. 1. Install the web server components: @@ -139,24 +143,33 @@ The TypeScript samples show how you can write your source code in TypeScript and 1. Build the TypeScript samples: ```cli - npm run build + npm run build ``` Run lint with the semistandard package. ```cli - npm run lint + npm run lint ``` 1. Compile and start the HTTP server for the extensions. This command also watches the source file directories and automatically builds the samples when you make changes. -```cli -npm run dev -``` + ```cli + npm run dev + ``` + +### Try the samples + +1. Start Tableau and open a workbook that has a dashboard, or open a workbook and create a new dashboard. + +1. In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard. + +1. In the **Choose an Extension** dialog box, click **My Extensions**. + +1. Browse to the directory where the samples are located and add one of the extensions to the dashboard. + + For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples-Typescript\Dashboard`. The folder contains the TypeScript versions of the Datasources, Filtering, and Parameters samples. + +### Build your own extensions using TypeScript -1. Try the samples. - - Start Tableau and open a workbook that has a dashboard, or open a workbook and create a new dashboard. - - In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard. - - In the **Choose an Extension** dialog box, click **My Extensions**. - - Browse to the directory where the samples are located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples-Typescript`. The folder contains the TypeScript versions of the Datasources, Filtering, and Parameters samples. - - If you want to experiment with your own TypeScript code for extensions, you can use the same infrastructure that the TypeScript samples use. Create a folder in the **Samples-Typescript** directory and then add your extension source files. Add an entry to the `webpack.config.js` file for your extension TypeScript file. Update the path to your extension in the `.trex` file. Build and run your extension using the same commands you use to build the samples. For more information, see [Use TypeScript with the Extensions API](../core/trex_typescript). +If you want to experiment with your own TypeScript code for extensions, you can use the same infrastructure that the TypeScript samples use. Create a folder in the **Samples-Typescript** directory and then add your extension source files. Add an entry to the `webpack.config.js` file for your extension TypeScript file. Update the path to your extension in the `.trex` file. Build and run your extension using the same commands you use to build the samples. For more information, see [Use TypeScript with the Extensions API](../core/trex_typescript). diff --git a/website/docs/dashext/trex_getstarted.md b/website/docs/dashext/trex_getstarted.md index a1890929..4c0145d9 100644 --- a/website/docs/dashext/trex_getstarted.md +++ b/website/docs/dashext/trex_getstarted.md @@ -36,29 +36,30 @@ To use the dashboard extension samples, you need to start up a web server on you 1. Navigate to the `extensions-api-main` or `extensions-api` directory. -1. Navigate to the `extensions-api` directory. - -2. To install the web server components, run the following npm commands to install the package: - +2. To install the web server components, run the following npm command: **npm run build** - 3. To start the web server, run the following npm command: - + **npm start** The start command runs a script to start the web server over port `8765`. You only need to install the web server components the first time. Subsequently, you can just start the web server, using **npm start**. The start commands uses the npm [http-server](https://www.npmjs.com/package/http-server) package, a simple HTTP server that uses Node.js for serving static files to the browser. - | **Note:** The web server just serves the extension samples, which have URLs similar to the following: `http://localhost:8765/Samples/DataSources/datasources.html` This local web server is not intended to serve the Extensions API Help pages. View the Help on GitHub at [https://tableau.github.io/extensions-api](https://tableau.github.io/extensions-api). + | **Note:** The web server just serves the extension samples, which have URLs similar to the following: `http://localhost:8765/Samples/Dashboard/DataSources/datasources.html` This local web server is not intended to serve the Extensions API Help pages. View the Help on GitHub at [https://tableau.github.io/extensions-api](https://tableau.github.io/extensions-api). ---- ### Start Tableau and add an extension to the dashboard -1. Start Tableau and open a workbook that has a dashboard, or open a workbook and create a new dashboard. For example, you could use one of the Tableau sample workbooks like Superstore to start with. +1. Start Tableau Desktop, or sign in to Tableau Cloud or Tableau Server, and open a workbook that has a dashboard, or open a workbook and create a new dashboard. For example, you could use one of the Tableau sample workbooks like Superstore to start with. + + :::note + If you are using Tableau Cloud or Tableau Server to view the samples, you'll need to make sure that the extension is on the Allow list (safe list) for Tableau Server or Tableau Cloud. See [Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/online/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts) (Tableau Cloud) or [Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/server/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts) (Tableau Server). So you can use all the sample extensions, use the following URL and wildcard: `http://localhost:.*/Samples/.*` + ::: + 2. In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard. @@ -67,7 +68,7 @@ To use the dashboard extension samples, you need to start up a web server on you 3. In the **Add an Extension** dialog box, click **Access Local Extensions**. Every Tableau extension has a manifest file (`.trex`) that describes the extension and identifies the location of the web application. -4. Browse to the directory where the samples are located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples\DataSources`. +4. Browse to the directory where the samples are located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples\Dashboard\DataSources`. 5. Open the `DataSources.trex` file. The sample extension (web application) appears in the dashboard frame. The DataSources sample finds and displays the data source for each worksheet in the dashboard. @@ -82,7 +83,7 @@ To use the dashboard extension samples, you need to start up a web server on you Looking at the files that make up an extension will give you an idea of how an extension is constructed. -1. Browse to the directory where the DataSources sample is located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples\DataSources`. +1. Browse to the directory where the DataSources sample is located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples\Dashboard\DataSources`. 2. Open the `datasources.html` file in your favorite Text or Code editor. This HTML page provides the interface that users see when they load the extension. This file includes links to the Extensions API library file and to the file that contains all the JavaScript code for the extension. @@ -117,7 +118,7 @@ Looking at the files that make up an extension will give you an idea of how an e ```xml - http://localhost:8765/Samples/DataSources/datasources.html + http://localhost:8765/Samples/Dashboard/DataSources/datasources.html ``` @@ -125,7 +126,7 @@ Looking at the files that make up an extension will give you an idea of how an e ```xml - http://localhost:8765/_your-new-folder-here_/DataSources/datasources.html + http://localhost:8765/Samples/_your-new-folder-here_/DataSources/datasources.html ``` @@ -140,9 +141,9 @@ You can add multiple instances of an extension to a dashboard or to multiple das ## What's next? -* Start developing your extension by modifying an existing sample. See [samples (GitHub)](https://github.com/tableau/extensions-api/tree/master/Samples/). If you cloned or downloaded the repository, create a copy of the Samples directory. For example, if you make the copy in `\extensions-api\` directory, and call it `MySamples`, you just need to modify the URL in the `.trex` files so that you host the extensions using the same web server you created with `npm start` command. +* Start developing your extension by modifying an existing dashboard sample. See [samples (GitHub)](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/). If you cloned or downloaded the repository, create a copy of the Samples directory. For example, if you make the copy in `\extensions-api\` directory, and call it `MySamples`, you just need to modify the URL in the `.trex` files so that you host the extensions using the same web server you created with `npm start` command. -* Follow the [Tutorial (GitHub)](https://github.com/tableau/extensions-api/tree/master/Tutorial) and learn how to build a dashboard extension, step by step. If you downloaded or cloned the repository, look in the `Tutorial` folder on your computer. +* Follow the [Tutorial (GitHub)](https://github.com/tableau/extensions-api/tree/master/Tutorial/Dashboard) and learn how to build a dashboard extension, step by step. If you downloaded or cloned the repository, look in the `Tutorial` folder on your computer. * For information about creating a simple "Hello World" Tableau extension, see [Create a "Hello World" Dashboard Extension](./trex_create). diff --git a/website/docs/dashext/trex_overview.md b/website/docs/dashext/trex_overview.md index 85135960..d0a5230c 100644 --- a/website/docs/dashext/trex_overview.md +++ b/website/docs/dashext/trex_overview.md @@ -27,23 +27,21 @@ Plenty! Using the Extensions API, you can create dashboard extensions that enabl The Extensions API is a JavaScript library that you link to from your web application. The Extensions API library (`tableau.extensions.n.n.n.js`) gives your application access to Tableau dashboard content, including worksheets, filters, marks, and parameters. In your JavaScript code, you can set up event listeners to get notified when events occur on the dashboard. You can use the Extensions API to apply filters, or to get data back from selected marks in a worksheet. -For more information about how you can use Extensions API, go look at the [Samples](https://github.com/tableau/extensions-api/tree/master/Samples/). - -## Comparing the Extensions API and the Embedding JavaScript API - -The Dashboard Extensions API and the [Tableau Embedding API v3](https://help.tableau.com/current/api/embedding_api/en-us/index.html)) are both JavaScript libraries that allow you to interact with Tableau, but they do so in two fundamental ways: -* You can use the Embedding JavaScript API for embedding Tableau dashboards in web pages (for example, blog posts), or in line of business applications. -* You can use the Extensions API for integrating web applications into zones in Tableau dashboards. +For more information about how you can use the Extensions API, go look at the dashboard [Samples](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard). +## Comparing the Tableau Extensions API and the Tableau Embedding API +The Dashboard Extensions API and the [Tableau Embedding API v3](https://help.tableau.com/current/api/embedding_api/en-us/index.html) are both JavaScript libraries that allow you to interact with Tableau, but they do so in two different fundamental ways: +* You can use the Embedding API for embedding Tableau dashboards in web pages (for example, blog posts), or in line of business applications. +* You can use the Extensions API for integrating web applications into zones in Tableau dashboards. The Extensions API and Embedding JavaScript API share a similar programming model, but there are differences. -| Embedding JavaScript API | Extensions API | +| Embedding API | Extensions API | |------------| ---------------| -|Brings Tableau into other web applications | Brings other web applications into Tableau | -| Requires embedding Tableau dashboard into a web page | Can be used in Desktop, Server, Online, or embedded dashboard | -| Custom-built for each embedded scenario | Can be made as a re-usable, generic-built dashboard component | +| Brings Tableau into other web applications | Brings other web applications into Tableau | +| Embeds Tableau views, Tableau Pulse into web pages and applications | Can be used in Desktop, Server, Online, or embedded dashboard | +| Custom-built for each embedded scenario | Can be made as a re-usable, generic-built dashboard component | | Written in JavaScript | Written in JavaScript (similar calls) | diff --git a/website/docs/debug/trex_debug_server.md b/website/docs/debug/trex_debug_server.md index f39efbc3..777e0800 100644 --- a/website/docs/debug/trex_debug_server.md +++ b/website/docs/debug/trex_debug_server.md @@ -107,12 +107,11 @@ To temporarily get around these safety settings for the session, you can click t ![alt text](../assets/online_blocked_extension.png "Chrome browser showing alert when extension running on a localhost server") - During the session, anytime you refresh or reload the web page, you will see the extensions dialog box requesting permission to run. And in the debugger console, you might see a warning message about mixed content. ```cli -Mixed Content: The page at 'https:/some_URLs#4' was loaded over HTTPS, but requested an insecure resource 'http://localhost:8765/Samples/Filtering/filtering.html'. This content should also be served over HTTPS. +Mixed Content: The page at 'https:/some_URLs#4' was loaded over HTTPS, but requested an insecure resource 'http://localhost:8765/Samples/Dashboard/Filtering/filtering.html'. This content should also be served over HTTPS. ``` diff --git a/website/docs/debug/trex_error_handling.md b/website/docs/debug/trex_error_handling.md index 6e682ebb..9921269b 100644 --- a/website/docs/debug/trex_error_handling.md +++ b/website/docs/debug/trex_error_handling.md @@ -14,7 +14,7 @@ As you create your extension, you want to be sure to catch potential error condi ## Handle extensions.ui dialog box errors -For an example of how to handle an extension dialog box error, see the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/UINamespace) sample. The sample shows how you could handle the error condition that occurs if a user dismisses a modal dialog box (`DialogClosedByUser`). In this extension, the user is expected to click the **Start Auto Refresh** button, which saves the configuration settings and closes the dialog box, by calling the `tableau.extensions.ui.closeDialog()` method with the return payload. If a user clicks the dialog box control (the **X** in the upper-right corner) instead, the error occurs. The following snippet illustrates how you could handle this error: +For an example of how to handle an extension dialog box error, see the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/Dashhboard/UINamespace) sample. The sample shows how you could handle the error condition that occurs if a user dismisses a modal dialog box (`DialogClosedByUser`). In this extension, the user is expected to click the **Start Auto Refresh** button, which saves the configuration settings and closes the dialog box, by calling the `tableau.extensions.ui.closeDialog()` method with the return payload. If a user clicks the dialog box control (the **X** in the upper-right corner) instead, the error occurs. The following snippet illustrates how you could handle this error: ```javascript diff --git a/website/docs/installation.md b/website/docs/installation.md index 6c1588e0..43d6ee86 100644 --- a/website/docs/installation.md +++ b/website/docs/installation.md @@ -18,7 +18,7 @@ This section will take you through the process of setting up your environment to :::info **What's in a Tableau extension?** -A Tableau extension consists of an XML manifest file (`.trex`), an web page (`.html`) that uses a Tableau-provided JavaScript library, and the JavaScript file (`.js`) (or files) that contain your extension logic. The Tableau dashboard and viz extensions are supported on Tableau Server and Tableau Cloud. Tableau dashboard extensions are also supported in Tableau Desktop. +A Tableau extension consists of an XML manifest file (`.trex`), an web page (`.html`) that uses a Tableau-provided JavaScript library, and the JavaScript file (`.js`) (or files) that contain your extension logic. The Tableau dashboard and viz extensions are supported on Tableau Server, Tableau Cloud, and Tableau Desktop. ::: @@ -31,7 +31,7 @@ If you want to create an extension or work with the sample code, make sure you h * [Git](https://git-scm.com/downloads) * [Node.js and npm](https://nodejs.org/en/download/) -You need Node.js and npm to run the viz extension demos. Node.js is a JavaScript runtime. npm is a package manager for Node.js and is installed when you install Node.js. +You need Node.js and npm to run the viz and dashboard extension demos. Node.js is a JavaScript runtime. npm is a package manager for Node.js and is installed when you install Node.js. --- @@ -78,7 +78,7 @@ SSH ### Requirements for using extensions in Tableau -To use Tableau dashboard and viz extensions in Tableau, you need the following versions of Tableau. +To use Tableau dashboard and viz extensions in Tableau, you need one of the following versions of Tableau. For dashboard extensions: @@ -88,8 +88,10 @@ For dashboard extensions: For viz extensions: +* Tableau Desktop 2024.1 and later +* Tableau Server 2024.1 and later * Tableau Cloud -* Tableau Server 2024.1 + ### Security requirements diff --git a/website/docs/security/trex_sandbox_test.md b/website/docs/security/trex_sandbox_test.md index e6fd431a..2e217d19 100644 --- a/website/docs/security/trex_sandbox_test.md +++ b/website/docs/security/trex_sandbox_test.md @@ -75,7 +75,7 @@ The Extensions API GitHub project provides an example of a Sandboxed Extension. 2. In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard. -3. In the **Choose an Extension** dialog box, click **My Extensions**, and then navigate to the `Extensions API\Samples\UINamespace-sandboxed` folder. Open the `uiNamespace.trex` file. +3. In the **Choose an Extension** dialog box, click **My Extensions**, and then navigate to the `Extensions API\Samples\Dashboard\UINamespace-sandboxed` folder. Open the `uiNamespace.trex` file. The sample extension (web application) appears in the dashboard frame. The UINamespace-sandboxed sample finds and displays the data source for each worksheet in the dashboard and lets you configure the refresh rate. The **UINamespace-sandboxed** sample is a *sandboxed* version of the Network Enabled Extension, UINamespace sample. You can compare the source files for both extensions to better understand the differences and to see what it takes to port existing extensions (Network Enabled) to be Sandboxed Extensions. The sample extension makes use of a popup dialog box for configuration. @@ -101,7 +101,7 @@ If you have an extension that is ready to test in the sandbox, follow these inst "extensions": { "uinamespace": { - "path": "./Samples/UINamespace-sandboxed" + "path": "./Samples/Dashboard/UINamespace-sandboxed" } } } @@ -128,7 +128,7 @@ If you have an extension that is ready to test in the sandbox, follow these inst For example, the default value for port is `8765`. If the name of the extension is `uninamespace`, that name becomes part of the URL that you specify in the `.trex` file: `http://localhost:8765/sandbox/uinamespace/`. Note that in the `.trex` file the full URL also includes the name of the web page in the URL. An implied `index.html` does not work. - For the `"path"` value, provide the relative or absolute path to the folder on your computer that contains your extension web page and source files. The path is relative to the `extensions-api` parent folder. For example, the `uinamespace` sample is in the `.\Samples\UINamespace-sandboxed` folder. + For the `"path"` value, provide the relative or absolute path to the folder on your computer that contains your extension web page and source files. The path is relative to the `extensions-api` parent folder. For example, the `uinamespace` sample is in the `.\Samples\Dashboard\UINamespace-sandboxed` folder. The following example adds an extension called `helloworld` that has its source files in the `./mySamples/HelloWorld` folder. You can enter multiple extensions. Be sure to separate each entry with a comma (,). @@ -138,7 +138,7 @@ If you have an extension that is ready to test in the sandbox, follow these inst "extensions": { "uinamespace": { - "path": "./Samples/UINamespace-sandboxed" + "path": "./Samples/Dashboard/UINamespace-sandboxed" }, "helloworld": { "path": "./mySamples/HelloWorld" diff --git a/website/docs/trex_api_about.md b/website/docs/trex_api_about.md index 826546de..f3a366a8 100644 --- a/website/docs/trex_api_about.md +++ b/website/docs/trex_api_about.md @@ -57,7 +57,7 @@ The dashboard extension is one type of extension in the Tableau extensions names ``` -After the extension is initialized, it provides access to the objects in the dashboard, but also has access to the namespaces that are common to all extensions. For example, you can use the `tableau.extensions.environment` to query the environment the dashboard is running in, or `tableau.extensions.settings` to set or get key-value pairs associated with the extension. The `tableau.extensions.settings` can be saved with the workbook, so you can configure the dashboard and the extension in specific ways and then share that configuration with others. +After the extension is initialized, it provides access to the objects in the dashboard, but also has access to the namespaces that are common to all extensions. For example, you can use the `tableau.extensions.environment` to query the environment the dashboard is running in, or `tableau.extensions.settings` to set or get key-value pairs associated with a specific instance of the extension. That is, an extension that has been added to one dashboard can have different settings from another instance of the extension in another dashboard. The `tableau.extensions.settings` can be saved with the workbook, so you can configure the dashboard and the extension in specific ways and then share that configuration with others. To access the objects in the dashboard, you specify the namespace reserved for dashboard extensions `dashboardContent`, which then gives you access to the dashboard object. For example, the following code snippet gets the array of worksheets in the dashboard. @@ -86,7 +86,7 @@ The viz extension is another type of extension in the Tableau extensions namespa ``` -After the viz extension is initialized, it provides access to the objects in the worksheet, but also has access to the namespaces that are common to all extensions. For example, you can use the `tableau.extensions.environment` to query the environment the extension is running in, or `tableau.extensions.settings` to set or get key-value pairs associated with the extension. The `tableau.extensions.settings` can be saved with the workbook, so you can configure the viz extension in specific ways and then share that configuration with others. +After the viz extension is initialized, it provides access to the objects in the worksheet, but also has access to the namespaces that are common to all extensions. For example, you can use the `tableau.extensions.environment` to query the environment the extension is running in, or `tableau.extensions.settings` to set or get key-value pairs associated with the extension. That is, an extension that has been added to one worksheet can have different settings from another instance of the extension in another worksheet. The `tableau.extensions.settings` can be saved with the workbook, so you can configure the viz extension in specific ways and then share that configuration with others. To access the properties and methods in the worksheet, you specify the namespace used by viz extensions, `worksheetContent`, which then gives you access to the worksheet object. For example, the following code snippet gets the worksheet in the dashboard. diff --git a/website/docs/trex_release-notes.md b/website/docs/trex_release-notes.md index 1610d7bd..40e84158 100644 --- a/website/docs/trex_release-notes.md +++ b/website/docs/trex_release-notes.md @@ -48,7 +48,7 @@ What's new in this release: * Use the [`Worksheet.hoverTupleAsync`](pathname:///api/interfaces/worksheet.html#hovertupleasync) method to display a tooltip for the marks currently hovered over. - For an example of how you can use these methods, see the [Sankey](https://github.com/tableau/extensions-api-preview/tree/main/Samples/Sankey?=target="_blank") viz extension sample. + For an example of how you can use these methods, see the [Sankey](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/Sankey?=target="_blank") viz extension sample. Also in this release: @@ -120,7 +120,7 @@ For more information, see [Get Data from the View](./core/trex_getdata). * The [UI.displayDialogAsync](pathname:///api/interfaces/ui.html#displaydialogasync) now supports different dialog styles (window, modal or modeless dialog boxes). -* Adds support for annotating marks with [Worksheet.annotateMarkAsync](pathname:///api/interfaces/worksheet.html#annotatemarkasync), [Worksheet.getAnnotationsAsync](pathname:///api/interfaces/worksheet.html#getannotationsasync), and [Worksheet.removeAnnotationAsync](pathname:///api/interfaces/worksheet.html#removeannotationasync). See the code sample, [Annotation](https://github.com/tableau/extensions-api/tree/dev/Samples/Annotation) (on GitHub). +* Adds support for annotating marks with [Worksheet.annotateMarkAsync](pathname:///api/interfaces/worksheet.html#annotatemarkasync), [Worksheet.getAnnotationsAsync](pathname:///api/interfaces/worksheet.html#getannotationsasync), and [Worksheet.removeAnnotationAsync](pathname:///api/interfaces/worksheet.html#removeannotationasync). See the code sample, [Annotation](https://github.com/tableau/extensions-api/tree/dev/Samples/Dashboard/Annotation) (on GitHub). --- @@ -142,7 +142,7 @@ About this release: * Added support for [`Worksheet.applyRelativeDateFilterAsync()`](pathname:///api/interfaces/worksheet.html#applyrelativedatefilterasync). -* Starting with this release, you can now load Benton Sans fonts and Tableau fonts by default during extension initialization. You can set the Tableau and Benton Sans fonts in the style portion of your extension. To see how you can use the fonts in a dashboard extension, see the [Formatting](https://github.com/tableau/extensions-api/tree/master/Samples/Formatting?=target="_blank") sample. +* Starting with this release, you can now load Benton Sans fonts and Tableau fonts by default during extension initialization. You can set the Tableau and Benton Sans fonts in the style portion of your extension. To see how you can use the fonts in a dashboard extension, see the [Formatting](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/Formatting?=target="_blank") sample. ```css @@ -253,7 +253,7 @@ About this release: ``` - You can access the formatting in the Tableau workbook from `tableau.extensions.environment.workbookFormatting`. The property `formattingSheets` contains the array of CSS properties for the workbook, organized by `ClassNameKey`. For more information about using workbook formatting, see the [Formatting](https://github.com/tableau/extensions-api/tree/main/Samples/Formatting). sample in the Samples folder. Also see [Add Tableau Workbook Formatting](./core/trex_format). + You can access the formatting in the Tableau workbook from `tableau.extensions.environment.workbookFormatting`. The property `formattingSheets` contains the array of CSS properties for the workbook, organized by `ClassNameKey`. For more information about using workbook formatting, see the [Formatting](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/Formatting). sample in the Samples folder. Also see [Add Tableau Workbook Formatting](./core/trex_format). * You can now set an event listener on changes to the dashboard layout and to the dashboard formatting. The new event types are `DashboardLayoutChanged` and `WorkbookFormattingChanged`. @@ -289,7 +289,7 @@ Starting with version 1.6 of the Dashboard Extensions API library and Tableau 20 For more information about using Tableau Viz, see:
- [Add Tableau Viz to Your Dashboard Extensions](./core/trex_tableau_viz) - [Tableau Viz Reference](./trex_tableau_viz_ref) - - [Tableau Viz Sample - VizImage](https://github.com/tableau/extensions-api/tree/main/Samples/VizImage). + - [Tableau Viz Sample - VizImage](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/VizImage). New Dashboard Extension API methods in this release: @@ -666,7 +666,7 @@ Bug fixes: Updates in this release: -- New *configure feature*, which allows you to register a custom JavaScript callback for a context menu item in the extension zone. See [Adding a configuration dialog box](#adding-a-configuration-menu-item) and the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/UINamespace?=target="_blank") sample. +- New *configure feature*, which allows you to register a custom JavaScript callback for a context menu item in the extension zone. See [Adding a configuration dialog box](#adding-a-configuration-menu-item) and the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/UINamespace?=target="_blank") sample. - A fix for a problem that existed in the 0.9.0 release that caused extension initialization to break on Tableau Server. @@ -735,7 +735,7 @@ $(document).ready(function () { }); } ``` -To better understand how to use the context menu, and to see it in action, check out the updated [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/UINamespace?=target="_blank") sample. +To better understand how to use the context menu, and to see it in action, check out the updated [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/UINamespace?=target="_blank") sample. --- @@ -756,9 +756,9 @@ Updates in this release: #### Updates to the UI namespace - This preview release introduces more options for the UI namespace. You can now control the initial sizing (height, width) of a modal dialog box (or *popup*). The modal dialog itself is an extension. Using the `displayDialogAsync()` and `closeDialog()` methods you can pass payloads between the calling extension and the extension running in the modal dialog box. For an example of how you can use the UI namespace to create a configuration dialog box, see the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/UINamespace?=target="_blank") sample. The sample also shows how to use the settings event to capture the new configuration. The sample source code has extensive comments that describe how to use these new features in the Extensions API. + This preview release introduces more options for the UI namespace. You can now control the initial sizing (height, width) of a modal dialog box (or *popup*). The modal dialog itself is an extension. Using the `displayDialogAsync()` and `closeDialog()` methods you can pass payloads between the calling extension and the extension running in the modal dialog box. For an example of how you can use the UI namespace to create a configuration dialog box, see the [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/UINamespace?=target="_blank") sample. The sample also shows how to use the settings event to capture the new configuration. The sample source code has extensive comments that describe how to use these new features in the Extensions API. -- New sample: [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/UINamespace?=target="_blank") +- New sample: [UINamespace](https://github.com/tableau/extensions-api/tree/master/Samples/Dashboard/UINamespace?=target="_blank") #### Permissions added to access full data @@ -805,7 +805,7 @@ Errors that are returned from the Extensions API are custom Tableau Error object The Extensions API wraps the standard error object with an `errorCode` property. Any time you encounter an error when you are developing your extension, you can look at this `errorCode` to determine the cause. See [Error Codes](pathname:///api/enums/tableau.errorcodes.html). -For an example of how to handle error conditions, see the [UINamespace](https://github.com/tableau/extensions-api/tree/main/Samples/UINamespace?=target="_blank") sample. The sample shows how you could handle the error condition that occurs if a user dismisses a modal dialog box (`DialogClosedByUser`). The following snippet illustrates this pattern: +For an example of how to handle error conditions, see the [UINamespace](https://github.com/tableau/extensions-api/tree/main/Samples/Dashboard/UINamespace?=target="_blank") sample. The sample shows how you could handle the error condition that occurs if a user dismisses a modal dialog box (`DialogClosedByUser`). The following snippet illustrates this pattern: ```javascript tableau.extensions.ui.displayDialogAsync(args... ).then((args... ) => { diff --git a/website/docs/vizext/trex_viz_create.md b/website/docs/vizext/trex_viz_create.md index 27a3d53f..5d49368b 100644 --- a/website/docs/vizext/trex_viz_create.md +++ b/website/docs/vizext/trex_viz_create.md @@ -21,7 +21,7 @@ To create a Tableau viz extension you need the following components. These instructions assume that you have already cloned or download the Extensions API SDK. For information about setting up your environment and the Tableau requirements, see [Get Started](./trex_viz_getstarted). -For convenience, you might want to create a folder for your "Hello World" viz extension in the same location where you installed or cloned the GitHub repository. Create your folder, for example, **HelloVizExtension** in the Samples folder, under `/extensions-api-preview`. That way, you can use the same web server (`http-server`) that is used for the samples. +For convenience, you might want to create a folder for your "Hello World" viz extension in the same location where you installed or cloned the GitHub repository. Create your folder, for example, **HelloVizExtension** in the Samples folder, under `/extensions-api/Samples`. That way, you can use the same web server (`http-server`) that is used for the samples. --- @@ -63,7 +63,7 @@ Name the manifest file for your extension (for example, `HelloVizExtension` and - In this file, you need to provide values for a few elements. Some key pieces are: - For `` use reverse domain name notation to uniquely identify the extension (`com.example.extension.hello.demo`) -- For `` make sure that this specifies the URL of your web application. You must use the HTTPS protocol. The exception to this requirement is `localhost`, where you can use HTTP. For example, if you created a `HelloVizDemo` folder and want to host the file locally on your computer using port 8765, you might use: `http://localhost:8765/HelloVizDemo/HelloVizExtension.html` +- For `` make sure that this specifies the URL of your web application. You must use the HTTPS protocol. The exception to this requirement is `localhost`, where you can use HTTP. For example, if you created a `HelloVizDemo` folder and want to host the file locally on your computer using port 8765, you might use: `http://localhost:8765/Samples/HelloVizDemo/HelloVizExtension.html` - The `` element that specifies the minimum version of the Extensions API library that is required to run the extension. - The `` element currently isn't implemented for viz extensions. This metadata is used to provide branding for the extension, as would be shown in an About dialog box. - Provide the `name` for your extension (`Hello Viz Extensions!`). The manifest file can be localized, so provide the name (or names) in the appropriate `` elements in the `` section. @@ -79,14 +79,13 @@ Name the manifest file for your extension (for example, `HelloVizExtension` and The web app you create provides the code to create the visualization interacts with the Tableau worksheet to get data and the encoding. The web app consists of an HTML file and the supporting JavaScript code that initializes and accesses the worksheet using the Extensions API. You host this web app on a web server (the server specified in the manifest file). In this case, we are using a web server running on your local computer. - #### Create the HTML page Your web application must include an HTML page. This page should link to the Extensions API JavaScript library and to any other JavaScript, CSS, or HTML resources your web app requires. You could add the JavaScript code to initialize and call Extensions API functions directly in the HTML page. However, in most cases you want to keep this code in a separate file. 1. In the `HelloVizExtensions` folder (or wherever you put your `.trex` file), create a file called `HelloVizExtension.html`. -1. You can copy and paste the following code into your file. This code creates a very simple page that displays a single line of text. This HTML code assumes that you copied or cloned the `extensions-api-preview` repository and are creating your extension in a HelloVizExtension folder, under Samples. +1. You can copy and paste the following code into your file. This code creates a very simple page that displays a single line of text. This HTML code assumes that you copied or cloned the `extensions-api` repository and are creating your extension in a HelloVizExtension folder, under Samples. ```html @@ -130,15 +129,23 @@ Your web application must include an HTML page. This page should link to the Ext ``` -**Note**: -For this developer preview, it makes your life easier if you place your own extensions in the Samples folder. The first reason is that you can host the extensions using the same web server you started with `npm start` command described in the Get Started with Viz Extensions topic. The second reason is that the Tableau preview test site has been configured so that all extensions that use the path `http://localhost:8765/Samples` are included on the safe list (or allowlist). Because the extension is running on your local computer (`http://localhost`) and uses the URL that is allowed on the site, you are good to go. In general, when you are creating your own viz extensions, you will need to ensure that that the extension URL has been added to the safe list for the Tableau site. For more information, see -[Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/online/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts). +##### Location, Location, Location + +For this exercise, it makes your life easier if you place your own extensions in the Samples folder. +Keeping your own extensions in the Samples folder has two advantages. + +* You can host the extensions using the same web server you started with `npm start` command. + +* If you've already configured your Tableau Cloud or Tableau Server site to allow all extensions under the path `http://localhost:8765/Samples`, you don't need to specifically add each extension. + + For example, if you add the following URL and wildcard to the allow list: `http://localhost:.*/Samples/.*`, the URL allows all extensions (on any port) under the Samples folder. Because the extension is running on your local computer (`http://localhost`) and uses the URL that is allowed on the site, you're good to go. In general, when you’re creating your own viz extensions, you must ensure that the extension URL has been added to the allow list. For more information, see [Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/online/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts). + --- #### Start the web service to host the extension -1. Start the web service to verify you have the web app and files configured.
The URL of the server must match the `SERVER` in the manifest file for the extension. Be sure to include the `http://` or `https://` in the URL. If you are using your `localhost` for development work, you might want to use the same lightweight web server that is used for the Extensions API samples and tutorial. Assuming that you've cloned or downloaded the repository, and that you've created a folder under `/extensions-api-preview`, you can start the server by using the `npm start` command. Or if you need to use a different port and location, you can install and start the `http-server` yourself (replacing PORT with the port you need and that matches the port you specified in the manifest file): +1. Start the web service to verify you have the web app and files configured.
The URL of the server must match the `SERVER` in the manifest file for the extension. Be sure to include the `http://` or `https://` in the URL. If you are using your `localhost` for development work, you might want to use the same lightweight web server that is used for the Extensions API samples and tutorial. Assuming that you've cloned or downloaded the repository, and that you've created a folder under `/extensions-api`, you can start the server by using the `npm start` command. Or if you need to use a different port and location, you can install and start the `http-server` yourself (replacing PORT with the port you need and that matches the port you specified in the manifest file): ```bash @@ -162,9 +169,13 @@ For this developer preview, it makes your life easier if you place your own exte After you have created the manifest file (`.trex`) and have hosted your web app you can test it in Tableau. It's a good idea to do this even if your application isn't completed. +:::note +If you are using Tableau Cloud or Tableau Server, you need to make sure you've added the URL of your extension to the allow list. See this [note about location](#location-location-location). +::: + 1. Start up your web page or application (or make sure it is running). -1. Log on to Tableau Cloud [https://us-west-2a.online.tableau.com](https://us-west-2a.online.tableau.com) and open a workbook, for example, Superstore. Click **Edit** and create a new worksheet (from the Worksheet menu, select **New Worksheet**), or open a new workbook in your Personal Space and connect to the **Superstore Datasource**. +1. Start Tableau Desktop, or log on to Tableau Cloud or Tableau Server and open a workbook, for example, Superstore. Click **Edit** and create a new worksheet (from the Worksheet menu, select **New Worksheet**), or open a new workbook in your Personal Space and connect to the **Superstore Datasource**. 1. On the **Marks** card, expand the Mark Type drop-down menu. Under Viz Extensions, select **Add Extensions**. @@ -182,7 +193,6 @@ After you have created the manifest file (`.trex`) and have hosted your web app --- - ### Add code to initialize the extension and call Tableau Extensions API functions The next step is to create the JavaScript that calls the Extensions API. In your JavaScript code (either in your HTML page or in a separate JavaScript file), you first need to initialize the extension. To do this, you call `tableau.extensions.initializeAsync()`. The function returns after the initial bootstrap operation is complete and the extension is available for use. The Extensions API follows the [CommonJS Promises/A standard](http://wiki.commonjs.org/wiki/Promises/A) for asynchronous method calls. @@ -268,7 +278,7 @@ The next step is to create the JavaScript that calls the Extensions API. In your 1. In the Add an Extension dialog box that appears, select **Access Local Extensions**. -1. Browse to the directory where your extension is located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api-preview\Samples\HelloVizExtension` and select the `HelloVizExtension.trex file`. +1. Browse to the directory where your extension is located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples\HelloVizExtension` and select the `HelloVizExtension.trex` file. 1. Drag some fields on to the **Drop** tile on the Marks card. The name of the fields that you've added to the Marks card are displayed in the worksheet. Every time you add or remove a field, the names are updated. @@ -308,7 +318,7 @@ Our sample code follows the [Semi-Standard Style](https://github.com/Flet/semist ## What's next? -- For more information about how you can use the Extensions API, go look at the [Samples](https://github.com/tableau/extensions-api-preview/tree/main/Samples/). Study the sample, connectedScatterPlot, to see a full implementation of a viz extension. +- For more information about how you can use the Extensions API, go look at the [Samples](https://github.com/tableau/extensions-api/tree/main/Samples/). Study the sample, connectedScatterPlot, to see a full implementation of a viz extension. - Get familiar with the programming interface of the Extensions API, see [API Reference](pathname:///api/). diff --git a/website/docs/vizext/trex_viz_examples.md b/website/docs/vizext/trex_viz_examples.md index 8a875bba..c30d264e 100644 --- a/website/docs/vizext/trex_viz_examples.md +++ b/website/docs/vizext/trex_viz_examples.md @@ -8,7 +8,7 @@ The best way to learn how to build your own extensions is to look at the sample - To download the Extensions API SDK, if you have not already done so, see [Get Started](./trex_viz_getstarted). -- You can browse the sample code for the extensions in the [Samples](https://github.com/tableau/extensions-api-preview/tree/master/Samples?=target="_blank") folder on GitHub. +- You can browse the sample code for the extensions in the [Samples](https://github.com/tableau/extensions-api/tree/master/Samples?=target="_blank") folder on GitHub. --- @@ -17,48 +17,47 @@ The following instructions assume that you have already downloaded and extracted ### About the viz extension samples -The viz extension samples are in the `Samples` folder. +The viz extension samples are in the `Samples\Viz` folder. -- **[ConnectedScatterplot](https://github.com/tableau/extensions-api-preview/tree/main/Samples/ConnectedScatterplot?=target="_blank")** +- **[ConnectedScatterplot](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/ConnectedScatterplot?=target="_blank")** Shows how to create a viz extension. -- **[DataSources](https://github.com/tableau/extensions-api-preview/tree/main/Samples/DataSources?=target="_blank")** +- **[DataSources](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/DataSources?=target="_blank")** Shows how to use the `getDataSourcesAsync` function to find the names of the data sources for the worksheet. Like the Filtering sample, the DataSources sample makes use the `Promise.all` function to combine the promises from the asynchronous calls together, and then waits for them to resolve. -- **[Filtering](https://github.com/tableau/extensions-api-preview/tree/main/Samples/Filtering?=target="_blank")** +- **[Filtering](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/Filtering?=target="_blank")** Demonstrates how to use the `getFiltersAsync` function to find and display the active filters in the worksheet and calls the `addEventListener` function to set a `FilterChanged` event on the worksheet. Any time a filter value is changed, the extension refreshes the table that displays the active filters. -- **[Parameters](https://github.com/tableau/extensions-api-preview/tree/main/Samples/Parameters?=target="_blank")** +- **[Parameters](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/Parameters?=target="_blank")** Finds and displays all the parameters in the worksheet and then sets an event listener that waits for a parameter to change, which triggers a refresh. -- **[Sankey](https://github.com/tableau/extensions-api-preview/tree/main/Samples/Sankey?=target="_blank")** +- **[Sankey](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/Sankey?=target="_blank")** Sankey diagrams or charts - named after their creator, Matthew Henry Phines Riall Sankey, who first used this chart type in 1898. Somewhat similar to the Sankey viz type Tableau had offered in the recent Sankey and Radial new chart types pilot (June 2023). -- **[Settings](https://github.com/tableau/extensions-api-preview/tree/main/Samples/Settings?=target="_blank")** +- **[Settings](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/Settings?=target="_blank")** Uses the `settings` namespace to save settings (key-value pairs) for the extension. Demonstrates how you can save settings for each instance of an extension, which enables sharing common views of a workbook. -- **[UINamespaces](https://github.com/tableau/extensions-api-preview/tree/main/Samples/UINamespace?=target="_blank")** +- **[UINamespaces](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/UINamespace?=target="_blank")** Demonstrates how you can use the `UI` namespace to create a modal dialog box (or popup) that runs another extension, which allows users to interact and change the settings for the parent extension. This sample controls the background auto-refresh interval for data sources in a worksheet. -- **[VizImage](https://github.com/tableau/extensions-api-preview/tree/main/Samples/VizImage?=target="_blank")** +- **[VizImage](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/VizImage?=target="_blank")** Shows how you can use Tableau Viz to add visualizations to your extensions. This sample demonstrates the effects of different mark types and color palettes. For more information about Tableau Viz, see [Add Tableau Viz to Your Extensions](../core/trex_tableau_viz). - --- ### Start a web server to host the sample viz extensions -To use the extension samples, you need to start up a web server on your computer to host the HTML pages. If you downloaded or cloned the Extensions API repository, you can start the web service in the root directory of the repository on your computer. These commands start the Node.js basic service `http-server`. +To use the viz extension samples, you need to start up a web server on your computer to host the HTML pages. If you downloaded or cloned the Extensions API repository, you can start the web service in the root directory of the repository on your computer. These commands start the Node.js basic service `http-server`. -1. Go to the `extensions-api-preview` folder. +1. Go to the `extensions-api` folder. 1. To install the web server components, run the following command: ```cli @@ -75,7 +74,7 @@ To use the extension samples, you need to start up a web server on your computer The samples are set up so that the web server is using port `8765`. If you need to specify a different port instead of `8765`, you can change ports using another Node.js or `http-server` command. -From the `extensions-api-preview` folder, you can start the `http-server` using one of the following commands. Replace `PORT` with the port you are using (for example, `8000`). +From the `extensions-api` folder, you can start the `http-server` using one of the following commands. Replace `PORT` with the port you are using (for example, `8000`). To install the `http-server`on your computer globally and to also start the server: @@ -94,7 +93,7 @@ The port you use for the web server also has to match the port specified in the ```html - http://localhost:PORT/Samples/Parameters/parameters.html + http://localhost:PORT/Samples/Viz/Parameters/parameters.html ``` @@ -113,8 +112,8 @@ After you start the web server to host the sample extensions, you can try the ex 1. In the Add an Extension dialog box that appears, select **Access Local Extensions**. -1. Browse to the directory where the samples are located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api-preview\Samples`. +1. Browse to the directory where the samples are located. For example, if you downloaded or cloned the GitHub repository, go to `\extensions-api\Samples\Viz`. 1. Select one of the folders for the samples and open the `.trex` file (for example, `DataSources.trex`).
-Every Tableau extension has a manifest file (`.trex`) that describes the extension and identifies the location of the web application. +Every Tableau extension has a manifest file (`.trex`) that describes the extension and identifies the location of the web application. The extension should appear in the worksheet. Play around with the extension. Examine the HTML and JavaScript source files to see how things work. diff --git a/website/docs/vizext/trex_viz_getstarted.md b/website/docs/vizext/trex_viz_getstarted.md index be279efe..aaab1bd1 100644 --- a/website/docs/vizext/trex_viz_getstarted.md +++ b/website/docs/vizext/trex_viz_getstarted.md @@ -19,7 +19,7 @@ If you are looking for information about how to use viz extensions in Tableau, s :::info **What's in a Tableau extension?** -A Tableau extension consists of an XML manifest file (`.trex`), an web page (`.html`) that uses a Tableau-provided JavaScript library, and the JavaScript file (`.js`) (or files) that contain your extension logic. The Tableau extensions are supported on Tableau Desktop, Tableau Server, and Tableau Cloud. +A Tableau extension consists of an XML manifest file (`.trex`), a web page (`.html`) that uses a Tableau-provided JavaScript library, and the JavaScript file (`.js`) (or files) that contain your extension logic. The Tableau extensions are supported on Tableau Desktop, Tableau Server, and Tableau Cloud. ::: @@ -29,42 +29,6 @@ A Tableau extension consists of an XML manifest file (`.trex`), an web page (`.h If you want to create an extension or work with the sample code, make sure you have followed the instructions for [installation](../installation). - - - ----- - - - ### Start a web server to host the sample viz extensions To use the viz extension samples, you need to start up a web server on your computer to host the HTML pages. If you downloaded or cloned the Extensions API repository, you can start the web service in the root directory of the repository on your computer. For example, if you downloaded the `extensions-api-main.zip` file to your `Downloads` directory, after you extract the files, the directory would be `extensions-api-main`. If you cloned the repository, the directory would be `extensions-api`. @@ -90,7 +54,7 @@ To use the viz extension samples, you need to start up a web server on your comp :::note - The web server just serves the extension samples, which have URLs similar to the following: `http://localhost:8765/Samples/ConnectedScatterplot/connectedScatterplot.html` This local web server is not intended to serve the Viz Extensions API Help pages. View the Help on GitHub at [https://tableau.github.io/extensions-api-preview](https://tableau.github.io/extensions-api-preview). + The web server just serves the extension samples, which have URLs similar to the following: `http://localhost:8765/Samples/Viz/ConnectedScatterplot/connectedScatterplot.html` This local web server is not intended to serve the Viz Extensions API Help pages. View the Help on GitHub at [https://tableau.github.io/extensions-api](https://tableau.github.io/extensions-api). ::: @@ -98,7 +62,11 @@ To use the viz extension samples, you need to start up a web server on your comp ### Sign in to Tableau and add a viz extension to the worksheet -1. Sign into Tableau and open the Superstore workbook. Alternatively, open a new workbook in your Personal Space and connect to the **Superstore Datasource**. +1. Start Tableau Desktop or sign in to Tableau Cloud or Tableau Server and open the Superstore workbook. Alternatively, open a new workbook in your Personal Space and connect to the **Superstore Datasource**. + + :::note + If you are using Tableau Cloud or Tableau Server to view the samples, you'll need to make sure that the extension is on the Allow list (safe list) for Tableau Server or Tableau Cloud. See [Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/online/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts) (Tableau Cloud) or [Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/server/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts) (Tableau Server). So you can use all the sample extensions, use the following URL and wildcard: `http://localhost:.*/Samples/.*` + ::: 1. In a worksheet, on the Marks card, expand the Mark Type drop-down menu. @@ -113,13 +81,13 @@ To use the viz extension samples, you need to start up a web server on your comp Every Tableau extension has a manifest file (.trex) that describes the extension and identifies the location of the web application. For more information on creating a `.trex` manifest file, see [Tableau Viz Extension Manifest File](./trex_viz_manifest). 1. Navigate to the directory where the connectedScatterplot manifest file (`.trex`) is located -`\extensions-api\Samples\ConnectedScatterplot`. +`\extensions-api\Samples\Viz\ConnectedScatterplot`. 1. Open the `connectedScatterplot.trex` file. If prompted, click OK to allow the Viz Extension to run in the workbook. The extension is a network-enabled extension, which means it has access to resources outside of Tableau and it is not hosted on the Tableau Sandbox. When the extension loads, the worksheet is blank, but the Marks card will show the name of the viz extension and any custom encoding tiles the extension uses. - ![](../assets/viz_ext_marks_scatterplot.png) + ![](../assets/viz_ext_marks_icon.png) ### Configure the connectedScatterplot viz extension @@ -148,10 +116,11 @@ Some slight modifications have been made to make it able to be used with Workboo ## What's next? -* Start developing your extension by modifying an existing sample. See [samples (GitHub)](https://github.com/tableau/extensions-api-preview/tree/main/Samples/). If you cloned or downloaded the repository, create a copy of one of the existing samples in the Samples directory and start with that. For example, if you make the copy of the ConnectedScatterplot directory, rename the copy and place it in the Samples directory. You will need to change the URL in the `.trex` file so that the source location URL shows the new path. +* Start developing your extension by modifying an existing viz extension sample. See [samples (GitHub)](https://github.com/tableau/extensions-api/tree/main/Samples/Viz/). If you cloned or downloaded the repository, create a copy of one of the existing samples in the Samples directory and start with that. For example, if you make the copy of the ConnectedScatterplot directory, rename the copy and place it in the Samples directory. You will need to change the URL in the `.trex` file so that the source location URL shows the new path. - Keeping your own extensions in the Samples folder has two advantages. The first is that you can host the extensions using the same web server you started with `npm start` command. The second is that the Tableau preview test site has been configured so that all extensions that use the path `http://localhost:8765/Samples` are included on the safe list (or allowlist). Because the extension is running on your local computer (`http://localhost`) and uses the URL that is allowed on the site, you are good to go. In general, when you are creating your own viz extensions, you will need to ensure that that the extension URL has been added to the safe list. For more information, see [Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/online/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts). + Keeping your own extensions in the Samples folder has two advantages. The first is that you can host the extensions using the same web server you started with `npm start` command. The second advantage is that you won't need to add your extension to the allow list (or safe list) if you configured your Tableau Cloud or Tableau Server site so that all extensions under the path `http://localhost:8765/Samples`. For example, if you added this URL and wildcard to the safe list: `http://localhost:.*/Samples/.*`, the URL allows all extensions (on any port) under the Samples folder. Because the extension is running on your local computer (`http://localhost`) and uses the URL that is allowed on the site, you are good to go. In general, when you are creating your own viz extensions, you will need to ensure that that the extension URL has been added to the safe list. For more information, see [Add extensions to the safe list and configure user prompts](https://help.tableau.com/current/online/en-us/dashboard_extensions_server.htm#add-extensions-to-the-safe-list-and-configure-user-prompts). * For information about creating a simple "Hello World" Tableau viz extension, see [Create a "Hello World" Viz Extension](./trex_viz_create). -* To get familiar with the programming interface for the Extensions API, see the API Reference. + +* To get familiar with the programming interface for the Extensions API, see the [API Reference](pathname:///api/). diff --git a/website/docs/vizext/trex_viz_manifest.md b/website/docs/vizext/trex_viz_manifest.md index 2b562693..692be8b1 100644 --- a/website/docs/vizext/trex_viz_manifest.md +++ b/website/docs/vizext/trex_viz_manifest.md @@ -199,7 +199,7 @@ To add custom encoding, you provide definitions for the encoding in the manifest These encodings are rendered on the Marks card as tiles, with the X, Y and Text icons. -![](../assets/viz_ext_marks.png) +![](../assets/viz_ext_marks_icon.png) :::note @@ -422,7 +422,7 @@ The following table shows the list of icons you can use. edge - +   digit-2 diff --git a/website/sidebars.js b/website/sidebars.js index 5a813030..67bdc46e 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -98,7 +98,7 @@ const sidebars = { label: 'Reference', /* link: { href: "https://github.com/tableau/hyper-api-samples" }, */ items: [ - { type: 'link', label: "Samples", href: "https://github.com/tableau/extensions-api-preview/tree/main/Samples" }, + { type: 'link', label: "Samples", href: "https://github.com/tableau/extensions-api/tree/main/Samples" }, { type: 'link', label: "API Reference", href: 'pathname:///api' }, { type: 'category', diff --git a/website/static/api/index.html b/website/static/api/index.html index 515ac49a..56b736b6 100644 --- a/website/static/api/index.html +++ b/website/static/api/index.html @@ -67,9 +67,9 @@

Tableau Extensions API

The Tableau Extensions API is a JavaScript library that is organized into namespaces that contain the classes and methods for communicating with Tableau components. The Tableau Extensions API - library supports both dashboard extensions and viz extensions (only available in beta), although not + library supports both dashboard extensions and viz extensions, although not all interfaces and methods apply to both extensions. For an overview of how the API is organized, - see Tableau Extensions API Basics.

+ see Tableau Extensions API Basics.

Note: To see all the methods and properties for the Extensions API interfaces, select the Inherited option in the upper-right corner of your browser window. This option shows any methods and properties inherited from base classes.
@@ -94,7 +94,7 @@

Tableau Extensions API

WorksheetContent - (Available to viz extensions beta only) The worksheetContent provides access to the worksheet object. When you have the worksheet object, you have access to all elements in the worksheet, including the worksheets, marks, filters, parameters, and data sources. For example, to access the worksheet in a workbook (after initialization), you might have a line of code that looks like the following:
const worksheet = tableau.extensions.worksheetContent + (Available to viz extensions only) The worksheetContent provides access to the worksheet object. When you have the worksheet object, you have access to all elements in the worksheet, including the worksheets, marks, filters, parameters, and data sources. For example, to access the worksheet in a workbook (after initialization), you might have a line of code that looks like the following:
const worksheet = tableau.extensions.worksheetContent.worksheet Settings @@ -113,14 +113,14 @@

Tableau Extensions API

Dashboard extensions

The following diagram shows the relationship between the extensions namespace and the worksheets in - the dashboard. For more information, see Tableau Extensions API Basics.

+ the dashboard. For more information, see Tableau Extensions API Basics.

Extensions API namespace hierarchy


-

Viz extensions (available in beta only)

+

Viz extensions

The following diagram shows the relationship between the extensions namespace and the worksheets in - the workbook. For more information, see Tableau Extensions API Basics.

+ the workbook. For more information, see Tableau Extensions API Basics.

Viz Extensions API namespace hierarchy