I'm still pretty new to SP and I've been trying for weeks to get JSLink to work on a SP 2013 List View (no formatting would ever show up and I didn't know if it was the javascript code itself or the link token or what).
On a whim I happened to create a script editor web part and keep my JSLink active and when I hit Stop Editing, lo and behold, the formatting from my javascript showed up! What a relief - well, sort of. The formatting shows, but it also seems to blow away the normal "Items" and "List" ribbons from the top navigation - I can now only access them if I first edit the page and then edit the List web part itself. Not so cool.
From everything I have read, it shouldn't be necessary to have the code in two different places and after scouring the internet, I have yet to find someone explaining a similar case to mine. As soon as I try to delete just the script editor or just the JS Link, the formatting disappears and I'm stuck with plain text again so something fishy is happening, but I couldn't even begin to figure out what it might be.
Any ideas as to how I can just use JS Link and be done with it like I'm supposed to be able to? Here is the code I am using in case there is something wrong with it, though I mostly just copied someone else's sample code and made it work for our situation.
<script language="javascript" type="text/javascript">
(function () {
// Create object that have the context information about the field that we want to change it's output render
var statusFiledContext = {};
statusFiledContext.Templates = {};
statusFiledContext.Templates.Fields = {
// Apply the new rendering for Status field on List View
"Status": { "View": statusFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusFiledContext);
})();
// This function provides the rendering logic for list view
function statusFiledTemplate(ctx) {
var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
// Return html element with appropriate color based on status value
switch (status) {
case "In Service":
return "<span style='color :#71b84f; font-weight: bold;'>" + status + "</span>";
break;
case "Out For Repair":
return "<span style='color :#ff0000; font-weight: bold;'>" + status + "</span>";
break;
case "Spare":
return "<span style='color :#ea890a; font-weight: bold;'>" + status + "</span>";
break;
case "Out Of Service":
return "<span style='color :#000000'>" + status + "</span>";
}
}
</script>