Skip to content

Commit

Permalink
Merge pull request #545 from d45/gh-pages-dev
Browse files Browse the repository at this point in the history
incorporated feedback from Nicolas; updated links to samples
  • Loading branch information
d45 authored Jun 12, 2024
2 parents ce3114c + 120954b commit f09404d
Show file tree
Hide file tree
Showing 24 changed files with 154 additions and 163 deletions.
Binary file modified website/docs/assets/viz_ext_marks_AddExt.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/docs/assets/viz_ext_marks_AddExt_old.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/docs/assets/viz_ext_marks_icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions website/docs/core/trex_configure.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
2 changes: 1 addition & 1 deletion website/docs/core/trex_events.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).
2 changes: 1 addition & 1 deletion website/docs/core/trex_format.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
2 changes: 1 addition & 1 deletion website/docs/core/trex_tableau_viz.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
---
Expand Down
4 changes: 2 additions & 2 deletions website/docs/core/trex_typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,10 +89,10 @@ In the HTML code for the extensions, the JavaScript files are referenced. The fo

```html
<!-- Extensions Library (this will be hosted on a CDN eventually) -->
<script src="../../lib/tableau.extensions.1.latest.js"></script>
<script src="../../../lib/tableau.extensions.1.latest.js"></script>

<!-- The extension code (webpack) -->
<script src="../../dist/datasources.js"></script>
<script src="../../../dist/datasources.js"></script>
```

## Related resources
Expand Down
8 changes: 4 additions & 4 deletions website/docs/dashext/trex_create.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<?xml ...>` 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.

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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 <a href="../docs/index.html" target="_blank">API Reference</a>.
- Get familiar with the programming interface of the Extensions API, see [API Reference](pathname:///api/).


67 changes: 40 additions & 27 deletions website/docs/dashext/trex_examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/).

Expand All @@ -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.

Expand Down Expand Up @@ -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
<source-location>
<url>http://localhost:PORT/samples/parameters/parameters.html</url>
<url>http://localhost:PORT/Samples/Dashboard/parameters/parameters.html</url>
</source-location>

```
Expand All @@ -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`). <br/>
Every Tableau extension has a manifest file (`.trex`) that describes the extension and identifies the location of the web application.

Expand All @@ -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:

Expand All @@ -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).
Loading

0 comments on commit f09404d

Please sign in to comment.