Developing visualization mods

Prerequisites

• You have read the getting started guide.
• You have created a new visualization mod template project.
• You have started a local development server and connected Spotfire to it.

_{Note: Spotfire versions earlier than 14.4 have a slightly different development workflow for visualization mods. See Getting started (before 14.4) to learn more.}

Develop and test the mod

1. Add the mod to the analysis

In the Mods development tool, click the Add to page button to instantiate the mod on the current analysis page.

While you are connected to the mods development server, any changes to the source code will be automatically updated. You can have any number of mod instances in development mode.

2. Debug your mod

A visualization mod can be debugged via the Developer tools in Spotfire. These tools are the same as the tools used by Chrome. To access the Developer tools, use the following keyboard commands:

• In the installed client: Ctrl+Alt+Shift+F12
• In the web client: F12

To find the source code files, use the Open file command (Ctrl+P) and type the name of the file. In the opened file, it is possible to set breakpoints. It is also possible to execute code in the console. Note that a mod built for release may contain minified JavaScript code and no sourcemaps, making debugging more difficult.

More information about Chrome DevTools can be found here: https://developers.google.com/web/tools/chrome-devtools

3. Edit your example

Now switch over to VS Code to start editing the mod implementation.

The src folder contains TypeScript source files that will be compiled into the build folder. The root folder contains all static content, like the index.html, as well as any CSS and JavaScript files. It also contains a mod-manifest.json file that contains metadata about the mod. For more information about the folder structure and the project, see the README.md file.

If any file in the workspace is changed while the development server is running, the mod will be reloaded in Spotfire. As described in the general getting started guide, changes in the manifest are not automatically reloaded, instead you must click the Reload manifest button in the Mods development tool.

The SDK template for visualization mods contains a simple mod with a categorical X-axis, a continuous Y-axis, a dual mode color axis, and a mod property. The only source code file is located in src/main.ts, but in most cases a mod should be split in multiple source code files.

All metadata that concerns the mod is defined in the mod-manifest.json file. A list of the entries that are common to all mods can be found in the getting started guide. The entries that are specific to visualization mods are listed below:

For details, see the manifest schema.

Development in the Spotfire web client

When developing mods against the web client it is only possible to develop via a development server. Web browsers lack the file access that is needed to read files from a mod-manifest, which means that the Connect to file button will not be available in the web client.

The development server always serves content from http://127.0.0.1:8090, which according to the W3C specification is a potentially trustworthy origin. Some web browsers might behave incorrectly with regards to this, and if you run into a problem, try switching to Google Chrome, Microsoft Edge, or Mozilla Firefox.