SharePoint List View Cell formatting with CSR

Client Side Rendering

Client-side rendering is a new concept in SharePoint 2013. It allows you to use your own output format in a SharePoint page (list views, display, add and Edit forms).

How to deploy the JSLink templates

You can deploy those JSLink files in many ways. I describe in the samples below how to deploy JSLink files using OOTB techniques, but you can also use Script Editor or other techniques.

Before proceeding , you have to upload the JavaScript code files on your SharePoint 2013 site. You can upload to any SharePoint document library, or _layouts folder, But in the below deployment steps I’m supposing you will upload the JSLink-Samples folder to the site collection Style Library.

1. Edit the List view page
2. Edit the List View webpart.
3. Go to List view web-part properties and add the JSLink file (~sitecollection/Style Library/<any subfolder>/jsfile.js) to JS link property under the Miscellaneous Tab.
Remember- you have to hard code the initial part of the link: ~sitecollection
 

Example 1: Progress Bars 

See that Score is a percentage column here.

(function () {
    // Create object that have the context information about the field that we want to change it's output render
    var percentCompleteFiledContext = {};
    percentCompleteFiledContext.Templates = {};
    percentCompleteFiledContext.Templates.Fields = {
        // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms
        "Score": {
            "View": percentCompleteViewFiledTemplate
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(percentCompleteFiledContext);
})();
// This function provides the rendering logic for View and Display form
function percentCompleteViewFiledTemplate(ctx) {
    var percentComplete = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "<div style='background-color: #e5e5e5; width: 100px;  display:inline-block;'> \
            <div style='width: " + percentComplete.replace(/\s+/g, '') + "; background-color: #0094ff;'> \
            &nbsp;</div></div>&nbsp;" + percentComplete;
}

Example 2: Status indicator Colors in cells 

Showing Red, Amber and Green for the Score values. You can modify the code if you are using it for the status: "Complete", "In Progress", and "Pending"

(function () {
    // Create object that have the context information about the field that we want to change it's output render
    var percentCompleteFiledContext = {};
    percentCompleteFiledContext.Templates = {};
    percentCompleteFiledContext.Templates.Fields = {
        // Apply the new rendering for PercentComplete field on List View, Display, New and Edit forms
        "Score": {
            "View": percentCompleteViewFiledTemplate
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(percentCompleteFiledContext);
})();
// This function provides the rendering logic for View and Display form
function percentCompleteViewFiledTemplate(ctx) {
    var percentComplete = parseFloat(ctx.CurrentItem[ctx.CurrentFieldSchema.Name]); if (percentComplete > 0) {
var sty = "background-color: #47e447;border: 1px solid #269a26;";
} else if (percentComplete < 0) {
var sty = "background-color: #f35f5f;border: 1px solid #a02d15;";
} else { var sty = "background-color: #dec13d;border: 1px solid #ad9a25;"; }
return String.format('<div align="right" style="{0}" class="ms-number">{1}</div>', sty, ctx.CurrentItem[ctx.CurrentFieldSchema.Name]);
}

Check my post on deisplaying more than 3 Views on SharePoint Page: How to display more than 3 views in SharePoint List