For this example, though, I’ll only be going over customizing a List View to look like this:
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:
- Create a standard Tasks list with some items
- Download the MSS.ColorCodedTasks.js file
- Add a view of the Tasks list to your page ensuring it has the Task Status field added to the view
- 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.
based on status.
And that’s it!
For more in-depth details, take a look at some of these articles: