How does one alter the appearance of a managed metadata value in a list using JSLink?

Question

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!

Answer 1

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

Answer 2

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;

}