0

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 – Ganesh Sanap Dec 12 '18 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 '18 at 17:01
  • Post the steps you did by editing your question. – Ganesh Sanap Dec 12 '18 at 17:46
  • I am following the steps exactly as listed in the link i provided. – Dorinda Dec 12 '18 at 19:42
0

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 } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
})(); 

// 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 
    if(actual>=plan){
        return "<span style='color : green'>" + actual + "</span>";
    }else {
        return "<span style='color : red'>" + actual + "</span>";
    }
}
</script>

enter image description here

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

{
   "$schema": 
   "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "debugMode": true,
   "txtContent": "@currentField",
   "style": {
       "color": "=if(@currentField>=[$Plan], 'green', 'red'",
       "padding-top":"11px"
   }
}

enter image description here

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.