4

Just getting started with JSLink, and ran into a situation that I don't understand. I have a list, with a managed metadata column; ProjectStatus. Initially, I treated this just like any other column within the JS code as such:

function statusColor(ctx)
{
if (ctx == null) return '';
var _status = ctx.CurrentItem.ProjectStatus;
var _color = '';

if(_status == "At Risk" || "Cancelled" || "Overdue") {
  _color += '<span style="font-color: red; font-weight: bold;">' + _status + '</span>';
} else if(_status == "Not Started" || "On Hold") {
   _color += '<span style="font-color: gold; font-weight: bold;">' + _status + '</span>';
} else if(_status == "Active") {
  _color += '<span style="font-color: green; font-weight: bold;">' + _status + '</span>';
} else if(_status == "Completed") {
  _color += '<span style="font-color: blue; font-weight: bold;">' + _status + '</span>';
} else {
  return _status;
}
    return _color;
}

However, the result is a black, bold, [object Object] in the list view. I found this How to get the managed metadata column value in a list client object model, but wasn't sure if/how it applied to my situation. Do I need to use the posted article to build the _status variable prior to calling it in _color?

Thanks in advance!

2 Answers 2

4

I see everyone copying CSR code from the early CSR 'gurus'

May I suggest refactoring part of your JavaScript to something that is actually readable and extensible and maintainable:

(I wrote this of the top of my head; might be errors in here, but the concept is clear)

function statusColor( ctx, CurrentFieldSchema, CurrentItem, ListSchema ){
    if(ctx){//Not required??? CSR always calls the function with a ctx 
        if (CurrentItem.hasOwnProperty(CurrentFieldSchema.Name + '.groupHeader')) { 
            //do nothing when this Choice field is used in a Group By 
            return CurrentItem[CurrentFieldSchema.Name];
        }
        var _status=CurrentItem[ CurrentFieldSchema.Name ].Label,
            _html='<span style="color:{0}; font-weight:{1};">{2}</span>',
            _color='none',
            _weight='bold';
        switch(_status){
            case('Not Started'):
            case('OnHold'):
                _color='gold';
                break;
            case('Active'):
                _color='green';
                break;
            case('Completed'):
                _color='blue';
                break;
            case('At Risk'):
            case('Cancelled'):
            case('Overdue'):
                _color='red';
                break;
            default:
                _html='{2}';
        }
        return( String.format(_html, _color, _weight, _status) );
    }
}

Notes

  • I am not using your custom ColumnName ProjectStatus
    using CurrentFieldSchema.Name makes this code generic for any Status Column
  • String.format is SharePoint specific code, you get this for free from Microsoft
  • Alas all 'guru' blogs only show the one (ctx) parameter, and everyone follows like sheep
    There are actually 4 parameters passed
    See The other parameters for the CSR VIEW Template function

an alternative not using CSR

If you:

  • Are not afraid to use something that has worked since 2010 (and works in SP2010)
  • do not want to create separate files for display logic
  • do not want to rewrite your CSR code to be MDS safe
  • want a solution that works no matter where a View Column is displayed
  • want a solution that can be wrapped in a List Template
  • works even if there are multiple Views of the same List on One page

Then you could add the JavaScript logic to a Calculated Column.

Set the datatype to Number and it will evaluate your HTML/JavaScript

Create a Calculated Column "ColorStatus" Paste the Formula:

=[Status]
&"<img src=/_layouts/images/blank.gif  onload=""{"
&"var T=this;while(T.tagName!='TR'){T=T.parentNode}"
&"T.style.backgroundColor="
&" ({"
&"  'Not Started':'gold',"
&"  'OnHold':'gold',"
&"  'Active':'green',"
&"  'Completed':'blue',"
&"  'AtRisk':'red',"
&"  'Cancelled':'red',"
&"  'Overdue':'red'"
&" })['"&[Status]&"']"
&"}"">"
  • set the Datatype to number.
  • Add to Default View
  • Do not add to Content Types (or the Formula will show up as text on Forms) this works in Views only!!
  • this colors the whole row, if you only want to color the current Cell, replace 'TR' with 'TD'

Detail descscription on How it works at: http://www.viewmaster365.com/#/How

Of course there are drawbacks;
biggest one is that it adds the same script for every List Item

The fun part is you can use all you SharePoint Calculated Formula skills on the &[Status]& part to get any result (or dynamic JavaScript creation) you want.

J5 iJS iCSR iStatus

2
  • Thanks Danny! I'm not that fluent in JS (or any language to be honest), so the blogs you refer to are typically a starting point for me. I'm glad you posted an alternative/better way to accomplish what I was looking for, especially the non-CSR method!
    – ntwrkguru
    Aug 13, 2015 at 15:37
  • 1
    Cool, I added the comment about coloring the cell. Please mark the answer as answered so it does not pop up in StackOverflow UnAnswered lists. tnx Aug 13, 2015 at 18:44
1

Figured this out with the help of some friends, so for anyone else struggling with this:

function statusColor(ctx)
{
if (ctx == null) return '';
var getStatus = ctx.CurrentItem.ProjectStatus;  

var _status = getStatus.Label;
var _color = '';

Also, I had to separate out the or string in the initial if, specifying each match in its own else if, thusly:

if(_status == "Not Started" ) { 
 _color += '<span style="color: gold; font-weight: bold;">' + _status + '</span>';
} if(_status == "On Hold") {
 _color += '<span style="color: gold; font-weight: bold;">' + _status + '</span>';
} else if(_status == "Active") {
 _color += '<span style="color: green; font-weight: bold;">' + _status + '</span>';
} else if(_status == "Completed") {
 _color += '<span style="color: blue; font-weight: bold;">' + _status + '</span>';
} else if(_status == "At Risk" ) {
 _color += '<span style="color: red; font-weight: bold;">' + _status  + '</span>';
} else if(_status == "Cancelled" ) {
 _color += '<span style="color: red; font-weight: bold;">' + _status  + '</span>';
} else if(_status == "Overdue") {
 _color += '<span style="color: red; font-weight: bold;">' + _status  + '</span>';
} else {
  return _status;
}   
  return _color;

}

Your Answer

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

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