Using Spotfire Text Areas to Increase Usability of Analytics through HTML, Javascript and CSS

Introduction

Introducing analytics to a wider audience requires the analytics to be as accessible, usable, and familiar to end users as possible. Spotfire enables extensive customization of Text Areas through the use of JavaScript, CSS and HTML. This page will act as a repository for a series of quick tricks and tips on how to get the best user experience using Text Areas. Note that these examples do not require any additional libraries such as jQueryUI, so do not require external references to implement. Since Spotfire 11.5 and above, jQueryUI has been removed, the examples here are designed to work regardless of this change.

Default Styling of HTML

Create Modern Styled Links and Buttons

Create Foldout Side Panel

Pop Up Content and Forms

Accordions in Text Areas

CSS Tooltips

Show and Hide Content

Autocomplete Search Box

Date and Time Pickers

Text Area Examples

Below is a list of example usages of HTML, CSS, and JavaScript within Spotfire Text Areas. Each example has the code used that you can copy and adjust to suit your needs. These are just short examples, and of course, should be tested and checked within your own environment and Spotfire analyses.

Note that in later releases of Spotfire (11.5 onwards), the inclusion of jQuery may require to be manually added. You can view how to add jQuery to your Spotfire tools by reading this article.

Default Styling of HTML in Text Areas

By default, Text Areas display HTML in their unstyled format i.e. as your browser renders them. Therefore, you can apply your own styles to provide a custom and more modern look to your analytics and dashboards. This is achieved by adding a CSS (cascading stylesheet) to your Text Area. To do this in a safe manner that works with HTML Sanitation On (see links below on this), we add this as a JavaScript script. Follow these steps to do this:

Add a Text Area to your analysis. Right-click on this Text Area and select Edit HTML:
Click the icon to the right of all the icons that says Insert JavaScript when you hover it. Then select New Script and the script editor window will appear:

To add your CSS as JavaScript you need to add your CSS as a variable in JavaScript. Then you inject this CSS code into an HTML tag via JavaScript. See the code example below:

// Enter your CSS as a variable in Javascript
// Note the ` used to enclose this. 
// This is different from other quotes and important!
css=`<style>
.styledLinks a{
  background-color: #228B22;
  border: 1px solid #CCFFCC;
  border-radius: 5px;
  padding: 10px 20px;
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
  min-width:200px;
}

.styledLinks a:hover{
  background-color: #006400;
  text-decoration: none;
}
.active{
   background:#006400 !important;
   color:yellow !important;
}
</style>
`

// Inject the CSS into an HTML tag which has the id StyleDiv
document.getElementById("styleDiv").insertAdjacentHTML('beforeEnd', css);

Finally, we need to add a HTML tag to our Text Area HTML so the CSS is injected into this by matching the id of the HTML tag to the last line of the code above:

<!-- Put this at the top of your text area HTML -->
<div id="styleDiv"></div>

Now any HTML which matches any of the CSS selectors will be styled. For instance here is an HTML example using the code above:

<div id="styleDiv"></div>

<P><BR></P>
<P align=center>&nbsp;&nbsp;
<FONT size=2>Select region:</FONT> &nbsp;
<span class="styledLinks">
  <SpotfireControl id="3a3837ac2f7d48ed9921edbbf58321d4" />
  <SpotfireControl id="085ea5086eb248d5aa9afa8e96f0d74c" />&nbsp;
  <SpotfireControl id="658f0271aee341c4947c1a30fe6fae21" /> 
  <SpotfireControl id="338aab713dae4bdab15c20f7f341c0eb" />&nbsp;
</span>
</P>

Create Modern Styled Links and Buttons

Each Spotfire control you add is rendered as HTML. So by styling the HTML you can alter how your Spotfire action controls look for example. Using the technique above to add CSS via Javascript into our Text Area, we can alter how any action control appears whether it is a Link or Button action control. In this example, the Spotfire Controls are all action controls that are set to Links. The CSS code above alters any 'a' HTML tag found in a 'div' tag with the class 'styledLinks'. The result is shown on animation below

