Basic Text Area Mod for Spotfire®

The basic text area mod allow you to add basic textual descriptions to dashboards and analyses from the Spotfire Web UI.

Data Requirements

There are no data requirements since the Mod does not display any data from the analysis.

Setting Up the Mod

1. Switch your analysis to Editing mode.
2. Double click in the Mod.
3. Type in any text. Use Markdown for basic formatting.
4. Hit Save to commit your changes and display the text.
5. Hit Cancel to ignore any changes.

Markdown Formatting

Simple formatting can be done using Markdown:

# Header 1
## Header 2
### Header 3

- List 
- List
  - Sublist
  - Sublist
- List
- List

1. One
2. Two
3. Three
  
*Italic*
  
**Bold**

HTML

More advanced formatting can be done with inline HTML, E.g.

<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>

Styling

By default the text area will use the same style as the rest of Spotfire. E.g. it adapts to light and dark mode and you can change the font family, font size etc. by changing the general visualization font.

More advanced styling can be done with an inline CSS, E.g. the following will change all primary headers to red:

<style>
  h1 {
    color: red; 
  }
</style>

Images

Vector drawings can be added using SVG:

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>

In a terminal window:

• npm install
• npm start

In a new terminal window:

• npm run server

• Spotfire Community Exchange: A safe and trusted place to discover ready-to-use Mods
• Developer Documentation: Introduction and tutorials for Mods developers
• Mods code examples on GitHub: A public repository for example projects