Using Client-side Rendering to color-code list cells in SharePoint 2013

(Slides which accompany this blog post are here.)

In SharePoint 2010, we used various approaches to project status reports which included the Data View Web Part and SharePoint Designer. For SharePoint 2013, we wanted to do something that could done in the browser (without SP Designer) and which would be less fragile (that is, less vulnerable to breakage should the report need to be tweaked). The primary feature of the report was a need for color-coding based on the status.

For example, here is how the SharePoint 2010 report looked:

2010list

The goal was to have this same color-coding. When I began to look into it, many links pointed back to a valuable blog post by Christophe Humbert  in which he outlined a procedure for color-coding based on calculated columns. He followed it up with a note about how this could be make easier using Client-side Rendering in SharePoint 2013. Though I followed the instructions to a tee, I was not successful until I learned a trick about Content Types in the Masterpage Catalog. Thus, this post will put things together in a way that worked for me.

The basic steps are:

  1. Create new columns as needed
  2. Create a View which includes the new columns
  3. Add a snippet to hide the left-side navigation and All Contents box
  4. Enable the JavaScript Display Template Content Type to your Master Page Gallery
  5. Upload the Client-side Rendering JavaScript to the Master Page Gallery
  6. Add the URL to the JS Link field in the List Views Web Part

Let’s go through these in order.

Create new columns as needed

We’ll create two new columns, which I’ll call ColorStatus and Current Status. Note that this assumes there is already a column called Status into which the user updates the project status.

ColorStatus will be a calculated value with a bit of code:

 =IF(Status=”On-Target”,”Lime”,IF(Status=”Distressed”,”Yellow”,IF(Status=”On-Hold”,”Red”,”White”)))

The basic syntax of this code is:

=IF(Condition=”value”,”set value”,”else set this value”)

So, for example, if we wanted to set the value to Green if the project was “On-Target”, we would have:

=IF(Status=”On-Target”,”Lime”,”White”)

Since, in this case, we want to have one of four different values (Green, Yellow, Red, or White) depending on the Status, we need to put together a statement with multiple conditions:

=IF(Status=”On-Target”,”Lime”,IF(Status=”Distressed”,”Yellow”,IF(Status=”On-Hold”,”Red”,”White”)))

The idea is: If true, then value, else (If true, then value, else (If true, then value, else value))))

This, then, is our ColorStatus column:

colorstatuscolumn

A second new column will contain the HTML with the variable containing the color. This is also a Calculated column and will have the value:

=”<DIV style=’font-size:12px; background-color:”&ColorStatus&”;’>”&Status&”</DIV>”

You could modify the font size as you wish.

Here, then, is how this one would look:

currentstatuscolumn

Create a View which includes the new columns

Now we’ll create (or modify) a View which display the Current Status column. Remember now to display your Status or ColorStatus columns. The View might look like this:

viewcreation

Add a snippet to hide the left-side navigation and All Contents box

This step is optional, but to maximize the use of your page width for reports, you may want to remove the Navigation and All Site Contents elements from the left side of the page. If so, just insert a Script Editor web part and add this snippet:

 <style>
#sideNavBox { DISPLAY: none }
#contentBox { margin-left: 0px }
</style>

Enable the JavaScript Display Template Content Type to your Master Page Gallery

This is the part which tripped me up initially. While some posts make mention of uploading your Client-side Rendering script to the Master Page Gallery as a JavaScript Display Template, I didn’t see an option to do this. It turns out that you first may need to go to the Advanced Settings for the Master Page Gallery and change “Allow management of content types?” to Yes. Then you’ll need to add the JavaScript Display Template as a Content Type:

addingcontenttype

Upload the Client-side Rendering JavaScript to the Master Page Gallery

Now you’ll be able to change the Content Type when you do your upload. I called my JavaScript file “addcolorjslink12.js”. Its code consists of:

var ccContext = {
Templates: {
Fields: {
“Color”: {“View”: “<#=STSHtmlDecode(ctx.CurrentItem.Color)#>”}
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ccContext);

This code basically tells the browser to treat the field as HTML to be rendered rather than as text to be displayed.

Add the URL to the JS Link field in the List Views Web Part

Now that we’ve uploaded our JavaScript, we can reference it in the JS Link field of the List Views Web Part:

~site/_catalogs/masterpage/addcolorjslink12.js

Note that the Web Part gives you a nice shortcut, “~site”, which you can use instead of the long URL. Very handy!

Now that we’ve done our work, let’s take a look at the report:

2013list

Looks just like we want!