Tag Archive for Color Coding SharePoint Lists

SharePoint: Color Coding SharePoint Lists

Color Coding SharePoint Lists – without custom web parts or server code deployments 

SharePoint does not have an out of the box way to set colors based on the data in a list or library. There are both third party web parts and open source projects, such as codeplex.com, that can color code lists, but these usually require installing code on the SharePoint web servers. In this article we will look at color coding lists just using the built-in Content Editor web part and some JavaScript. 

Each list will need a slightly different fragment of JavaScript to set the colors. 

Color coded calendars? 

For other lists and libraries you will find examples below to: 

  • Set color backgrounds for rows in task lists to show the status of the task 
    Color coded SharePoint task list
  • Set colors in libraries to show approval status 
    Color coded SharePoint task list (approval status)
  • Color coded SharePoint list(task status)
  • Set the color of a single column based on its value

 

To add the Content Editor web part and JavaScript: 

  • Display the view to color code (each view will need its own web part and JavaScript) 
  • Add a Content Editor web part 
    • Site Actions, Site Settings, Edit Page 
    • Add a Content Editor web part and move it below the calendar web part 
    • Move this web part so it is below the list you are color coding 
    • Click in the web part, click Edit, Modify Shared Web Part, and in the Appearance section change “Chrome” to “None”. 
  • Add the JavaScript 
    • Click Source Editor 
    • Type or paste the JavaScript (examples below) 

Example 1: Set the background color of a row based on data in the row 

To color code a row all we need is: 

  • A column to check (such as the Task Lists’ status column) 
  • JavaScript to find this item in a table TD tag 
  • JavaScript to assign a style to the TD’s parent row (TR) 
  • And of course, the web part described above to hold the JavaScript 

Here is the example for a task list: 

 

 

 

Code Notes:

  • x[i] is one of the table cells (TD) 
  • x[i].innerHTML is the contents of a cell (TD) (which may include additional HTML) 
  • x[i].parentNode is the row containing the cell (a TR) 
  • x[i].parentNode.style.stylename is used to set any valid style on the TR 

 

Example 2: Set the color of a field based on data in the field 

To color code a cell all we need is: 

  • A column to check (such as the Task Lists’ status column or a library’s approval status column) 
  • JavaScript to find this item in a table TD tag 
  • JavaScript to assign a style to the TD 

Here is the revised JavaScript fragment for a color coding a single cell:

if (x[i].className==”ms-vb2″) //find the TDs styled for lists 
{ 
  if (x[i].innerHTML==”Completed”) //find the data to use to determine the color 
  { 
    x[i].style.backgroundColor=’darkblue’; // set the background color 
    x[i].style.color=’white’; //set the font color 
  } 
} 

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