Friday, July 6, 2012

SharePoint Color Coded list based on a Field in the Row

SharePoint doesn't provide an out of the box way of color coding lists. But, thank goodness, we can use a little scripting to edit the styling of our lists!

Mike Smith provided a great script that allows you to color the background of the row if the cell's value matches the value it's looking for. But, what if another field in the same row has one of the other values and throws off your color coding?

Case in point: color coding is thrown off because the Description field
can have the same value that is being used to color code on
  

Well, this script below will search only the cell index of the row that you would like to base your color coding on. In our case, we would like to search only on the Status field/column. To get started:

1. Add a content editor web part directly underneath the list
2. Open the source editor and place the script below into it
3. Modify the columnIndexToSearch and the columnSpan variables to match the cell/field index to search for and the number of cells in each row respectively.

Note: In this case, the attachment field counts as a cell. Since we are searching only on the Status, our columnIndexToSearch is 2 (0 = Attachment field and 1 = Title field). The total number of columns we are displaying on our list is 5. If you add or remove columns in the view, the color coding will get thrown off. So, make sure to update these variables if you do make updates to the list view.

Final Result: Color coded based on the Status column only
   







<script type="text/javascript">


var listView = getElementsByClass("ms-listviewtable"); //get the list on the page
var tRows = listView[0].childNodes[0].childNodes;

var columnIndexToSearch = 2; //the index of the column that should be searched
var columnSpan = 5; //number of columns visible on the list

var j = 0;
var i = 0; 
var cellcounter = 0; //used to keep track of the cells searched on the row

for( j = 0; j < tRows.length; j++)
{
 if( tRows[j].className == "" || tRows[j].className == "ms-alternating")
 {
  var x = tRows[j].childNodes; // find all of the TRs
  for (i = 0; i < x.length; i++) 
  { 
   if( cellcounter == columnIndexToSearch) 
   {
    if (x[i].innerHTML.indexOf("In Progress") >= 0)
    { 
     x[i].parentNode.style.backgroundColor='lightgreen'; 
    }

    else if (x[i].innerHTML.indexOf("Completed") >= 0)
    { 
     x[i].parentNode.style.backgroundColor='lightblue'; 
    }

    else if (x[i].innerHTML.indexOf("Deferred") >= 0)
    { 
     x[i].parentNode.style.backgroundColor='lightgrey'; 
    }

    else if (x[i].innerHTML.indexOf("Waiting on someone else") >= 0)
    { 
     x[i].parentNode.style.backgroundColor='orange'; 
    }
  }

   cellcounter++;
   if( cellcounter >= columnSpan)
   {
    cellcounter = 0;
   }
  } 
 }
}

function getElementsByClass(searchClass, node, tag) 
{
 var classElements = new Array();
 if ( node == null )
  node = document;
 if ( tag == null )
  tag = '*';
 var els = node.getElementsByTagName(tag);
 var elsLen = els.length;
 var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
 for (i = 0, j = 0; i < elsLen; i++) 
 {
  if ( pattern.test(els[i].className) ) 
  {
   classElements[j] = els[i];
   j++;
  }
 }
 return classElements;
}


</script>



1 comment:

  1. Doesn't work.
    I followed the instructions and created the custom list called "test". There is absolutely no change.

    What am I missing here?
    I am using Sharepoint 2010.

    ReplyDelete