An additional aspect of this is to change the highlighting of the button to the last clicked. This can be done by storing which button/link was last clicked using the localStorage object and then reacting to this in Javascript to change the style of the relevant button. This allows to "remember" which button was last clicked when the pages loads. The page reloads when switching pages and sometimes some actions will cause the page to reload.

Add the following JavaScript to achieve this

// removes the "active" class from all links, 
// adds it back to the link that was clicked, 
// and stores the ID of the clicked link in local storage
function setActive(e){
   console.log(e.target.id)
   document.querySelectorAll(".styledLinks a").forEach(a=>{
      a.classList.remove("active")
      if (a===e.target){
	a.classList.add("active");
        localStorage.setItem("lastActiveId",a.id);
      }
   })
}

//adds a click event listener to all links with the class "styledLinks a", 
// which will call the setActive function when any of those links are clicked
document.querySelectorAll(".styledLinks a").forEach(a=>{
    a.addEventListener("click",setActive)
})

//retrieves the last active element's ID from local storage and adds the class "active" to it when the page loads
lastActiveElement = document.getElementById(localStorage.getItem("lastActiveId"));
lastActiveElement && lastActiveElement.classList.add("active");

This example was taken from the "Analyzing Stock Performance" sample analysis in which the buttons on the 'Revenue by country" page. were replaced with links.

A similar example of styling buttons can be read here: Spotfire-Tips-and-Tricks-with-Buttons

Create Fold Out Side Panel

If you follow this and use the template attached (see bottom of the page) for the additional scripts, the results should behave as the example shown below:

The side menu consists of 4 types of elements:

A native Spotfire filter or pieces of text
An accordion animation that collapses anything you place in it into a single row, which you can open and close by clicking on it
A side-bar animation that collapses anything you place in it into a single column, which you can open and close by hovering the mouse pointer over it.
Icons that are described in a stylesheet that can be stored on the web or on your own server.

The elements are organized in the side menu as such:

Pieces of text (describing for example information about the Spotfire page) and Spotfire native filters are placed inside an accordion animation
Accordion animations, as well as buttons or links to help emails, are placed in the sidebar animation. NOTE: these additional elements are not required for the side panel but rather act as additional template ideas for enhancing your Spotfire analyses and side panels. These require jQueryUI which was removed in Spotfire version 115. and beyond. So the downloadable template at the bottom of this page follows this guide to include your own jQueryUI. This ensures future compatibility with Spotfire.

The code is organized as such, and as in the example of the attached side_panel_template_with_jqueryui.dxp file:

The text visualization (right-click on the side menu>edit HTML; the text visualization is hidden behind the sidebar) contains HTML code (and CSS styling) that describes all the text in the menu as well as the inserted Spotfire filter elements.
All of this is wrapped into a <div> container onto which JQuery script is called (inserted in the same text visualization as an element) for animating that the bottom row collapses.
- The div ID is the name of the JQuery script that performs the collapsing of items.
  - Additional styling can be imposed by referring to a class in the div, to determine the spacing (height) of the rows. So anything outside (below) the row, anything that does not fit in the height determined to be the row height of the collapsed accordion, will be collapsed.
- The top row consists of an icon and a title text. These are not collapsed by the accordion animation as long as their body height is below that of the accordion.
- The bottom row contains the filter or text element that is collapsed.
  - Note that this row reaches beneath the Icon as well. If you remove the spacings (? ?) in front of the Spotfire filter the filter will move underneath the icon when the sidebar and accordion are opened.
  - So effectively, each of the menu items consists of a top row that consists of 2 cells, and a (collapsible) bottom row that consists of one cell.
All the divs are then wrapped by the <ul class="side-menu"> container, as well as a styling container (<li class="spotli">).
- <ul class> refers to the JQuery script defining the side menu opening and closing. In this animated element the accordion animations are placed, and in those are the native Spotfire filters and other text.
The icons are described in a stylesheet.
- With a JQuery element that is inserted in the same text visualization, you refer to the stylesheet which is a collection of icons.
- It is best practice for security and for maintenance (who knows when a third party may change something in the stylesheet without you knowing) to store this on your own Spotfire server and refer to that through the same JQuery element.
- In this template for easy sharing purposes, we refer to the free awesome font stylesheet hosted on their server.

