Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 7 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ The Extensions API lets you do more without leaving Tableau. Build Tableau exten
## Setup and Running Samples

### Prerequisites
* You must have Node.js and npm installed. You can get these from [http://nodejs.org](http://nodejs.org).
* You must have Node.js and npm installed. You can get these from [https://nodejs.org](https://nodejs.org).

### Install Extensions API SDK Components and Start Server

Expand All @@ -35,15 +35,14 @@ The Extensions API lets you do more without leaving Tableau. Build Tableau exten

### Typescript Development
Samples written in Typescript are located in the `Samples-Typescript` folder.
If you want to use TypeScript to write your extensions, you can run a script that starts up the HTTP server and actively listens for changes to the `.ts` files located in the `Sample-Typescript` folder. You can then add your extension to the folder and use the script to transpile your extension to JavaScript.
If you want to use TypeScript to write your extensions, you can run a script that starts up the HTTP server and actively listens for changes to the `.ts` files located in the `Samples-Typescript` folder. You can then add your extension to the folder and use the script to transpile your extension to JavaScript.

* To start the the HTTP server and listen for changes to the `.ts` files.

**npm run dev**

For more information, see [Use TypeScript with the Extensions API](https://tableau.github.io/extensions-api/docs/trex_typescript.html).


### Sandboxed Extension Development Environment

Tableau is introducing development support for Sandboxed Extensions with Tableau 2019.3. Sandboxed Extensions run in a virtual sandbox and ensure the extension can’t make network calls outside of the hosting Tableau Server. The Extensions API SDK provides a local development environment that replicates the Tableau Hosting Cloud Service for Sandboxed Extensions. You can test your Sandboxed extensions locally with the same sandbox policies.
Expand All @@ -56,22 +55,17 @@ Tableau is introducing development support for Sandboxed Extensions with Tableau

For more information, see [Create and Test Sandboxed Extensions](https://tableau.github.io/extensions-api/docs/trex_sandbox_test.html).

## Contributions
Contributions and improvements by the community are welcomed!
See the LICENSE file for current open-source licensing and use information.

## Submissions
We would love submissions to either the Docs or Sample code! To contribute, first sign our CLA that can be found [here](https://tableau.github.io/contributing.html). To submit a contribution, please fork the repository then submit a pull request to the `submissions` branch.
Before we can accept pull requests from contributors, we require a signed [Contributor License Agreement (CLA)](https://tableau.github.io/contributing.html). To submit a contribution, please fork the repository then submit a pull request to the `main` branch.

## Code Style
Our sample code follows the [Semi-Standard Style](https://github.com/Flet/semistandard) for JavaScript samples linting and [tslint](https://palantir.github.io/tslint/) for TypeScript. If you add your own extension code to the Samples or Samples-Typescript directories, you can run `npm run lint` to validate the style of your code. Please run this command before submitting any pull requests for Sample code.

## Contributions
Code contributions and improvements by the community are welcomed!
See the LICENSE file for current open-source licensing and use information.

Before we can accept pull requests from contributors, we require a signed [Contributor License Agreement (CLA)](http://tableau.github.io/contributing.html).

## Documentation
[Visit the project website and read the documentation here.](https://tableau.github.io/extensions-api/)


## Issues
Use [Issues](https://github.com/tableau/ProjectFrelard/issues) to log any problems or bugs you encounter in the docs or sample code.
Use [Issues](https://github.com/tableau/extensions-api/issues) to log any problems or bugs you encounter in the docs or sample code, or to discuss any proposed changes or additions.
2 changes: 1 addition & 1 deletion _includes/docs_menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@
<a href="{{ site.baseurl }}/docs/index.html" target="_blank">API Reference</a>
</li>
<li>
<a href="{{ site.baseurl }}/docs/trex_tableau_viz_ref.html" target="_blank">Tableau Viz Reference</a>
<a href="{{ site.baseurl }}/docs/trex_tableau_viz_ref.html">Tableau Viz Reference</a>
</li>
<li>
<a href="{{ site.baseurl }}/docs/trex_release-notes.html">Release Notes</a>
Expand Down
2 changes: 1 addition & 1 deletion _includes/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<li><a href="{{ site.baseurl }}/docs/trex_release-notes.html">Release Notes</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="tableauIcon"><a target="_blank" href="http://tableau.com"><img src="{{ site.baseurl }}/assets/logo.png" alt="Tableau Developers" class="logo" /></a></li>
<li class="tableauIcon"><a target="_blank" href="http://tableau.com/developer"><img src="{{ site.baseurl }}/assets/logo.png" alt="Tableau Developers" class="logo" /></a></li>
<li><a target="_blank" href="https://github.com/tableau/extensions-api"><span class="icon icon--github" title="Extensions API on GitHub" alt="Extensions API on GitHub">{% include icon-github.svg %}</span></a></li>
</ul>
</div><!--/.nav-collapse -->
Expand Down
4 changes: 2 additions & 2 deletions _layouts/docs.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
<div class="content .col-xs-12 .col-sm-8 .col-md-9">
<h1>{{ page.title }}</h1>
<div class="edit-container">
<a href="https://github.com/tableau/projectfrelard/edit/master/{{ page.path }}" class="edit-links"><span class="glyphicon glyphicon-pencil"></span> Edit this page</a>
<a href="https://github.com/tableau/extensions-api/edit/main/{{ page.path }}" class="edit-links"><span class="glyphicon glyphicon-pencil"></span> Edit this page</a>
&nbsp;
<a href="https://github.com/tableau/projectfrelard/issues" class="edit-links"><span class="glyphicon glyphicon-flag"></span> Submit an issue</a>
<a href="https://github.com/tableau/extensions-api/issues" class="edit-links"><span class="glyphicon glyphicon-flag"></span> Submit an issue</a>
</div>
<br />

Expand Down
4 changes: 2 additions & 2 deletions _layouts/guide.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
<div class="content .col-xs-12 .col-sm-8 .col-md-9">
<h1>{{ page.title }}</h1>
<div class="edit-container">
<a href="https://github.com/tableau/projectfrelard/edit/master/{{ page.path }}" class="edit-links"><span class="glyphicon glyphicon-pencil"></span> Edit this page</a>
<a href="https://github.com/tableau/extensions-api/edit/main/{{ page.path }}" class="edit-links"><span class="glyphicon glyphicon-pencil"></span> Edit this page</a>
&nbsp;
<a href="https://github.com/tableau/projectfrelard/issues" class="edit-links"><span class="glyphicon glyphicon-flag"></span> Submit an issue</a>
<a href="https://github.com/tableau/extensions-api/issues" class="edit-links"><span class="glyphicon glyphicon-flag"></span> Submit an issue</a>
</div>
<br />

Expand Down
6 changes: 3 additions & 3 deletions docs/Interaction_Guidelines/ux_build_test.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ This section serves as a broad overview of the developer experience and consider
&nbsp;

## Build
The first thing to do is start running sample extension code from the Extensions API Documentation. **Make sure that your sample code works** and your environment is set up properly before jumping into building a new extension.
The first thing to do is start running sample extension code from the Extensions API Documentation. **Make sure that your sample code works** and your environment is set up properly before jumping into building a new extension.

Once you're ready to go, you can start building and customizing your extension. Expect to iterate through cycles of developing and designing your extension using our API documentation and these design guidelines.

Expand All @@ -23,9 +23,9 @@ Once you're ready to go, you can start building and customizing your extension.

* [Community Forums](https://community.tableau.com/community/developers/extensions-api/overview)<br>Participate in a community of developers that are passionate about creating extensions.

* [Extension Gallery (beta)](https://extensiongallery.tableau.com/)<br>Explore and use some of the extensions our partners have created.
* [Tableau Exchange](https://exchange.tableau.com/)<br>Explore and use some of the extensions our partners have created.

* [Developer Preview](https://prerelease.tableau.com/extensions-api)<br>Participate in the Developer Preview for our Extensions API. Be invited to bi-weekly sprint demos with Tableau's development team and have the opportunity to give ongoing feedback.
* [Tableau Developer Program](https://www.tableau.com/developer)<br>Participate in the Tableau Developer Program. Be invited to monthly sprint demos with Tableau's development team and have the opportunity to give ongoing feedback.

&nbsp;

Expand Down
14 changes: 8 additions & 6 deletions docs/trex_api_about.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ The `extensions` name space has one method `initializeAsync()` that is used to i

## Registering and accessing dashboard extensions

The dashboard extension is one type of extension in the Tableau extensions namespace (and it is accessed using `tableau.extensions`). To register the extension, you declare the type of extension in the manifest file (`.trex`). For more information about what goes in the file, see [Tableau Manifest File]({{site.baseurl}}\docs\index.html).
The dashboard extension is one type of extension in the Tableau extensions namespace (and it is accessed using `tableau.extensions`). To register the extension, you declare the type of extension in the manifest file (`.trex`). For more information about what goes in the file, see [Tableau Manifest File]({{site.baseurl}}\docs\trex_manifest.html).

```xml
<dashboard-extension id="com.example.extensions.name" extension-version="0.1.0">
Expand All @@ -37,7 +37,7 @@ To access the objects in the dashboard, you specify the namespace reserved for d
const worksheets = tableau.extensions.dashboardContent.dashboard.worksheets ;
```

The following diagram shows an outline of the namespace hierarchy that you traverse to get to worksheets.
The following diagram shows an outline of the namespace hierarchy that you traverse to get to worksheets.

![]({{site.baseurl}}/assets/tab_ext_class_worksheet.png)

Expand All @@ -49,11 +49,13 @@ For example, after you extract a worksheet object from the dashboard, you can us

The following code fragment shows an example of setting an event listener `addEventListener` on a worksheet.

```python

```javascript
// Add an event listener for the selection changed event on this sheet.
unregisterEventHandlerFunction = worksheet.addEventListener('mark-selection-changed', myfunctionHandleSelectionEvent);
```
// Assigning the event type to a variable just to make the example fit on the page here.
const markSelection = tableau.TableauEventType.MarkSelectionChanged;
let unregisterEventHandlerFunction = worksheet.addEventListener( markSelection, myfunctionHandleSelectionEvent);

```



Expand Down
7 changes: 3 additions & 4 deletions docs/trex_create.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,19 +172,18 @@ Your web application must include an HTML page. This page should link to the Ext

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.


1. Start up your web page or application (or make sure it is running).

2. Start Tableau and open a workbook with a dashboard or create a new dashboard.
3. In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard. In the **Choose an Extension** dialog box, click **My Extensions** and browse to directory where you have your manifest file.
2. Start Tableau and open a workbook with a dashboard, or create a new dashboard.

3. In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard. In the **Add an Extension** dialog box, click **Access Local Extensions** and browse to directory where you have your manifest file.

After you select the manifest file, your web page should appear in the dashboard zone.

- If not, and you see a 404 error, verify that you specified the correct URL to serve the page in the `.trex` file.

- Tableau parses the `.trex` file when you add the extension to the dashboard. If you make changes to the `.trex` file after you have added it to the dashboard, you need to remove the extension and re-add it. See [What Happens When you Reload an Extension]({{site.baseurl}}/docs/trex_reload.html)


---

### Add code to initialize the extension and call Tableau Extensions API functions
Expand Down
2 changes: 1 addition & 1 deletion docs/trex_error_handling.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,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 [UINamepace](https://github.com/tableau/extensions-api/tree/master/Samples/UINamepace?=target="_blank") 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/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

Expand Down
6 changes: 3 additions & 3 deletions docs/trex_getstarted.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ The Tableau Dashboard Extensions API allows developers to create extensions for

This section will take you through the process of setting up your environment to use one of the sample dashboard extensions. Using one of the sample extensions is a great way to learn and great way to get started developing your own extensions. In this section, you will start a simple web server on your computer to host the sample. You can use the same process for hosting the extension when you start developing your own.

<div class="alert alert-info"><p><b>Note</b> If you are looking for information about how to add an extension to a dashboard in Tableau, see <a href="https://onlinehelp.tableau.com/current/pro/desktop/en-us/dashboard_extensions.htm" target="_blank" ref="noopener">Use Dashboard Extensions</a>. If you are looking for extensions that you can use, see the <a href="https://extensiongallery.tableau.com/" target="_blank" ref="noopener">Tableau Extension Gallery</a>.</p>
<div class="alert alert-info"><p><b>Note</b> If you are looking for information about how to add an extension to a dashboard in Tableau, see <a href="https://onlinehelp.tableau.com/current/pro/desktop/en-us/dashboard_extensions.htm" target="_blank" ref="noopener">Use Dashboard Extensions</a>. If you are looking for extensions that you can use, see the <a href="https://exchange.tableau.com/" target="_blank" ref="noopener">Tableau Exchange</a>.</p>
</div>


Expand Down Expand Up @@ -91,13 +91,13 @@ To use the dashboard extension samples, you need to start up a web server on you
---
### 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.
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.

2. In the dashboard, under **Objects**, select **Extension** and drag it on to the dashboard.

![]({{site.baseurl}}/assets/frelard_objects_extension.png){:height="25%" width="25%"}

3. In the **Choose an Extension** dialog box, click **My Extensions**.
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`.
Expand Down
1 change: 1 addition & 0 deletions docs/trex_publish.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ In addition to the requirements for all extensions to ensure security and usabil
Dashboard extensions that appear in the Tableau Exchange must also:

* Follow the Design Guidelines for Dashboard Extensions (user interaction and style guidelines for user interface elements).

* Ensure that the information in the extension manifest file (`.trex`) matches the content that you will publish in the Tableau Exchange. For example, the `name`, `description` fields are used to populate the name and description fields in the Tableau Exchange. The icon you use in the manifest should also be the icon that is used in the Exchange. You need to provide a 280x280 pixel `.png` version of the icon.

For information about getting your extension into the Tableau Exchange, see [Submitting your Extension to the Tableau Exchange]({{site.baseurl}}/docs/ux_extension_gallery.html){:target="_blank"}.
Expand Down
Loading