SharePoint 2013: Using Client-Side Rendering to color-code list cells

USING CLIENT-SIDE RENDERING TO COLOR-CODE LIST CELLS IN SHAREPOINT 2013

Randy MullisSAS

In SharePoint 2010, our project status reports were done with a Data View Web Part and SP Designer:

The code behind our SP2010 report

For SharePoint 2013, we want to use out-of-the-box components!

Client-side Rendering (CSR) to the rescue!

Some CSR examples:

Task List Priority Color

Some CSR examples:

Substring Long Text

Some CSR examples:

Accordion Effect

Some CSR examples:

Read-only controls

Steps to reach our goal:

Steps to reach our goal: 1. Create new columns as needed

Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns

Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation

and All Contents box

Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation

and All Contents box4. Enable the JavaScript Display Template Content

Type to your Master Page Gallery

Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation

and All Contents box4. Enable the JavaScript Display Template Content

Type to your Master Page Gallery5. Upload the Client-side Rendering JavaScript to

the Master Page Gallery

Steps to reach our goal: 1. Create new columns as needed2. Create a View which includes the new columns3. Add a snippet to hide the left-side navigation

and All Contents box4. Enable the JavaScript Display Template Content

Type to your Master Page Gallery5. Upload the Client-side Rendering JavaScript to

the Master Page Gallery6. Add the URL to the JS Link field in the List Views

Web Part

First new column: ColorStatus (A Calculated Column)

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

IF(Status=”Distressed”,”Yellow”,

IF(Status=”On-Hold”,”Red”,”White”)))

The syntax for this is:

=IF(Condition=”value”,

”set value”,”else set this value”)

ColorStatus:

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

IF(Status=”Distressed”,”Yellow”,

IF(Status=”On-Hold”,”Red”,”White”)))

If true, then value, else (If true, then value, else (If true, then value, else value))))

Second new column: Current Status (A Calculated Column)

=”<DIV style=’font-size:12px;

background-color:

”&ColorStatus&”;’>”&Status&”</DIV>”

Value of our new ColorStatus column

Value of our Status column

Add the “Current Status” column to the View (“ColorStatus” is used but not visible)

Let’s hide the Navigation and Site Contents on the left using the Script Editor Web Part:

<style>

#sideNavBox { DISPLAY: none }

#contentBox { margin-left: 20px }

</style>

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

(at /_catalogs/masterpage)

Upload our Client-side Rendering JavaScript to the site’s Master Page Gallery

var ccContext = {

Templates: {

Fields: {

“CurrentStatus”: {“View”:

“<#=STSHtmlDecode(ctx.CurrentItem.CurrentStatus)#>”

}

}

}

};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides

(ccContext);

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

~site/_catalogs/masterpage/addcolorjsli

nk12.js

And more ideas...

http://www.linkedin.com/in/randymullis

https://twitter.com/RandyMullis

Randy Mullis

324 Blackwell St, Durham, NC 27701