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

Last updated:
8:35am Oct 11, 2021

Introduction

Introducing analytics to a wider audience requires the analytics to be as accessible, usable and familiar to end users as possible. TIBCO Spotfire enables extensive customisation 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. 

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

 

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), inclusion of jQuery may require to be manually added. You can view how to add jQuery to your Spotfire tools by reading this community 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:

  1. Add a Text Area to your analysis. Right click on this Text Area and selected Edit HTML:

  2. 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:

  3. 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!
    var css = `
    td{
      padding: 4px;
      vertical-align: top;
      text-align: left;
    }
    
    div.layout{
      padding: 8px 4px 0 2px;
      font-size: 13px;
    }
    
    h4
    {
      font-size: 16px;
      color: #73AE57;
      padding: 0px 0px;
      margin: 6px 0px 0px 0px;
    }
    
    h3.banner, h4.banner{
      display: block; 
      background-color: #379CDB; 
      padding: .5em; 
      margin: 0px;  
      color: white; 
      font-weight: 100; 
      text-align: left;
    }
    
    div.layout a{
      color: #26A2F0;
      border: 1px solid #efefef;
      background: #fff;
      padding: 4px 0px 0px;
      margin: 0px 0px 4px 0px;
      cursor: pointer;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      height: 26px; 
      font-weight: 500;
      font-size: 15px;
      width: 174px;
      display: inline-block;
      text-align: center;
    }
    
    div.layout a:hover{
      background: #efefef;
      cursor: hand;
      text-decoration: none;
    }
    div.layout a:active {
      position:relative;
      top:1px;
    }
    
    div.layout input {
    	height: 22px;
    }
    
    div.hide-content{
      display: none;	
    }
    
    div.outline-border{
     border-style:solid;
     border-color:#c6d9ec;
     border-width:1px;
    }
    
    `;
    
    // Inject the CSS into an HTML tag which has the id StyleDiv
    $("<style/>").text(css).appendTo($("#styleDiv"));
     
  4. 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>
    
    <div class="outline-border" align="center">
    <DIV class="layout" >
    Show me analysis of:<br /><br />
    <SpotfireControl id="b0903917735c4ed2b539aa6edcddbfa3" /><br />
    <SpotfireControl id="f03112662ddf4d68b42aaf62f6e3c9bf" /><br />
    <SpotfireControl id="8bc2659cb44945d586c42f3ffcc2dce3" />
    </DIV>
    </div>
    
    <div class="outline-border" align="center">
    <h3 class="banner">Other links</h3>
    <DIV class="layout">
    <SpotfireControl id="35f7202a09e24be8ab178ffb29382a05" /><br/ >
    <SpotfireControl id="2d139f3d6f7242f2a8f33db591fec47d" />
    </div>
    </div>
    
    <div id="current-page" class="hide-content">
    <SpotfireControl id="29676a3593a244c88ae0d7867b57ac42" />
    </div>



    The result of using these code examples is this:

    More on this below...

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 which are set to Links. The CSS code above alters any 'a' HTML tag found in a 'div' tag with the class 'layout'. The result is shown on the left of the video 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 in a document property, and then reacting to this in Javascript to change the style of the relevant button.  Follow these steps here to achieve this:

  1. Add a label into your Text Area and assign it a document property (of type String). In my example, my document property is called clickedLink:

  2. As in the example above, put this Spotfire Control inside a DIV tag which has a unique id assigned to it (above it is called current-page).

  3. Add a line to the script that runs when someone clicks your action control links/buttons to set this document property to be the same as the text in the action control:

    The code being: Document.Properties["clickedLink"] = LinkName

    Notice that LinkName is a script parameter passed into the script. You can then specify which value gets assigned to this in your Action Control edit screen. It is worth checking that when you click on an action control link that this document property gets updated as expected before moving onto the next step.

4) The final step is to add the Javascript to alter the link/button to highlight which button was clicked on last. Add a new javascript file which has the code:

// grab the value of the document property by taking the inner text of the div
var currentPage = $('#current-page').text().trim();
// change style of link to page user is actually on
$('a:contains("' + currentPage + '")').css('background','#E4F0DE');

// react to clicks on links on same page
// this monitors the document property for changes
$("#current-page").bind('DOMSubtreeModified',function(){

    // grab the button text that was clicked last from the document property
	currentPage = $('#current-page').text().trim();
    // change style of link to page user is actually on    
	$('a:contains("' + currentPage + '")').css('background','#E4F0DE');

	// set any link that isn't the one selected back to default style
	$('a:not(:contains("' + currentPage + '"))').css('background','#fff');

});

Note that to use this example you need to match all the names and ids used i.e. current-page etc.

A similar example of styling buttons can be read here: https://community.tibco.com/wiki/tibco-spotfire-tips-and-tricks-buttons

Create Fold Out Side Panel

The side menu consists out 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 side bar animation.

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

  • The text visualisation (right-click on the side menu>edit HTML; the text visualisation is hidden behind the side bar) 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 visualisation 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 (“&nbsp;”) in front of the Spotfire filter the filter will move underneath the icon when when the side bar and accordion are opened.
      • So effectively, each of the menu items consists of a the 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 visualisation, you refer to the stylesheet that 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 aswesomefont 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>

 

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:

Read the blog on this: https://community.tibco.com/feed-items/making-data-look-good

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 alreays 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 which do include Javascript.

1) 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: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}

.spotfire-popup {
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 40%;
  position: relative;
  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);
});

 

2) Now you just need to add HTML to use these styles. 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="layout">
	Username: <SpotfireControl id="049b3df609f44f6eac7bc1a819bf97d8" />
    </div>
    <a href="#" class="spotfire-popup-close">&times;</a>
   </div>
 </div>
</div>

Now you have a pop up form inside your text area such as is shown below:

Note that you can make the pop up appear outside of the Text Area. This is done by changing the first position style of the Javascript style you added in step one to be fixed instead of absolute. However, this can have adverse impact on other elements in Spotfire, so check it functions in the desired way.

Accordions in Text 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 being 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 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"));

 

2) 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(" + ");
    }
  });
});

 

Now you can HTML to your Text Area which will implement the accordion. Here is the HTML from the example video below:

<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 aera which 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 opened 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.

The final result:

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.

CSS Tooltips

This example shows how to add tooltips to HTML content with 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 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"));
 

 

2) 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 from 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>

 

The final result:

Show and Hide 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 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.

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, and wrap it in a div (or similar) tag and give it an id. In this example, the id we are using is: content-control and the code is:

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

 

4) Now add this 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();
	}

});

 

The final result:

Autocomplete Search Box

While listbox and other text filters are quick and easy ways to add the ability to apply text based filters for users, an user friendly method which is more familiar for users is to have an autocomplete search box. This is a common technique used on most websites such as Google and Amazon allowing suggestions to appear as the user types in search terms. This is especially useful if you have a large amount of text options for the user to filter by. This can be achieved in Spotfire also by following this guide. 

Unlike other examples on this page, this example does have a dependency on an external library (jQueryUI). However, at time of writing in Spotfire versions 7 to 11.2 this is included in Spotfire so does not need any extra work. Should you wish to include your own jQueryUI version please follow this guide.

The steps to implement the autocomplete are shown below:

1) Add a Text Area to your page which will hold the autocomplete search box

2) Right click, selected Edit HTML on your Text Area and add a DIV tag with the id 'search-div'. As with the other examples, we are also adding a div to hold our stylesheet code:

<div id="style-container">
  <!-- This element serves as a container for style elements added by the jQuery script. -->
</div>

<div id="search-div" style="padding-top: 6px; padding-left: 4px; font-size: 14px;"></div>

3) Now insert a new Javascript script (from the Edit Text Area top right icon) with the following code:

 $( function() {
	 
	// Inject the HTML to be HTML sanitation compliant
	var searchHTML = `<INPUT id='autocomplete-input' style='FONT-SIZE: 14px; HEIGHT: 24px; BORDER: #d2d2d2 1px solid; WIDTH: 320px;' placeholder=' Type in your search term here... '>
					   <INPUT id='search-button' type='button' value='Search'>`;
	$( "#search-div" ).html(searchHTML);

	// Autocomplete function for when a user types in the box
	$( "#autocomplete-input" ).click(function(){
			
		$( "#autocomplete-input" ).autocomplete({
		delay: 0,
		//minLength: 2,
		// read the calculated value into the source of the autocomplete
		source: JSON.parse($('#search-values').text().trim())
		})		
	});
	
	// react to clicking on search button
	$("#search-button").click(function(){
		var search = $("#autocomplete-input").val();
		if (search != "") {
			$("#hidden-search input").val(search).blur(); 
		} else if (search == "") {
			search = 'Reset';
			$("#hidden-search input").val(search).blur(); 
		} 
	});
 });
 
var css = `
	.ui-autocomplete {
	  max-height: 600px;
	  overflow-y: auto;
	  /* prevent horizontal scrollbar */
	  overflow-x: hidden;
	}

	.ui-autocomplete-category {
		font-weight: normal;
		padding: .2em .4em;
		margin: .8em 0 .2em;
		line-height: 1.5;
	}

	#search-button {
	  border: 1px solid #efefef;
	  background: #4c9ece;
	  color: white;
	  padding: 4px 12px;
	  margin: 0px 0px 0px 4px;
	  cursor: pointer;
	  -moz-border-radius: 6px;
	  -webkit-border-radius: 6px;
	  height: 30px; 
	  font-weight: 600;
	}
	#search-button:hover{
	  background: #00AAFF;
	}
	#search-button:active {
		position:relative;
		top:1px;
	}
`;

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

 

This Javascript does multiple things:

Firstly, it injects the HTML for an input text box that users will type their search terms into. This is where the autocomplete suggestions will appear. Second, it adds a search button to perform the search once a user selects one of the autocomplete examples. Note that this method is HTML sanitation friendly. If you have this option turned off you could simple add the HTML tags in the searchHTML variable above into your Text Area HTML directly. 

3) Now we need to add the data we want to be searched when users type into this search box. To do this we add a calculated value onto our Text Area. We will then use Javascript to read and parse this into the autocomplete search options:

4) Add another div tag to your HTML with the id: 'search-values'. In the example below we have added a style of display:none. This hides the contents of this div. However for testing you may not want to add this so you can view the contents of this div. 

5) Now add a calculated value inside this div: 

Define your Calculated Value to be the unique concatentation of the text column you wish to use as your search for the autocomplete. In my example, I am using the 'Neighbourhood Cleaned' column. Use the expression as shown below:

Substitute(Concatenate('["',UniqueConcatenate([Neighbourhood Cleaned]),'"]'),', ','","')

 

Why do we need these substitutions in the expression above? First we take the unique values of the column. This produces a comma separated list of values from our data column. We then want to convert this into a Javascript array. So we add [] around the text using the Concatenate expression. Finally, we need to ensure each unque value in our column is surrounded by quotes so they are treated as separate strings by Javascript. We do this with the Substitute command.

You can now test the autocomplete by typing some text into your search box and you should see suggestions appear which you can select. If you do not, go back and check the ids etc. are all correct and matching.

6) Now we have the autocomplete ready, we need a way to send the search term someone selects to a Spotfire filter to apply the filter required. We do this using a common Javascript technique used in many of the examples above of creating a Spotfire input control inside a Div and then populating this using Javascript. So we add a new div tag to our Text Area with the id: hidden-search. Again we have added a style to hide this for this example below but you may not want to include this during testing so you can see the search term from the autocomplete appears here after clicking the search button:

<div id="hidden-search" style="display: none;">
</div>

Now add your Sptofire Property Control input field and assign a Document Property to it:

7) The final aspect is to have an IronPython script attached to this Document Property so that the script runs and applies a filter based upon the search term chosen in the autocomplete box. To do this edit the input field and click the Script option beside the Document Property. 

8) Select to create a new script and add the following code. NOTE: you will need to change the filter line where the columnToFilter variable is created to match your own column name:

from Spotfire.Dxp.Application import Filters as filters
from Spotfire.Dxp.Application.Filters import *
from System.Collections.Generic import Dictionary
from Spotfire.Dxp.Data import *

## Set the column name to apply the autocomplete text filter to
## In your example - change this to be your column name to apply the filter to
columnToFilter = "Neighbourhood Cleaned"

## perform search if text supplied
if searchText != "Reset":
	filter = Document.ActivePageReference.FilterPanel.TableGroups[0].GetFilter(columnToFilter);
	filter.FilterReference.TypeId = FilterTypeIdentifiers.ListBoxFilter;
	locCodeFilterReal = filter.FilterReference.As[filters.ListBoxFilter]();
	locCodeFilterReal.IncludeAllValues = False;
	locCodeFilterReal.SetSelection(searchText);
else: ## clear search
	filter = Document.ActivePageReference.FilterPanel.TableGroups[0].GetFilter(columnToFilter);
	filter.FilterReference.TypeId = FilterTypeIdentifiers.ListBoxFilter;
	locCodeFilterReal = filter.FilterReference.As[filters.ListBoxFilter]();
	locCodeFilterReal.IncludeAllValues = True;
	locCodeFilterReal.SetSelection();	

 

Now add a parameter to your script called searchText and assign it the document property you created in step 6) above:

Now, the autocomplete should be ready to use. Here it is in action:

A few important notes on this example:

  • If you search with no text in the search box it will reset the filter and go back to all data. You may want to actually add a 'reset search' button. This can easily be achieved by adding an action control calling the same IronPython script created above and just passing the value 'Reset' in as the searchText
  • This example only works on exact search terms. So the user must choose one of the search options from the autocomplete suggestions. However, this example could be altered to allow for partial text searching also by editing the IronPython script which applies the filter.
  • There are many nice ways to make the autocomplete work and look such as including categories, having minimum text searches etc. You can find out mroe at the jQueryUI autocomplete examples page.
  • If you have a very large amount of data you wish to expose to the autocomplete, it may be better to automate writing out the Javascript array to a file instead for the autocomplete to read, or even use a web service called from the jQuery to perform the autocomplete live. See methods from the jQueryUI autocomplete site on this.

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 last link above. 

License:  TIBCO BSD-Style License

Attachments

AttachmentSize
Binary Data template_ux.dxp758.82 KB

Feedback (5)

I have updated the accordion example so there are no conflicts with some Spotfire controls in some use cases. This new method is more robust. 

Colin Gray 6:49am Apr. 01, 2021

Hi Marcio - I think technically it might be possible (I presume you mean a drop down created using a Text Area in Spotfire) but it means overriding the styles applied by Spotfire behind the scenes. As Spotfire generates dropdowns as divs dynamically, it can be hard to control this. It also has a risk that if you override the styles of these div dropdowns, the Spotfire code could change in future versions and break your styling.

For this reason, I always recommend never to override Spotfire's own HTML or CSS.

Colin Gray 3:08am Jun. 18, 2020

Hello Collin!

Is there any chance to stylize a Dropdown using the same technic above?

Regards,

Marcio

marcio.sergio 2:31pm May. 21, 2020

Hi Colin,

Thanks for sharing all those useful tips to (steal) use.

Regarding HTML sanitation and taking into account the level of customisations that is curently possible to achieve using external libraries, CSS, JS, etc within TextAreas... and many of those customisations readily avilable in community.tibco.com. Do you think is still advisable to keep HTML sanitasion on from a security point of view?

clruiz 6:44am May. 07, 2020

Hi,

Thanks for sharing this. It looks really great. I have a question about how to allow two text area overlapping. 

chunleiliu1995 11:55am May. 01, 2020