Use Cases of JavaScript in Salesforce: Change Table Row Colours on the basis of criteria

In the ever-changing technological era, we often come across a new programming language that is being introduced to match the requirements of current problems and ease the life of software developers. Some languages just come by and some leave their essence and make an impact. JavaScript, being one such language, is highly used and preferred when it comes to making web pages or applications interactive and dynamic. It is compatible with almost all modern web browsers without the need for additional plug-ins and can also be used in combination with other back-end languages to create a dynamic UI. Since JavaScript is not a full-fledged programming language it is mostly used with HTML or any other front-end language and has certain limitations. In this series, we provide you with some useful code snippets that might save some time. Below is one such Salesforce JavaScript Use Case.

What does this code do?

Change row color using JavaScript when a particular column value is selected. In the below code the row color changes to Red when the “Bandwidth” column has value as “Unavailable” and row color changes to Green when Bandwidth column has a value other than “Unavailable” and has a date value in “Confirmed” column.

When can it be used?

The function can be used on events like windows Onload or value Onchange, Onblur etc.

Code Snippet:

function()
 {
      var table = document.getElementById("ttable");                           
      var rows = table.getElementsByTagName("tr");                             
      for(i=0;i<rows.length;i++)
      {
           var id = "j_id0:j_id3:j_id39:"+ i + ":ConfirmId";                   
           var bid = "j_id0:j_id3:j_id39:"+ i + ":BandwidthId";                
           var confirmVal = document.getElementById(id).value;
           var BandWidthVal = document.getElementById(bid).value;
           if(BandWidthVal == "UNAVAILABLE")                                    
                                                                               
           {
                var inVal= i+1;
                var element = document.getElementById(""+inVal);
                element.style.backgroundColor = "#ff9999";
           }
           else if(BandWidthVal != "UNAVAILABLE" )
           {
                if(confirmVal != "")
                {
                     var inVal= i+1;
                     var element = document.getElementById(""+inVal);
                     element.style.backgroundColor = "#b3ffd9";
                }
           }
      }
 }