1

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

9
  • 1
    is the image URL resolving? No 404s in Dev console? Try returning this as a test return "<div style='background-color:red' >" + ctx.CurrentItem.Title + "</a>"; Jan 4, 2019 at 18:55
  • @Colbs Okay! I will give it a shot!
    – Masarubae
    Jan 4, 2019 at 19:24
  • @Colbs I just tried it but still nothing happened. On the Status column, I still see 1's and 0's.
    – Masarubae
    Jan 4, 2019 at 19:29
  • in Chrome, press F12, then ctrl + P, then search for your .js and add a breakpoint. Are you sure it's hitting that code? Try removing the if statement. Also, might need to change the field type to string Jan 4, 2019 at 19:32
  • @Colbs I tried it, and I think it isn't hitting the code. I wasn't able to find the JS file that is Linked to the List webpart. However, I was clicking things and I clicked on 'Modify View' -> 'Style' -> Basic Table. It somehow worked...
    – Masarubae
    Jan 4, 2019 at 19:47

2 Answers 2

0

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.

enter image description here

3
  • If you are using modern view then you can also use the column formatting using JSON. Jan 5, 2019 at 6:38
  • Welcome. If this answer helped you please upvote and accept it so that others can get help from it. Jan 8, 2019 at 16:11
  • Yes! I did upvote and accept but since I have less than 15 reputations, it's not taking my upvote.....
    – Masarubae
    Jan 8, 2019 at 16:14
0

Try changing:

var _StatusValue = ctx.CurrentItem.Status;

to

var _StatusValue = ctx.CurrentItem.ColorStatus;
1
  • It did not work - there was no change to the list T_T.. @Damjan Tomic
    – Masarubae
    Jan 4, 2019 at 19:24

Your Answer

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

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