4

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.

  • Have you tried to encode ~? – Alexander Aug 25 '14 at 20:01
  • based on your update, can't you just remove the field from the view itself? 'Title (linked to item with edit menu); – Michael Colbs Aug 26 '14 at 15:11
  • I don't have that field in my external content type. I've specified which field should be used as title field but still the first column in the view gets the edit menu. And since I only want to show 1 field that field gets the edit menu and is unaffected by the JSLink code. – Gunnarsi Aug 26 '14 at 15:54
6

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.

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');
  • unfortunately this didn't solve my problem :( – Gunnarsi Aug 25 '14 at 15:30
2

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()
  • Although this did not solve my problem I still like this since I don't have to edit each page and add the link in the edit Web part properties. – Gunnarsi Aug 26 '14 at 11:28
0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.