CSR only works on a List View when same code is present in a Script Editor web part and also a JS Link

Question

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>

Answer 1

You are right you don't need to use both approaches. For some reasons the JS is not firing. In my experience it's generally down to it firing too early before SP scripts have loaded.

I have a blog post which gives a good example of setting up the JSLink and display templates for a Sharepoint list, hopefully the example code will help as it shows how to load the CSR overrides.

http://blog.ithinksharepoint.com/2014/11/17/sharepoint-2013online-attachment-viewer-enhancement/

One last thing, you don't need the tags in your JS file.

Answer 2

Put your JavaScript in separate file and upload it to some common library, like Site Assets, Style library or Master Page Gallery. Go to your view and edit the page. In the web part properties specify JSLink property to your JavasSript file, like ~sitecollection/Style Library/MyFile.js. Check that you file loads in the view. Now your CSR should be working.

When you add a script editor web part to your page, page has two web parts, and ListViewWebPart does not render ribbons until you select it with your mouse.