Creating Tableau Extensions


Once an animation has been created in the Animator, it can be exported as a Tableau extension if required. The extension may be a non data-driven animation or if variables have been included then the Tableau extension can be used to set those variable values. This allows the creation of animated charts, indicators and Infographics. In Tableau, data-driven animations make use of the values in a worksheet and are updated when a filter and/or parameter is changed. Extensions can be either Networked or Sandboxed. To create a Sandbox extension, a couple of additional actions are required and this will be described in this section.

Opening the Tableau Extension Form
Once the animation is ready, go to the 'Image Project' -> 'Export Files' section. Click on the 'Tableau Extension' button.

This will open the Tableau Extension form.

tableau form

The form has 2 tabs, one is  'Required' which must be completed in order to create an extension and 'Optional'. If the animation contains variables which will be used in the extension to map data in Tableau, then the Optional tab allows the entry of a description of each of the variables. These descriptions will be shown as tooltips in the Tableau extension editor popup.

Required Tab
As the name suggests, all values in the required tab must be completed correctly.

Define Data and Properties

Scroll down the form to view the list of values defined as variables in the animation. Variables can be setup as either 'Data' or 'Properties'. A 'Data' value will link to a Tableau data source. A 'Property' value will be available in extension edit section, a user will be able to directly select a specific value rather than linking to data.

tab form2

If the 'Property' option is selected, the 'edit' button becomes available. Clicking on the 'edit' button will present a dialog box which will help to define how the property is presented in the Tableau Extension popup.
pbi edit

The initial editable options are:

The Property Type options are:

Optional Tab

If variables have been added to the animation, they can be given a description in the 'Optional Tab'. If a description has been entered, they will be used in a tooltip in the Tableau editor popup to help a user understand exactly what the variable represents. If left blank, then they are ignored in Tableau and the 'i' icon will not be shown for any variable that has no description.

Saving and Downloading the Extension

Once the form has been completed satisfactorily, click on the 'Create Extension' button at the bottom of the Tableau Extension form. This will close the popup dialog and create a download link in the Export Files section. Click on the 'zip' file link to download it. This will contain the newly generated extension.

tableau zip

Downloading the Libraries
The extension will also need the javascript libraries and css files. For networked extensions, this download can be shared across as many extensions as are available. For sandboxed extensions, they must be in a sub-folder of the extension. The download link for these files is at the bottom of the Tableau Extension form that was shown above.

tableau download

They can also be downloaded from this link: Library Files

Repeating Images
If there are repeating images in the animation, for example a number of images presenting the same information for different entities, repeat the variable name for each entity rather than giving it a new name for each one. If this is the case, when the extension data is mapped in Tableau, then only one item will be shown for each set. (in the example below, only one 'scalex', one 'scaley' and one 'docValue' will be shown in the popup. If the Tableau data is in rows, then the first row will populate the first variable, the second row will populate the second variable and so on.

tableau zip

Resizing Images
To ensure the images resize in Tableau, set the Image Size to a percentage value in the 'Image Project' section.
tableau zip

Deploy on the Server
Extracting the zip file should present a structure as shown below. The base name of the files will be the same as the end part of the 'Extension URL' entered above in the Tableau Extension form. Note that the file with the '.trex' suffix (in this case 'cityCost.trex') must also be copied to a location where the user can access it to create the extension.
Place the unzipped files in the correct location on the server that will supply the extension. Include the main directory i.e citycost. The zip file is shown here only for convenience and is not necessary.

zip structure

Next the css and javascript libraries downloaded above need to be added. Once unzipped, the download contains two folders, 'css' and 'lib'. For a sandboxed extension, place these folders next to the images and scripts.
For sandboxed extensions, the sandbox-config.json file will either need to be created or edited. For more information, see the Tableau Documentation.The

zip structure

For a networked extension, place these folders in the folder parallel to the root. Note that if there are multiple extensions, these folders only need to be added one time. They can be shared among all the extensions.

zip structure