JavaScript Component Hub for Spotfire

Set of articles and links for anyone using JavaScript in Spotfire. Not just for developers, but for anyone with little or no JavaScript knowledge. For end users just copy and paste code samples to create popups, date pickers, accordion panels, mastheads, sidebars, popup-filters and many more! Developers can also learn general concepts, best practices and tips and tricks.

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.

With or without HTML Sanitation, it is always a good practice to keep additional html markup in JS. It keeps the analysis clean and easy to maintain.

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

HTML templates are powerful way to create html markup from JavaScript. In this section we showing and example on how to add HTML on JavaScript files. Consider the following html code not supported when html sanitation is on:

<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>
`

This approach of including html elements is a good practice not only to ensure compatibility when html sanitation is turned on or off

CSS in Text Areas

We can add some style to change the look and feel by adding CSS to the JS. As simple as it can be to add style tags that are also not supported in Text Areas, we can follow the same approach to add this markup. Having a separate css file can be reused and can keep the contents of the text area clean and easy to manage.

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

Spotfire controls are placeholders created by the Spotfire text area editor. These placeholders are then rendered into multiple html elements that conform the Spotfire controls we know of. Let's say we want to add a Spotfire control within the HTML defined inside a JS. We first need to create the Spotfire Control in the text area and the move it programmatically. Here is one way to detach the contents of the placeholder and re attach it later.

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

As mentioned in the Best Practices for Writing Custom JavaScript Code in Text Areas there are some JavaScript libraries used by Spotfire that can change from one version to another. For example, from version 11.5.0, the jQuery UI Libraries are no longer distributed with Spotfire. It might be the case that in future versions of Spotfire,

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

These are two different libraries but jQuery-UI depends on jQuery. The former is used to manipulate the DOM objects while the dependent library is for the User Interface such as dialogs, accordions, etc. Refer to this article to learn How to include your own instances of jQuery and jQueryUI in Text Areas and avoid using the jQuery version that uses Spotfire to avoid version conflicts. It will also ensure functionality if future versions of Spotfire no longer support these libraries.

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)

Spotfire Mods

JSViz - JavaScript Visualization Framework

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