JS Link not working after saving page

Question

I have an external list with one field/column that contains an URL and title. e.g. "http://www.example.com/somefile.ext,Example file"

But since I want to just show a hyperlink with the title I've written this to render the field in a listview:

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'LinkToFile': { 'View': renderFileLink }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

function renderFileLink(ctx) {
    var fieldVal = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    var value = fieldVal.toString().split(',');
    var html = "<a href='" + value[0] + "' style='white-space:nowrap;'>" + value[1] + "</a>";
    return html;
}

When I edit the page, go to webpart properties and type in the URL to the js file ~site/siteassets/jsfile.js and hit apply the page refreshes and the field is rendered correctly. I then stop editing the page and save it and the field is no longer rendered correctly but instead I just get the value "http://www.example.com/somefile.ext,Example file". If I then again edit the page and go to webpart properties for the listview the jslink still contains the correct URL and I can again click apply and the custom formatting is applied to the view, but again when I save it stops working.

The script loads and when I debug the page it goes into renderFileLink for every item in the list but when the items are displayed nothing has been changed.

Has anyone encountered anything like this and knows a solution or have ideas for things I can try to fix this?

UPDATE: I'm now getting closer to finding a solution. It seems the first column of the view gets the three dots to open the menu for the item and because of that I'm unable to apply the custom rendering to the field. As soon as I added a new field and had that first in the view and LinkToFile field second then my script renders the field correctly.

So my new problem is the first field. Is there a way I can specify what field is the title field (the one that has the ... menu associated with it) so that I can just leave that out of the view and only have my other column (LinkToFile) without it getting the ... menu?

UPDATE: I was unable to find a solution to the problem. Instead I ended up hiding the first column with css.

Answer 1

If yous store .js file in masterpage gallery or styles library you have to write the .js file url like this:

Sitecollection level: ~sitecollection/_catalogs/masterpage/myjslinkfile.js

Site level: ~site/_catalogs/masterpage/myjslinkfile.js

Layouts should work fine without ~site or ~sitecollection.

Answer 2

Try wrapping your override function within ExecuteOrDelayUntilScriptLoaded() so that it loads after clienttemplates.js is loaded.

function registerRenderer() {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = {
        'LinkToFile': { 'View': renderFileLink }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
}

ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

Answer 3

I find setting the JSLink in the Web part properties unreliable. I could only get it to work by storing the .js in certain places. What you should try is, attach it to the view itself and not the web part. Run this powershell script to set the JSLink, then refresh your listview's View again in Web Part Properties. (I like storing my .js in _layouts but it could go elsewhere such as a Scripts library).

$web = Get-SPWeb http://<site>/<Web containing List>
$list = $web.Lists["CustomList"];
$view = $list.Views["All Items"];
$view.JSLink = "/_layouts/15/renderFileLink.js"
$view.Update()
$web.Update()

Answer 4

Just an addition to the answers above but it seems you have to use the masterpage gallery. Calling a jslink file from the style library wouldn't work for me.

~sitecollection/_catalogs/masterpage/jslinkfile.js

vs

/style%20library/jslinkfile.js

Answer 5

Just an FYI I tried all the above and could not get anything to work correctly. After about a day of being ready to pull my hair out, I figured out, it does matter if you use ~site vs ~sitecollection depending on where you store your .js file i.e.:

~site/dev/Js/_catalogs/masterpage/JSLink/JSLinkDivExample.js

The above did not work for me, but when I changed the token and URL string to:

~sitecollection/_catalogs/masterpage/JSLink/JSLinkDivExample.js

The JSLink file started to work (perhaps this is why some others have had mixed results as well). If you will notice I dropped the ~site/dev/js/... and in its place I put just the ~sitecollection/... token. I had even tried ~sitecollection/dev/js/... with zero good results.

I personally would try and keep all my work at the root of the site collection, in the master page gallery, and keep it organized by folders (i.e. JSLink folder) you could even do sub folders under the JSLink folder if you wanted to keep them separate.

Hope this helps a few folks out! Thanks. SG.