O365, I have a Column Named 'Status' to show Green/Red circle but I am struggling

Question

This is from a List and on List setting there are two Columns that involves the problem I am facing.

• Status (absolute name = ColorStatus)
• NewCol2

Users will enter in either 0 or 1 in NewCol2 field and in List settings,

Status has a formula of =NewCol2 so that it stores the number (0 or 1).

This is the code I tried to display the green (1) / red light (0)

///

(function () {
    var ColorStatusFieldCtx = {};

    // Define template variable  
    ColorStatusFieldCtx.Templates = {};

    // Define your required fields and functions to call in each case.
    // In our case the field is Progress
    // Override Function is PatientColorStatusViewTemplate
    ColorStatusFieldCtx.Templates.Fields = {
        "ColorStatus": {"View": ColorStatusViewTemplate}
      //"Movie":{"View": StatesViewTemplate}


    };

    // Register the template override with SP2013 
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    ColorStatusFieldCtx
    );

})();



// Override Progress Level field with color based on conditional value
function ColorStatusViewTemplate(ctx) {

    var _StatusValue = ctx.CurrentItem.Status;
    //var _movieValue = ctx.CurrentItem.Movie;

     if (_StatusValue == "1")
     {
        return "<img src='/sites/CC/SiteAssets/Greendotdot.png'/>";
     }

     if (_StatusValue == '0')
     {
        return "<img src='/sites/CC/SiteAssets/reddotdot.png'/>";
     }  

}


///////////////

I've tried many things and one time I got the Greendot to work but it made even '0's Green too. After tweaking a little, I lost it and I cannot even get the Green to work.

It does not have to replace it with image, if you could provide me the code to replace it with . <-- a dot with 30px and green, I would be super happy too!!!

If it is easier to do it on JSON (conditional formatting) I guess that works too!!

I've been JS Linking to the List.

Please help me.... T_T

Answer 1

To show the Green/Red circle in your Status column, you don't need to use JSLink as this column itself is a calculated column.

Follow below steps:

1. Go to List settings and create "Status" as calculated field.

2. Use below formula for this calculated field:

   ="<DIV style='font-weight:bold; font-size:24px; color:"&IF([NewCol2]==1,"Green",IF([NewCol2]==0,"Red","Yellow"))&";'>•</DIV>"

3. Choose Number(1,1.0,100) for the return data type of field.

4. Use below image for reference.

Answer 2

Try changing:

var _StatusValue = ctx.CurrentItem.Status;

to

var _StatusValue = ctx.CurrentItem.ColorStatus;