I know this question has been asked and answered but I am new to CSR and I do not even know how to begin to implement this solution. I have tried to use the solution at this link with no success.

How to color code the SharePoint list column value based on a condition? sharepoint-list-column-value-based-on-a-condition

What I want to do is compare Plan vs Actual in a field in SharePoint. If we exceed the plan it turns green if not it turns red. I dont want to use the column formatting because I do not want to display an extra column in the view and that only works when the column is included. I would really appreciate some help on this.

  • Are you using modern or classic experience? Check my answer given here Dec 12, 2018 at 16:44
  • I have tried in both and it is not working in either i think i am missing a step somewhere
    – Dorinda
    Dec 12, 2018 at 17:01
  • Post the steps you did by editing your question. Dec 12, 2018 at 17:46
  • I am following the steps exactly as listed in the link i provided.
    – Dorinda
    Dec 12, 2018 at 19:42

1 Answer 1


The following example for your reference.

1.Create a custom list, add number fields "Plan" and "Actual".

2.Add some data to the list.

If use the Classic UI, we can add the following code into a script editor web part in list view to achieve it.

<script type="text/javascript">
(function () { 
    // Create object that have the context information about the field that we want to change it's output render  
    var fieldContext = {}; 
    fieldContext.Templates = {}; 
    fieldContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Actual": { "View": fieldTemplate } 

// This function provides the rendering logic for list view 
function fieldTemplate(ctx) {
    var plan = ctx.CurrentItem.Plan;
    var actual = ctx.CurrentItem.Actual;
    // Return html element with appropriate color based on priority value 
        return "<span style='color : green'>" + actual + "</span>";
    }else {
        return "<span style='color : red'>" + actual + "</span>";

enter image description here

If use the Modern UI, we need use column formatting to achieve it.

   "elmType": "div",
   "debugMode": true,
   "txtContent": "@currentField",
   "style": {
       "color": "=if(@currentField>=[$Plan], 'green', 'red'",

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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