What is the best way to create a custom feature to customize the UI of a list by filling in the column and/or field green when the value for row item = yes/no?


I used calculated column to achieve this tons of time. You can check Here or Here. They are both very quick solutions.



in June 2017, Microsoft disabled the use of JavaScript in a Calculated Column

That means given answers may not apply for newer SharePoint versions

For long explanation and work arounds see:
June 13th 2017 Microsoft blocked handling HTML markup in SharePoint calculated fields - how to get the same functionality back

Original answer:

no CSR (and no external script needed like the other answer refers to)

  • Details: http://viewmaster365.com/#/How and more examples here on SO
  • Create a new Calculated Column
  • Set the datatype to Number !
  • Paste the Formula
  • change 'TR' to 'TD' if you only want to color the Cell

    &"<img src=""/_layouts/images/blank.gif"" onload=""{" 
    &"var row=this;while(row.tagName!='TR'){row=row.parentNode}"
    &"row.style.backgroundColor='" & CHOOSE( [YourYesNoColumn] , "Green" , "Red") & "';"

CSR version

I am too lazy to rewrite the Priority example that uses no images

Rewrite colorIndex to match your Yes/No values

    function priorityFieldTemplate(ctx) {
    var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name],
        colorIndex=fieldValue.match(/(\d+)/g),//(extract x from '(x) Label'
        H="<svg height={0} width={0}><circle cx={1} cy={1} r={1} fill='{2}'/></svg>";
    return String.format( H , circleSize, circleSize/2, color);


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.