Conditional Coloring of Spotfire Buttons

in , ,  
My friend was willing to color Spotfire Action buttons based on a value. 
It is a small but effective way of representation. You will actually come to know what are your expectations even before clicking on a color coded button.
Challenge here, This color should be picked automatically  
Challenge Accepted !
Lets Start -
  1. Create a calculated value or Label property which evaluates into a single color (e.g. red) or into a color code value (e.g. #454545). Enclose it is a span with id property-
    <span id='property' style="display:none">
       <SpotfireControl id="c281364f0af947c38752561b38be631e" />
    </span>
  2. Now enclose your action button inside another span with id ConditionalButtonColor like below. This way you are letting your code know - which button you are going to style 🧐
    <span id='ConditionalButtonColor'>
    <SpotfireControl id="edf0f3c8a1b945cb840cd0235fce8d66" />
    </span>
  3. Now you simply need this JavaScript code to be added to the text area. It retrieves value from property and set it a background color of action button inside ConditionalButtonColor .
    var flag=0
    function conditionalColor() {  
     colorValue=$("#property").text()
     if(flag!=colorValue){
      $('#ConditionalButtonColor .sfc-action-button').css({
        background:colorValue,
    color:"white"
        ,textAlign:"center"
        ,margin:"10px"
        ,padding:"5px"
        ,borderStyle:"outset"
        ,width:"100px"
      });
     }
      flag=colorValue
    }

    setInterval(conditionalColor,500)
  4. Save the text are and you are done ✅
For demonstration, I am updating color value a drop down property. You can update it via a Label Document Property, Calculated value or even from simple sting as well. Here is a screenshot with results -
Share: