Spotfire® - Tips and Tricks with Buttons

The standard Spotfire buttons have some limitations and aren't natively addressed (enter Spotfire Ideas Portal!).   Here's a work around for this limitation.

1. They don't auto-width:  So when my text areas change, and in an organisation with 50,000 people, screen sizes vary - the buttons width didn't change.  This meant some users couldn't see them, some had alot of space around them and generally they look akward
2. You can't style them:  Lets face it... they look ugly and were making my team feel sad!
3. You can't indicate their status:  So how do you know the button has been clicked?  It doesn't change colour OR indicate anything with an icon
4. Speaking of icons: You can't apply iconography to the buttons to draw the users attention.

Before we begin - here's a pic of something i created just recently using the button work-around:

LETS BANG OUT SOME BUTTONS

1. Create a text area and edit it in HTML to create two action item buttons and wrap them in a div.  Make sure you give each an id.

    <div id='buttonA'>
        <SpotfireControl id="3dca648f07194041bf9a52cba27a5108"/>
    </div>
    <div id='buttonB'>
        <SpotfireControl id="3dca648f07194041bf9a52cba27a5108"/>
    </div>

    

2. Now - where ever you want to create a pretty new button - set up another div and make sure you give it an id and class.  Notice I don't have any content in the div's.

    <div id="myButton1" class='myButtons'> </div>
    <div id="myButton2" class='myButtons'> </div>

   
   if you want to toggle the text upon click - i recommend an extra div to stop the text possibly making the button width 'jitter' when the text changes.
    

    <div id='myToggleButton' class="myButtons">
        <div id="labelButton3">
    </div> </div>

    

3. Now create a Document Property of String type called myButtonsStatus where you can keep the details of which button has been clicked.  I don't check the labels as I've found cases where labels aren't always reliable, plus if you have a script do something on click - it can set the myButtonsStatus and make it unmistakeable what was clicked.

4. Insert a label into the text area with the myButtonsStatus as the value.  Now group your label and two Action Item buttons together and wrap them in a div and hide them from the page. I usually put them at the bottom of the text area.

   <div style='display:none'>
       <div id='buttonA'>
           <SpotfireControl id="3dca648f07194041bf9a52cba27a5108"/>
       </div>
       <div id='buttonB'>
           <SpotfireControl id="3dca648f07194041bf9a52cba27a5108"/>
       </div>
       <div id='myButtonsStatus'>
           <SpotfireControl id="683ad7f2363e4147842bac4c495b7ad1"/>
       </div>
   </div>

    

5. Now add a JS script to the text area and add the following:

   // Set up buttons using their class name and build their styling.
   // I use % widths so they flex with the text area
   
   $(".myButtons").button().css({ 'width': '80%',
                                  'padding-top': '3px',
                                  'padding-bottom': '3px',
                                  'font-size': '12px',
                                  'background':'#50535b',
                                  'font-family': 'Century Gothic, sans-serif' });
   
   // Set their initial state where you have more than one button OR some button text
   // that toggles. I use the javascript call to get the label value as it seems more
   //  reliable than using the jQuery method of $('#xxx').text() - seems to be browser
   //  specific.
   
   switch (document.getElementById("myButtonsStatus").innerText) {
       case "button1":
           setBtnBg("myButton1","myButtons","buttonA");
           break;
       case "button2":
           setBtnBg("myButton2","myButtons","buttonB");
           break;
     default:
   };
   
   //Here is our universal function that does the clicking - you can do ALOT in here 
   
   function setBtnBg(id, className, buttonToClick){
       //first - click your action item button
       $("#" + buttonToClick + " :first-child").click();
       
       //then reset ALL of the buttons in our button class to a default 'unclicked button style'
       $("." + className).css({'background': '#4f4f4f', 'border-color':'#4f4f4f'});
       
       //then change the style of the button that was clicked to something snazzy
       $("#" + id).css({'background': '#4199b8', 'border-color':'#4199b8'});
   };
   
   // AND last but not least - bind a click action to all of our div buttons so when
   // they click - they mimic a click on our action item button.  NOTE: I assign the
   // click action using the button id's
   
   $("#myButton1").button()
                  .bind('click',function(){setBtnBg("myButton1","myButtons","buttonA");});
   $("#myButton2").button()
                  .bind('click',function(){setBtnBg("myButton2","myButtons","buttonB");});

    

6. Now for the toggling of the text - I do that by adding a bit more javascript (same script or separate - doesn't matter).  Lets pretend that myButton1 is our toggle text button and it toggles when it isn't selected.  I would recommend putting toggle/initialising type functions at the top of your JS script.

   if ($("#myButtonsStatus").text()=="button1"){
       $("#myButton1").text("I GOT CLICKED");
   }
   else {
       $("#myButton1").text("CLICK ME")
   };

    

And there you have it.  There's a huge amount more you can do from here.  look up jQuery .button() to see how to use icons.  Spotfire comes with most of the icon colour sets EXCEPT the white on transparent, so if you use the dark theme... you'll have to build your own like we did.

Here's a few more pics of the toggle buttons in play.  The 'SHOW AS TOTAL' has toggled from the above picture.  We also use the mini-horizontal bar button top right to switch the horizontal bar chart from the relative 100% stacked bar chart format to the standard stacked bar chart so users can see the proportional raw numbers.  That icon button also toggles how it looks upon click: