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

  • 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>"; – Colbs Jan 4 at 18:55
  • @Colbs Okay! I will give it a shot! – Masarubae Jan 4 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 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 – Colbs Jan 4 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 at 19:47
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

  • If you are using modern view then you can also use the column formatting using JSON. – Ganesh Sanap Jan 5 at 6:38
  • Thank you for the answerssss! – Masarubae Jan 8 at 16:08
  • Welcome. If this answer helped you please upvote and accept it so that others can get help from it. – Ganesh Sanap Jan 8 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 at 16:14
0

Try changing:

var _StatusValue = ctx.CurrentItem.Status;

to

var _StatusValue = ctx.CurrentItem.ColorStatus;
  • I'll go ahead and try it right now!! thank you! – Masarubae Jan 4 at 18:15
  • It did not work - there was no change to the list T_T.. @Damjan Tomic – Masarubae Jan 4 at 19:24

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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