In this post, I’ll quickly go over how you can very easily customize an out of the box 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:
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:
• “SharePoint 2013 Client Side Rendering: List Forms” by Code Project
• “Client-side rendering (JS Link) code samples”by Microsoft
The post Color Coding a SharePoint 2013 List View the Right Way appeared first on MetroStar Blog.