Warning when upgrading to Spotfire 10

TIBCO has deprecated the JQueryUI Javascript library in the latest Spotfire 10.0 release

TIBCO Community pages show us how to use JQuery properly

Highlight selected spotfire action control buttons


  background-color: #ABFF00;
  box-shadow:   rgba(45, 163, 215, 0.5) 0 0px 0px 0px, 
           inset rgb(45,163, 215) 0 -2px 0px, 
                 rgb(45,163, 215) 0 0px 7px;

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
.container > div {
    margin: 0px;
    padding: 0px;
    xbackground-color: rgb(14,145,172);

.r3 {
 border-bottom:1px solid black;


<div class="container">

 <div class='r3'> Last <SpotfireControl id="action_button_control_here" /> days</div>
<span id='dayBtns'>
 <SpotfireControl id="action_button_control_here" /> <SpotfireControl id="action_button_control_here" />  <SpotfireControl id="action_button_control_here" /></span>
   <div class='r3'> Options</div>
    <TABLE border=0  width="1px" >
 <TR id='helpBtns'>
  <TD title="Shows subtitle (help) for each visualization">Help</TD>
  <TD ><SpotfireControl id="action_button_control_here" /></TD>
  <td ><SpotfireControl id="action_button_control_here" /></TD>
 <TR id='filterBtns'>
  <TD title="Shows or hides the Details on Demand Panel">Filters</TD>
  <TD ><SpotfireControl id="action_button_control_here" /></TD>
  <td ><SpotfireControl id="action_button_control_here" /></TD>
 <TR id='detailsBtns'>
  <TD title="Shows or hides the Details on Demand Panel">Details</TD>
  <TD ><SpotfireControl id="action_button_control_here" /></TD>
  <td ><SpotfireControl id="88ed6f5873ad4fb0b4cb6542696f4e3e" /></TD>

function lightsOff(cssSel){$(cssSel).removeClass("on")}

//make day selection buttons highlight when clicked
$("#dayBtns input").click(function(){
    $("#dayBtns input").removeClass("on")

//make on/off help buttons highlightable
$("#helpBtns input").click(function(){
    $("#helpBtns input").removeClass("on")

//add magic to details on|off buttons 
$("#detailsBtns input").click(function(){
    $("#detailsBtns input").removeClass("on")

//make spotfire action control buttons to turn on|off filter panel to highlight
$("#filterBtns input").click(function(){
    $("#filterBtns input").removeClass("on")

//highlight default buttons 
$("#dayBtns input:first").addClass("on")
$("#helpBtns input:last").addClass("on")
$("#detailsBtns input:last").addClass("on")

$("#filterBtns input:last").addClass("on")


sami88badminton said...

This is not working for me.
there is a error which says "The element 'style' is not supported"

I would be very grateful if you can help me out

Jose Leviaguirre said...

Hello Sami,

Make sure to have HTML sanitation off. If you have the right permissions, you should be able to Tools > Admin Manager > Preferences > -some group- > TextAre.Preferences > PerformHtmlSanitation = False. If not, talk to your spotfire admin.

Unknown said...


I just stumbled across this and am looking to implement it. Could you possibly explain how you are assigning each of the "days" buttons the values so that when you click them the visualizations also respond? I am assuming there is a document property set to pass that value down to the visualizations but wanted to see if you could explain? Thanks!