Tweet
Share
Share

In this post, I’ll quickly go over how you can very easily customize SharePoint 2013 List View using a lesser-known feature called Client Side Rendering (CSR). CSR basically provides a way of customizing List Views, Forms, Fields, and Search Results using nothing but HTML, JavaScript, and CSS.

For this example, though, I’ll only be going over customizing a List View to look like this:

Color Coded SharePoint Task

Prior to SharePoint 2013, this kind of stuff would generally require either a major server side built from scratch Web Part or a large amount of jQuery to basically rip through the list view HTML. Not to mention, the jQuery solution usually was very difficult to implement to handle user interactions. Well, say goodbye to those days because this stuff comes out of the box now! …kinda.

To implement this exact solution, follow these steps:

  1. Create a standard Tasks list with some items
  2. Download the MSS.ColorCodedTasks.js file
  3. Upload the JavaScript file to SharePoint (I like to use the Site Assets library at the root of the site collection)
  4. Add a view of the Tasks list to your page ensuring it has the Task Status field added to the view
  5. Edit the Web Part and set the JS Link property under Miscellaneous to point to the JavaScript file (Ex.~sitecollection/SiteAssets/Scripts/MSS.ColorCodedTasks.js)
  6. Save the Web Part

Note: the URL for the JSLink property must contain an appropriate SharePoint token.

And if all went well, you should see what I see.

If you open the JavaScript file, you can see that we’re just registering an OnPostRender function. This function, when called, just loops each row and color codes
based on status.

And that’s it!

For more in-depth details, take a look at some of these articles:

Tweet
Share
Share