Customer Banners (Ads) - SpiceUp. AX and SpotfireX Disclaimer



If you find this site useful and you want to support, buy me a coffee   to keep this site alive and without ads.

Highlight selected spotfire action control buttons






html
<style>

.on{
  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;
}

/*comment this one for original on style*/
.on {
    background-color: #ABFF00;
    box-shadow: rgb(0 0 0) 0 0px 0px 0px, inset rgb(49 54 56) 1px 1px 1px 1px, rgb(223 223 223) 0 0px 7px;
}

.container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    backgrond:yellow;
}
.container > div {
    margin: 0px;
    padding: 0px;
    xwidth:220px;
    xheight:50px;
    xbackground-color: rgb(14,145,172);
    xborder-radius:5px;
    text-align:center;
    xcolor:white;
}

.r3 {
 font-weight:bold;
 width:100%;
 border-bottom:1px solid black;
 margin-right:20px; 
 text-align:center 
}

</style>


<div class="container">

   <div>
 <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>
   <div>
   <div class='r3'> Options</div>
    <TABLE border=0  width="1px" >
      <TBODY>
 <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>
 <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>
 <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>
 </TR>
      </tbody>
    </table>
   </div>
</div>



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


//make day selection buttons highlight when clicked
$("#dayBtns input").click(function(){
    $("#dayBtns input").removeClass("on");
    $(this).addClass("on");
    window.localStorage.setItem("daysBtns",this.id);
})

//make on/off help buttons highlightable
$("#helpBtns input").click(function(){
    $("#helpBtns input").removeClass("on");
    $(this).addClass("on");
    window.localStorage.setItem("helpBtns",this.id);
});

//add magic to details on|off buttons 
$("#detailsBtns input").click(function(){
    $("#detailsBtns input").removeClass("on");
    $(this).addClass("on");
    window.localStorage.setItem("detailsBtns",this.id);
})


//make spotfire action control buttons to turn on|off filter panel to highlight
$("#filterBtns input").click(function(){
    $("#filterBtns input").removeClass("on");
    $(this).addClass("on");
    window.localStorage.setItem("filterBtns",this.id);
})



//highlight saved items
document.getElementById(window.localStorage.getItem("daysBtns"))?.classList.add("on")
document.getElementById(window.localStorage.getItem("helpBtns"))?.classList.add("on")
document.getElementById(window.localStorage.getItem("detailsBtns"))?.classList.add("on")
document.getElementById(window.localStorage.getItem("filterBtns"))?.classList.add("on")



6 comments:

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
thanks!

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

Jose,

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!

Alina Tudor said...

Hello, very good article. It works very well. I needed this for a long time.
I just have one question. When I leave the page where I created the buttons, after I return to it, the last selected button does not remain active (the first button is automatically selected). Is there a way to fix this? Thank you!

Jose Leviaguirre said...

Thank you Alina,

I fixed the code so it can remember what was highlighted

Alina Tudor said...

Thank you very much, Jose!
The new code works perfectly!!! :)
It's great that there are such talented and passionate Spotfire people sharing their knowledge with us.
Hats off!