Here is the HTML code that can be used for the Text Area:

<ul class="side-menu" style="overflow:hidden; bottom:28px;">
  <li class="spotli">
    <div id="accordion" class="spotli ws-menu-button" style="border-color:#17292a;background:#17292a">
      <H4 style="background:#17292a;border-color:#17292a"><a href="#">
          <span class="fa fa-info-circle"></span>&nbsp;&nbsp;Page Info</a></h4>
      <span style="color:white;background:#17292a;border-color:#143f3f">
        <table>
          <tr>
            <td style="color:white;border-color:#17292a;background:#17292a" width="45px">&nbsp;
            </td>
            <td width="200px">
              <font face="century gothic">
                <p>Place page info or a filter in this container.</p>
              </font>
            </td>
          </tr>
        </table>
      </span>
      <div>
  </li>
</ul>

Read the blog on this: Making Data Look Good

Adding Spotfire Drop Downs and Other Controls to the Floating Side Panel

When adding Spotfire controls to your side panel such as a drop-down menu, you may sometimes find they disappear behind the side panel, and that the side panel collapses as you select an item from the drop-down. This in particular will happen with the updated jQuery version and the removal of jQueryUI from Spotfire version 11.5 and above. Below are suggested changes (which are also applied in the downloadable template DXP), which mean drop-downs stay on top of the floating side panel but also that the side panel will not collapse until the item in the drop-down has been selected.

1) Wrap any drop-down controls in a DIV tag and give it an Id or a class. The Id or class name is important as it allows the Javascript to identify where the drop-down is. In this example we have used the class of 'dropdown-side panel:

<div style="color:white;background:#17292a;border-color:#17292a" class="dropdown-sidepanel">
	<SpotfireControl id="c4766eaa6cbc48d7800b1c490aa491f4" />
</div>

2) Add to a Javascript script, or append to an existing script such as the floating side panel Javascript the following:

// updated mouseout code for the side menu
$(".side-menu").mouseout(function(){

  // detect if a drop down is open and if it is, prevent the side panel collapsing
  if ($('div.DropdownListContainer').length == 0){
	  $(this).css("width","72px")
  }
});

// Fix for drop downs disappearing behind side panel
$(".dropdown-sidepanel").click(function(){
	$(".DropdownListContainer").css("zIndex", 999);
});


// prevent the side panel from folding away when the drop down is interacted with
$(".dropdown-sidepanel").mouseout(function(){
    event.stopPropagation();
});

It is important to note that as Spotfire dynamically generates drop-downs (and other controls), the example above is referencing content automatically generated by Spotfire (with the class DropdownListContainer). This could therefore affect other drop downs outside of the side panel as all drop downs generated opened by a user will also have this class. In future versions of Spotfire, this CSS class could change and therefore this code may not function in future versions.

Pop Up Content and Forms

Using CSS and sometimes JavaScript, it is possible to create popup content i.e. content that is hidden until the person clicks on a link for example. This can be good for hiding forms or additional content you don't already want to display. In Spotfire, this can be used to hide filters or document property controls for example. The example below is a pure CSS example, so does not require JavaScript (inspired by this codepen example: https://codepen.io/imprakash/pen/GgNMXO). However, there are many other options that do include JavaScript.

1) Add HTML to use use popups. There are two parts - the link to click to view the pop up, and the pop up itself:

<DIV id="styleDiv"></DIV>

<!-- The link to click -->
<div class="layout">
<a href="#" id="spotfire-popup">Click To Pop Up</a>
</div>

<!-- the popup content -->
<div id="spotfire-popup1" class="spotfire-popup-overlay">
 <div class="spotfire-popup">
   <div class="spotfire-popup-content">
    <div class="styledLinks">
	Username: <SpotfireControl id="049b3df609f44f6eac7bc1a819bf97d8" />
    </div>
    <a href="#" class="spotfire-popup-close">&times;</a>
   </div>
 </div>
</div>

2) Add a Javascript script to your text area which contains the CSS from the above link using the technique shown in the first example on this page. Here is the code used in the video below:

