1

I'm totally at wits end here. I am trying to use CSR to display custom html depending on a "case status" column.

I've added the JS file to the masterpage folder and used the JS Link to connect it. No matter how much i simplify the code or where I put it ( I even tried in a CEWP) absolutely nothing changes! A simplified version worked on my test site, but now I can no longer replicate there either.

I am clearly missing something major, please help

var Lifeline = Lifeline || {};
Lifeline.Templates = Lifeline.Templates || {};
Lifeline.Functions = Lifeline.Functions || {};
Lifeline.Templates.Fields = {
    "Case Status": {"View": Lifeline.Functions.statusViewFormat}
};
Lifeline.Functions.statusViewFormat = function(ctx){
    var caseStatusValue = ctx.CurrentItem.Case_x0020_Status;
    var caseStatusIcon;
    switch (caseStatusValue){
        case "New":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-circle fa-lg' aria-hidden='true' style='color\\: #4da6ff;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Available":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-circle-o fa-lg' style='color: #bb99ff;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "In Progress":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-circle fa-lg' style='color: #bb99ff;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Awaiting Approval":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-clock-o fa-lg' style='color: #ffcc00;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Needs Review":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-minus-circle fa-lg' style='color: #ff4d4d;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Completed":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-check-circle fa-lg' style='color: #32cd32;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Closed":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-check-circle fa-lg' style='color: #bfbfbf;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>"
    }
    return caseStatusIcon;
};
// Registering Functions and Starting
if (typeof _spPageContextInfo != "undefined" && _spPageContextInfo != null) {
    Lifeline.Functions.MdsRegisterField();
} else {
    //MDS is not activated, we register our Functions
    Lifeline.Functions.RegisterField();
}
Lifeline.Functions.MdsRegisterField = function(){
    var thisUrl = _spPageContextInfo.siteServerRelativeUrl+"/_catalogs/masterpage/Display Templates/casemanageui.js";
    Lifeline.Functions.RegisterField();
    //Important step when MDS is active
    RegisterModuleInit(thisUrl, Lifeline.Functions.RegisterField)
};
Lifeline.Functions.RegisterField = function(){
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(Lifeline)
};
  • 1
    Are you using the Cisar Chrome Browser Extension? If not try it so you know the basic boilerplate code works, your current code looks overly complex – Danny '365CSI' Engelman Jun 20 '16 at 9:21
0

I found two issues in your code:

  1. The field name is "Case_x0020_Status" and not "Case Status"
  2. You have to add your functions to your namespace before you call them

See the working code below:

Type.registerNamespace('Lifeline')
Lifeline.Templates = Lifeline.Templates || {}
Lifeline.Functions = Lifeline.Functions || {}

Lifeline.Functions.statusViewFormat = function (ctx) {
    var caseStatusValue = ctx.CurrentItem.Case_x0020_Status;
    var caseStatusIcon;
    switch (caseStatusValue){
        case "New":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-circle fa-lg' aria-hidden='true' style='color\\: #4da6ff;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Available":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-circle-o fa-lg' style='color: #bb99ff;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "In Progress":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-circle fa-lg' style='color: #bb99ff;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Awaiting Approval":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-clock-o fa-lg' style='color: #ffcc00;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Needs Review":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-minus-circle fa-lg' style='color: #ff4d4d;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Completed":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-check-circle fa-lg' style='color: #32cd32;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>";
            break;
        case "Closed":
            caseStatusIcon = "<span class='tooltip'><i class='fa fa-check-circle fa-lg' style='color: #bfbfbf;'></i><span class='tooltiptext'>"+caseStatusValue+"</span></span>"
    }
    return caseStatusIcon;
}

Lifeline.Templates.Fields = {
  'Case_x0020_Status': {'View': Lifeline.Functions.statusViewFormat}
} 

Lifeline.Functions.RegisterField = function () {
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(Lifeline)
}

Lifeline.Functions.MdsRegisterField = function () {
    var thisUrl = _spPageContextInfo.siteServerRelativeUrl+"/_catalogs/masterpage/Display Templates/casemanageui.js";
    Lifeline.Functions.RegisterField();
    RegisterModuleInit(thisUrl, Lifeline.Functions.RegisterField)
}

if (typeof _spPageContextInfo != "undefined" && _spPageContextInfo != null) {
    Lifeline.Functions.MdsRegisterField()
} else {
    Lifeline.Functions.RegisterField()
}
0

FYI, you can get rid of the hardcoded Field name

And condense the code a bit (not checked for typos)

var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
var html = "<span class='tooltip'><i class='fa fa-lg {0}' style='color:{1}'></i><span class='tooltiptext'>{2}</span></span>";
var data = { 
    "Available" :       [ "fa-circle-o" , "#bb99ff" ],
    "In Progress" :     [ "fa-circle" , "#bb99ff" ],
    "Awaiting Approval":[ "fa-clock-o" , "#ffcc00" ],
    "Needs Review" :    [ "fa-minus-circle" , "#ff4d4d" ],
    "Completed" :       [ "fa-check-circle" , "#32cd32" ],
    "Closed" :          [ "fa-check-circle" , "#bfbfbf" ],
    "New" :             [ "fa-circle' aria-hidden='true" , "#4da6ff"] //sneak in aria
}
data = data[ value ];
return String.format( html , data[0] , data[1] , value );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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