Introduction
Spotfire gives users the ability to enhance their analytics tools and dashboards through the use of HTML, Cascading Style Sheets (CSS) and JavaScript. This is performed through the Text Area visualization which allows Spotfire users to quickly and easily create controls to enhance their dashboards such as filters, buttons and navigation without writing any code. However, the text Area is also highly extensible allowing custom HTML, CSS and JavaScript to be written to bring even more customizations and functionality to a Spotfire dashboard.
There are different ways to extend Spotfire with JavaScript such as the use of JavaScript in Text Areas or by developing web pages (Mashups), using the JSViz extension or developing new visualizations through Mods. This hub is focused on JavaScript in Text Areas, but contains some references and tips for the JavaScript Mashup API and Mods. To learn other ways about Extending Spotfire®
This hub is targeted not only for the developer, but for anyone using Text Areas in Spotfire Analyst with little or no experience with JavaScript. Just copy and paste the code from the Tips and Tricks, Examples and Widgets article to be able to add to enhance your dashboard with popups, date pickers, accordion panels, mastheads, sidebars, popup-filters and many more!
What is JavaScript
JavaScript, often abbreviated as JS is a scripting programming language mostly used in web technologies. In the Spotfire context, it is another way to extend and enhance functionality. JS can interact with other web technologies such as HTML and CSS. Spotfire uses JavaScript in Text Areas, Mods and via Mashups
What are Spotfire Text Areas
The text area not only are intended to provide analysis information such as the purpose of a page or add images, links, and buttons, which can initiate actions such as navigating to other page, apply a bookmark, reset filters or run a data function. It can also be used to enhance the look and feel of your dashboard. The text area is not a visualization as such, but it can be placed within a page just like a bar chart or scatter plot. Think of a Text Area like a mini web page where you can not only add Spotfire functionality, but also web technologies such as HTML, CSS and JS
You can edit the Text Area by using the WYSIWYG editor or by editing the underlying HTML. The "Insert JavaScript" button on the toolbar is only available in the Edit HTML mode
Here is an introductory video on what Text Areas can do
JavaScript in Text Areas
If you are familiar with JavaScript and Text Areas, you might want to jump to the Best Practices for Writing Custom JavaScript Code in Text Areas article or skip to the next section. If not, keep reading to find out how is JS used in Spotfire.
There are many resources on how to use JavaScript out there. A common misconception is to compare or think Java and JavaScript are somewhat related. If you want to learn about JS, do not get confused by Java. These are different languages. Java requires a compiler to run while JS does not. Spotfire analyst does not support Java. Here is an excellent resource on how to get started learning JavaScript, but again, learning JS or how to program it is not required to start using JS sample code from the Usability and Widgets section at the end of this article.
JavaScript in Web Pages (Mashup)
With the Spotfire® JavaScript API it is possible to embed Spotfire visualizations and dashboards into web pages. The API supports customized layout and enables integration with external web applications. Read more about the Spotfire® JavaScript API Overview or jump directly here to see some demos in action
JavaScript to create new visualizations Mods
JavaScript can also be used to extend Spotfire by creating new visualization using the Spotfire Mods API. If you are a developer and interested in creating your own custom visualization for Spotfire, checkout the Spotfire Mods Developer's Hub
JavaScript for JSViz
This JavaScript Visualization Network was available before the Mods API was available, which is another way to create visualizations using JavaScript. If your version of Spotfire does not support the creation of new visualization Mods, then upgrade to version 11+. If for any reason, you still need to work on JSViz, visit the JavaScript Visualization Framework - JSViz and Spotfire®
Fundamentals
Best Practices
It is always important to have a good basis to use and implement JavaScript in Text Areas properly. This article is an excellent guide and recommendation for this. It is a must to read. It is important to mention that Spotfire can be used within the scope of the Text Area, but Spotfire provides no guarantee whatsoever of the correctness, usability or compatibility of these. Your use of any of those libraries is entirely at your discretion and is not supported or warranted by Spotfire. This means that any coding provided in these articles is also not supported or warranted by Spotfire.
CSS, HTML5 and HTML Sanitation
HTML sanitation, driven by security measures, can limit the use of HTML tags. However, JavaScript provides a solution for implementing HTML tags even with sanitation enabled. HTML5 brings significant enhancements, but when sanitation is active, certain tags may not be supported. Injecting HTML markup through JavaScript becomes necessary in such cases. Additionally, CSS can be applied to Text Areas using JavaScript, enabling customization while maintaining clean and manageable code.
HTML Sanitation
HTML Sanitation is a server setting that not always we have control, but the Spotfire administrator constrained by corporate policies. And it is there for a reason, mostly security. This can be frustrating for the developer to freely use the HTML editor on Text Areas without any constraint. However, there is a way to use and implement any HTML tags with the use of JavaScript.
HTML5
HTML5 is the latest and major HTML version that includes so many enhancements, but when html sanitation is on, many of these tags are not supported. In this case, the only and best way is to include the HTML markup in JavaScript and "inject" the markup to a placeholder.
For example, if we want to use the <details> tag when html sanitation is on, we can add a placeholder to the text area and then add the markup. The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element. The next section explains step by step how to add HTML in JavaScript files and more over, how to move existing elements already included in Text Areas in your JS Script.
HTML Templates
<details> <summary>Details</summary> Something small enough to escape casual notice. </details>
However we can place the html code inside a JS like this:
![]() |
HTML
<div id="myHTMLPlaceholder">this should be replaced</div>
details.js
document.getElementById("myHTMLPlaceholder").innerHTML =` <details> <summary>Details</summary> Something small enough to escape casual notice. </details> `
![HTML3.gif.7e9baca96430328608d8238a9465d16f.gif](http://content.invisioncic.com/h329577/monthly_2024_04/HTML3.gif.7e9baca96430328608d8238a9465d16f.gif)
details.css
style = ` //note the back quote <style> #myHTMLPlaceholder details { border: 1px solid #aaa; border-radius: 4px; padding: .5em .5em 0; background:whitesmoke; width:300px; } #myHTMLPlaceholder summary { font-weight: bold; margin: -.5em -.5em 0; padding: .5em; background:white; cursor:pointer; } #myHTMLPlaceholder details[open] { padding: .5em; } #myHTMLPlaceholder details[open] summary { border-bottom: 1px solid #aaa; margin-bottom: .5em; } </style> ` //inject onto textarea placeholder document.getElementById("myHTMLPlaceholder").insertAdjacentHTML("afterend",style)
Spotfire controls and JavaScript
![HTML5.gif.42c7609c0996dc05062a59097dc8f1b0.gif](http://content.invisioncic.com/h329577/monthly_2024_04/HTML5.gif.42c7609c0996dc05062a59097dc8f1b0.gif)
![HTML6.png.9bd20c03a6d6a9f3ab2418fe79319e91.png](http://content.invisioncic.com/h329577/monthly_2024_04/HTML6.png.9bd20c03a6d6a9f3ab2418fe79319e91.png)
HTML
<div id="myHTMLPlaceholder"> <div> <SpotfireControl id="448a7a548d7743a08e08af23e6da9647" /> ◄- Replace with a Spotfire control </div> </div>
details.js
//detach my placeholder contents ph = document.getElementById("myHTMLPlaceholder") controls = ph.removeChild(ph.firstElementChild); document.getElementById("myHTMLPlaceholder").innerHTML =` <details> <summary>Details</summary> Something small enough to escape casual notice. </details> `; //append placeholder contents ph.querySelector("details").append(controls); //document.getElementById("myHTMLPlaceholder").append([...controls]); //templateContents.append(...popupContents.childNodes);
Third Party JavaScript Libraries
Be careful when using third party JavaScript libraries! Some JavaScript libraries can modify the DOM outside the text area. The library can remain active on other pages even if it is not included in that other page. Always refresh the browser if using JS Libraries by pressing Ctrl+Alt+Shift+F5 to ensure no tracebacks are kept somewhere outside the Text Areas.
JQuery and JQuery-UI
Here is a video that explains how to properly use and install jQuery and jQueryUI
Font Awesome
Font Awesome is a popular icon library. To use, just create a placeholder on an text area in html mode and add this script
HTML
<div id="fontAwesome"></div> <h3>Font awesome test</h3> <i class="fa-regular fa-heart"></i> <i class="fa-solid fa-pen-nib"></i> <i class="fa-solid fa-house"></i> <i class="fa-solid fa-chart-line"></i> <i class="fa-solid fa-chart-simple"></i> <i class="fa-solid fa-chart-line"></i> <i class="fa-solid fa-gear"></i> <i class="fa-solid fa-helmet-safety"></i> <i class="fa-regular fa-circle-question"></i> <h3>size test</h3> <i class="fa-solid fa-coffee fa-2xs"></i> <i class="fa-solid fa-coffee fa-xs"></i> <i class="fa-solid fa-coffee fa-sm"></i> <i class="fa-solid fa-coffee"></i> <i class="fa-solid fa-coffee fa-lg"></i> <i class="fa-solid fa-coffee fa-xl"></i> <i class="fa-solid fa-coffee fa-2xl"></i>
fontAwesome.js
document.getElementById("fontAwesome").innerHTML = `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"" />`
If your company has a firewall that prevents from fetching the resources from the content delivery network cloudfare.com, you can just replace the JS with the contents from https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js or get the latest version from https://cdnjs.com/libraries/font-awesome. But be careful, because if you remove the script from the text area, font awesome will remain active. To ensure is gone, refresh the page from Tools > Development > Reload Browser or by pressing Ctrl+Alt+Shift+F5.
Tips and Tricks, Widgets, Examples and Tutorials
This section was moved here for easier maintenance in which you can find widgets like accordions, popups, side panels, etc, articles and tutorials on how to create and enhance the usability of Spotfire
Other References and Resources
Spotfire JavaScript API (Mashups)
- How To Use The Spotfire® JavaScript API
- How To Embed A Spotfire Visualization In A Website
- Spotfire® JavaScript API Examples
- Spotfire® JavaScript API Overview
- Spotfire® JavaScript API: New Capabilities in 12.0
- Test Utility Example for the Spotfire® JavaScript API
- How to execute any IronPython script from the JavaScript (mashup API) in Spotfire®
- A JavaScript extension for interactive Spotfire Mashups
- Mashup Example With Multiple Views Using Spotfire® JavaScript API
- Spotfire JavaScript Mashup API and Technique to Display a Single Visual from a Page
- Using the SF 7.5 API to embed visualizations in a webpage
- Create a Configuration Block in Spotfire®
Spotfire Mods
JSViz - JavaScript Visualization Framework
- JavaScript Visualization Framework - JSViz and Spotfire®
- How to transition existing visualizations from JSViz to Mods
- How to reuse a Spotfire JSViz example and apply it to your data.
- How to create a Network Chart visualization for Spotfire® using JSViz and ZoomCharts
- Displaying a Sankey chart in Spotfire using TIBCO Enterprise Runtime for R and JSViz
- Displaying TERR Graphics in Spotfire® using JSViz
- Spotfire® Funnel Chart using JSViz
FAQ
- Is Java and JavaScript the same? No. Java is requires a compiler to run. JavaScript does not. They are not related.
- Is JS and JavaScript the same? Yes, JS is a shorthand for JavaScript.
- Are there any good JS for Text Area best practices? Yes, check out the Best Practices for Writing Custom JavaScript Code in Text Areas
- Does Spotfire Mods use JavaScript? Yes
- Can I use this JavaScript hub for Spotfire to implement in Mods? This article is more about how to use JS in Text Areas, but some tips, tricks and techniques can also be used while developing Mods. Here is the Spotfire Mods Developer's Hub if you want to learn more
- In how many ways I can use JS in Spotfire? You can use JS to extend Spotfire on Text Areas, Web Pages and Mods and JSViz to create custom visualizations.
- What is JSViz? The JavaScript Visualization Network is a Spotfire plugin extension that can run JS to mainly to create custom visualization before Mods were available.
-
What are Mods? Mods is the latest way to create custom visualizations with JS
Recommended Comments
There are no comments to display.