// change the first position below to be 'fixed' and the pop up box will appear outside the text // area (but this can cause other things such as annotations to be highlighted also)
var css = `

.spotfire-popup-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.spotfire-popup {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 40%;
  transition: all 5s ease-in-out;
}


.spotfire-popup .spotfire-popup-close {
  position: absolute;
  top: 0px;
  right: 10px;
  transition: all 200ms;
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
  color: #000;
}
.spotfire-popup .spotfire-popup-close:hover {
  color: #222;
}
.spotfire-popup .spotfire-popup-content {
  max-height: 30%;
  overflow: auto;
}

`;

// Inject the CSS into an HTML tag which has the id StyleDiv
$("<style/>").text(css).appendTo($("#styleDiv"));

// override the click events and apply styles for popups to open and close
$("#spotfire-popup").click(function(event){
	event.preventDefault();
	$('.spotfire-popup-overlay').css("visibility", "visible");
	$('.spotfire-popup-overlay').css("opacity", 1);
});

$(".spotfire-popup-close").click(function(event){
	event.preventDefault();
	$('.spotfire-popup-overlay').css("visibility", "hidden");
	$('.spotfire-popup-overlay').css("opacity", 0);
});

Accordions in Test Areas

Having accordions in Text Areas can be very useful as it not only saves space by hiding content, not in use but means you can have a lot of options and HTML in a text area without it being over cluttered and allowing for it to be arranged into categories. Below is the code to add an accordion to your Text Area. Note this example was inspired by this example on CodePen: https://codepen.io/brenden/pen/Kwbpyj

1) Add HTML to your Text Area which will implement the accordion. Here is the HTML from the example animation:

<div id="styleDiv">
</div>

<div class="accordion-container">
<ul class="accordion">
  <li>
    <div class="toggle">Boosted Trees<span> + </span></div>
    <div class="layout inner-hidden">
	You can place any content you like here whether it be HTML, or Spotfire filters and controls: <SpotfireControl id="cc9537981b4d41a7ba5be193c7701cc6" /><br><br>
	<SpotfireControl id="83b21dbd8a514af9a71e12658f7f9c28" />
    </div>
  </li>
  
  <li>
    <div class="toggle">Random Forest<span> + </span></div>
    <div class="layout inner-hidden">
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
    </div>
  </li>
  
</ul>
</div>

In the above HTML each li (bullet) tag contains an area that will open and close. The first div inside this with the class 'toggle' is the header for the accordion area. The content inside the next div is what is shown when that accordion area is opened. If you want an area to start opening when someone visits the page use the style inner-visible. If you want an area or all areas closed by default, then use the class inner-hidden on all your divs.

Note that this example uses button HTML tags which are not allowed with HTML Sanitation On (see content on this at the end of the article). In this case, you can change the buttons to be other tags such as 'a' anchor tags.

2) Add a Javascript script to your text area which contains the CSS from the above link using the technique shown in the first example on this page. Here is the code used in the video below:

var css = `
div.accordion-container ul {
    list-style: none;
    padding: 0;
}

div.accordion-container ul .inner-visible {
	display: block !important;
	visible: visible;
	padding-left: 1em;
	overflow: hidden;
}

div.accordion-container ul .inner-hidden {
	visibility:hidden !important;
	padding:0px !important;
	border:0px !important;
	height:0px !important;
}
  
div.accordion-container li {
	margin: .5em 0;
}
  
div.accordion-container li div.toggle {
	width: 98%;
	display: block;
	background-color: #ebfaeb;
	padding: .75em;
	border-radius: 0.15em;
	transition: background .3s ease;
	cursor: pointer;
}

div.accordion-container li div.toggle:hover {
	background-color: #adebad;
}

`;

$("<style/>").text(css).appendTo($("#styleDiv"));

3) Now add another Javascript script to your text area which has the actual Javascript to make the accordion work. Note you could combine these scripts but separating the scripts may help maintain and make making changes easier. Here you can paste the Javascript code as shown here:

