My JSLink script will not work

I am attempting to use JSLink ..finally.. and I am having some trouble that I cannot seem to straighten out. For my first venture down the rabbit hole I chose something super simple for use as proof of concept. So I looked up a tutorial and came up with a simple script to draw a box around the Title field of each entry and style the text. I cannot get this to work. Is there any chance you can take a look at this code for me? I used the following tokens in the JSLink box.

~sitecollection/site/folder/folder/file.js

And

~site/folder/folder/file.js

The .js file is stored on the same site as the List View WebPart I am attempting to modify. The list only has the default “Title” column.

(function () {
            var overrideContext = {};
            overrideContext.Templates = {};
            overrideContext.Templates.Item = overrideTemplate;

            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();

function overrideTemplate(ctx) {
            return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}

Solution

It looks as though you are attempting to override the context (ctx) item itself, where you actually just want to override the list field and the list view in which the field is displayed. Make sense?

Firstly, change overrideContext.Templates.Item to overrideContext.Templates.Fields :

(function () {
            var overrideContext = {};
            overrideContext.Templates = {};
            overrideContext.Templates.Fields = {
            // Add field and point it to your rendering function
            "Title": { "View": overrideTemplate },
            };  
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
        }) ();

Then when the JSLink runs the renderer looks for the Title field in the List view, and applies your overrideTemplate function.

function overrideTemplate(ctx) {
            return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}

In terms of running multiple JSLinks on a SharePoint page, it is quite possible to run multiple JSLink scripts, they just need to be separated by the pipe '|' symbol. I use SharePoint Online a lot and I see the following formatting working all the time (sorry Sascha!).

~site/yourassetfolder/yourfilename.js | ~site/yourassetfolder/anotherfilename.js

You can run as many scripts concurrently as you want, just keep separating them with the pipe. I've seen this on prem also, however you might want to swap out '~sites' for '~sitecollection' and make sure the js files you are accessing are at the top level site in the site collection if you do so!

I have noticed when running multiple JSLinks on a list or page because they are all doing Client Side Rendering, too many will slow your page down. If this happens, you might want to consider combining them into one JSLink script so that the server only has to call one file to return to the client to do all the rendering needed for your list.

Hope this helps.