I have a small requirement which can be fulfilled through JSON column formatting but I do not not know how to go about it. Currently I have three columns
1. Consumed quantity : 12(example value)
2. Returned value : say 10(example value)
3. Returned status( calculated value) : 12-10 = 2

Now what I want is to highlight the returned status green when the difference equals 0 and if it is greater than that then it should display Color red.

If you do know please help me out. Thanks.

  • Is it for SharePoint Online or On-Prem? Do want to modify the list view rendering? May 29, 2018 at 17:46
  • SharePoint online May 30, 2018 at 4:50
  • yes it is for list view rendering. May 30, 2018 at 6:17

1 Answer 1


You could then try the Client Side Rendering to achieve your goal, or you can try the column formatting option available with Column in the list settings.

Ref Column Formatting

Client Side Rendering Ref 1

Client Side Rendering Ref 2

How To Use Client Side Rendering

Similar question on stackoverflow

 (function () {

        var statusFieldCtx = {};
        statusFieldCtx.Templates = {};
        statusFieldCtx.Templates.Fields = {
            "Returned status": {
                "View": StatusFieldViewTemplate


    function StatusFieldViewTemplate(ctx) {

        if (ctx.CurrentItem.Returned status==0)
            return "<div style="color:Green">"+ctx.CurrentItem.Returned status+"/div>";
            return "<div style="color:red">"+ctx.CurrentItem.Returned status+"/div>";

All the best!!!

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.