$(function() {
  
  // react to click event of any .toggle class
  $('.toggle').click(function(e) {
  	e.preventDefault();
  
    // grab what was clicked
    var $this = $(this);

    // flip style to show or hide content
    $this.next().toggleClass("inner-visible");
    $this.next().toggleClass("inner-hidden");
	
    // change symbol beside header text
    if($this.find("span").text().trim() == "+"){
        $this.find("span").text(" - ");
    } else{
        $this.find("span").text(" + ");
    }
  });
});

CSS Tooltips

This example shows how to add tooltips to HTML content by only using CSS. Again, like the other examples, add your CSS by adding a javascript script to your Text Area and paste in this (largely CSS) code. This example is inspired by this example: https://chrisbracco.com/a-simple-css-tooltip/

1) Add HTML to your Text Area to set the tooltip text. In the code below the span tag contains the text that will be shown when someone hovers their mouse over the content shown in the Div with the class 'tooltip'. Note the div with the id styleDiv which is required for the CSS to be injected into the Javascript code added above.

<div id="styleDiv"></div>

This demo can be altered to change where the tool tip appears i.e. right, above, etc. (see HTML source)
<div class="margins">
	<a href="#" class="custom-tooltips">I am a tooltip
	<span>Example of using a tooltip from CSS in Spotfire</span>
	</a>
</div>

2) Add Javascript script to your Text Area. Note you can alter all the positions and styles in this code to suit your own tooltips:

var css = `
/* Tooltip container */

a.custom-tooltips {
	position: relative;
	display: inline;
}

a.custom-tooltips span {
	position: absolute;
	color: #FFFFFF;
	width: 200px;
	background: #000000;
	text-align: center;
	visibility: hidden;
	border-radius: 6px;
	line-spacing: 8px;
	padding: 6px;
}

a.custom-tooltips span:after {
	content: '';
	position: absolute;
	top: 100%;
	left: 35%;
	margin-left: -8px;
	width: 0;
	height: 0;
	border-top: 8px solid #000000;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
}

a:hover.custom-tooltips span {
	visibility: visible;
	opacity: 0.8;
	bottom: 30px;
	left: 50%;
	margin-left: -76px;
	z-index: 999;
}

div.margins{
	margin: 50px 0px 0px 50px;
}

`;

$("<style/>").text(css).appendTo($("#styleDiv"));

Show and Hide the Content

Another useful technique can be to control which content is shown in a Text Area based upon a value or Document Property. This can be achieved by adding a label to your Text Area which contains a Document Property. This document property could be set by a script or another control such as a drop-down for instance.
In the example below we are using a drop-down to set the document property. We are modifying the K-means clustering page from our Analyzing Stock Performance sample analysis.

1) Add a drop-down control to set the document property which will control if the content is shown or hidden:

2) Then add a Label to your Text Area which has the document property from the drop-down you added, assigned to it. Wrap this Spotfire Control in a div tag and give it an id. In this example, we are using the id: showhide-content. This id will be referred to in the JavaScript

3) Now add some content you want to be visible or hidden based upon this document property, wrap it in a div (or similar) tag and give it an id. In this example, the id we are using is: content-control

For a minimal example, the code looks like:

<div id="content-control"><br />
<h4>I am visible...</h4>
</div>

4) Now add the following Javascript which will set the visibility of the content:

// bind to watch for changes to the document property
$("#showhide-content").bind('DOMSubtreeModified',function(){
	
    // get the value of the document property
	var displaySetting = $('#showhide-content').text().trim();

	// you could also just use .toggle() here
	if (displaySetting == "display"){
		$('#content-control').show();
	}
	else{
		$('#content-control').hide();
	}

});

Simplest example in action:

Autocomplete Search Box

Click the following link to go to the guide on how to create an autocomplete search bar in Spotfire or check this other article to see how to create an autocomplete search bar that works only on the webplayer

Date and Time Pickers

Read this article article to find out how to include the date and time pickers in your Spotfire Text Areas: Date-and-Time-Pickers

HTML Sanitation

Each of the examples above can be used in Spotfire Text Areas without any additional JavaScript libraries, and with HTML sanitation on or off. Want to read up on this setting, see the following articles:

The guides in the examples here all rely on the technique to include CSS in your text areas as shown in the last link above.

License: TIBCO BSD-Style License

side_panel_template_with_jqueryui_1.dxp