Jump to content
We've recently updated our Privacy Statement, available here. ×
  • 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!

    image.thumb.png.343a789bc6a49e82d26bc5c00c2c28aa.png

    image.thumb.png.fc55f503f1fb6927006f646c05119d67.png

    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

    html.png.d0cbfd67c4c20437075d12d798c245c7.png

    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. 

    image.png.04f2087bfa4700de7e8de1c1d2c398d5.png

     

     

     

     

     

     

    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>

    image.png.ba051aab779e1d86905742c2dd0eb882.png

    However we can place the html code inside a JS like this:
    html2.gif.759371bc921646a98d80778d60e59798.gif
     

    image.png.8a5bc6e8d1091f06ba4280f6be4857e9.png

    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
    HTML4.thumb.png.eaf94bdb4bf3808bdde7212cef42fe9b.png

    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.  
    HTML5.gif.42c7609c0996dc05062a59097dc8f1b0.gif
     
    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

    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

    image.png.74e1e17a377eb4ee258b46bcac40ab3c.png

    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

    popups.thumb.gif.57713f1e4ea9bed47ca339ee9bd790a2.gif

     

    Other References and Resources

    Spotfire JavaScript API (Mashups)

    1. How To Use The Spotfire® JavaScript API
    2. How To Embed A Spotfire Visualization In A Website
    3. Spotfire® JavaScript API Examples
    4. Spotfire® JavaScript API Overview
    5. Spotfire® JavaScript API: New Capabilities in 12.0
    6. Test Utility Example for the Spotfire® JavaScript API
    7. How to execute any IronPython script from the JavaScript (mashup API) in Spotfire®
    8. A JavaScript extension for interactive Spotfire Mashups
    9. Mashup Example With Multiple Views Using Spotfire® JavaScript API
    10. Spotfire JavaScript Mashup API and Technique to Display a Single Visual from a Page
    11. Using the SF 7.5 API to embed visualizations in a webpage
    12. Create a Configuration Block in Spotfire®

    Spotfire Mods

    1. Spotfire Mods Developer's Hub
    2. Spotfire® Mods Overview
    3. Spotfire® Mods FAQ

    JSViz - JavaScript Visualization Framework

    1. JavaScript Visualization Framework - JSViz and Spotfire®
    2. How to transition existing visualizations from JSViz to Mods
    3. How to reuse a Spotfire JSViz example and apply it to your data.
    4. How to create a Network Chart visualization for Spotfire® using JSViz and ZoomCharts
    5. Displaying a Sankey chart in Spotfire using TIBCO Enterprise Runtime for R and JSViz
    6. Displaying TERR Graphics in Spotfire® using JSViz
    7. Spotfire® Funnel Chart using JSViz

    FAQ

    1. Is Java and JavaScript the same? No. Java is requires a compiler to run. JavaScript does not. They are not related.
    2. Is JS and JavaScript the same? Yes, JS is a shorthand for JavaScript.
    3. Are there any good JS for Text Area best practices? Yes, check out the Best Practices for Writing Custom JavaScript Code in Text Areas
    4. Does Spotfire Mods use JavaScript? Yes
    5. 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
    6. 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.
    7. 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.
    8. What are Mods? Mods is the latest way to create custom visualizations with JSimage.pngimage.pngimage.pngimage.pngrtaImage.gifrtaImage (1).gifhorizmenu.gifaccordien.gif

    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...