Color Code/replace with images a SharePoint List Column Value in Sharepoint 2013- The outstanding JS link property to the rescue

Wondering how to color code a sharepoint list column based on its value.

You have come to the right page here.. congrats..

Requirement: I have a list called colour code. Now I have a column named Active , which stores Yes or No values.




I need to show ticks for all Yes values and Cross for all No. how will i Do it?


JS Link to the rescue.
1 .Go to your Display Form, open the page in edit mode
2. Now in the webpart properties , go to Miscellaneous tab reference the link to a JS file called Colors.js
Put the following in the JS Link proerty "~sitecollection/style Library/colors.js"

3.  Now just paste the following code in Colors.js  file and upload it to the Style Library of the site.

Note: give  your site collection url in the image tag

(function () {     var statusFieldCtx = {};     statusFieldCtx.Templates = {};     statusFieldCtx.Templates.Fields = {     "Active"://Name of the column for which images needs to be displayed

  {     "View": StatusFieldViewTemplate     }

};     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(     statusFieldCtx     ); })(); function StatusFieldViewTemplate(ctx) {     var _statusValue = ctx.CurrentItem.Active; // Active is the column name    if (_statusValue == 'Yes')     {
        return "<img src=SiteCollectionURL/style%20library/tick.png'/>";         } if (_statusValue == 'No') {     return "<img src= SiteCollectionURL /style%20library/cross.png'/>"; } }

4. that’s it and you are done.. Now just go to the list and refresh your page. See the magic your self: