Can't get Javascript CSR display template to work in listview

Question

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)
};

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
– Danny '365CSI' Engelman, Commented Jun 20, 2016 at 9:21

Daniel Stölzner · Accepted Answer · 2016-06-20 19:41:20Z

I found two issues in your code:

The field name is "Case_x0020_Status" and not "Case Status"
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()
}

Danny '365CSI' Engelman · Accepted Answer · 2016-06-20 18:03:29Z

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 );

Stack Exchange Network

Can't get Javascript CSR display template to work in listview

2 Answers 2

Your Answer

Hot Network Questions

Can't get Javascript CSR display template to work in listview

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions