I have two custom lists in the side bar of my page. I have altered way it looks using the cisar app so that it displays just the images in a row with a title that I have entered manually above. Then the user hovers over an image the title that relates to that row in the list shown be appended to the main title above - I have achieved this with only one list on the page. When I add two lists with different js links, it seems to only use the last one for both lists. Is there a way to stop this?

I have tried using an if statement in the one js file like below;

if(ctx.ListTitle = "This List") {
    //Run Custom Template Code for this list
if(ctx.ListTitle = "Another List") {
    //Run Custom Template Code for this list

But this doesn't work.

The image below shows that when I hover over an image from the bottom list, it changes the text in the top title.

enter image description here

The code below is from one of the JS files that is linked to a list, the other JS file is a copy but references different classes/id's

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function getBaseHtml(ctx) {
return     SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);

  function init() {


  // OnPreRender: function(ctx) { },

  Templates: {

  //     View: function(ctx) { return ""; },
    Header: function(ctx) { return "<div class='sideListItem'><p class='sideLinksTitle' id='eesidelinks'>Useful Links</p>"; },
  //     Body: function(ctx) { return ""; },
  //     Group: function(ctx) { return ""; },
    Item: function(ctx) { return returnListItem(ctx) },
    //Item: function(ctx) { return "<a href="+ctx.CurrentItem["Link"]+"><img class='sideListImg tinted' src="+ctx.CurrentItem["Image"] + " onmouseover='showTitle("+ctx.CurrentItem["Title"]+")'></a>"; },
  //     Fields: {
  //         "<field internal name>": {
  //             View: function(ctx) { return ""; },
  //             EditForm: function(ctx) { return ""; },
  //             DisplayForm: function(ctx) { return ""; },
  //             NewForm: function(ctx) { return ""; }
  //         }
  //     },
    Footer: function(ctx) { return "</div>"; }


  OnPostRender: function(ctx) { addListeners(); },

  ListTemplateType: 100


  function returnListItem(ctx) {

var tempVar = ctx.CurrentItem["Title"];

var ret = "<a href="+ctx.CurrentItem["Link"]+"><img alt='" +     ctx.CurrentItem["Title"] + "' class='sideListImg sideListImgEE tinted'     src="+ctx.CurrentItem["Image"] + "></a>";

return ret;

  function addListeners(){

var classname = document.getElementsByClassName("sideListImgEE");

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mouseover', sidelistEEOver, false);
    classname[i].addEventListener('mouseout', sidelistEEOut, false);


   RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/eeSideList.js"), init);


I've seen one solution but it required editing the master pages which I can't do?

Any Ideas?

1 Answer 1


This is a fairly well known problem that happens because both custom lists have ListTemplateType: 100 and BaseViewID: 1, so when you have CSR overrides for more than one custom list on the same page, the last loaded CSR script will be applied to all of them.

There is a workaround that you can use where you set your CSR scripts to target different BaseViewIDs, and then hijack the SharePoint rendering function and trick it into thinking the BaseViewID of the web part it's rendering matches the BaseViewID you specify in your CSR script, so then it will use your CSR override code.

Here's a link to the blog post about the workaround, and here is a link to another answer I posted about this issue, the bottom half provides more explanation about how the workaround works.

Also, and I don't mean to be pedantic (OK, maybe I do), but remember that "JSLink" is not the same thing as Client Side Rendering (CSR).

JSLink is a way you can "attach" Javascript files to certain things in SharePoint to have them loaded when a page is served up. You can use JSLink to load jQuery. You can use JSLink to load another script that has nothing to do with rendering. However, JSLink happens to be extremely useful for loading CSR scripts.

CSR, on the other hand, is what you are doing when you override the rendering of list views and list items, and apply your own customized logic for what HTML you want to use to display that data. CSR scripts are very often loaded using JSLink, but they do not have to be.

JSLink and CSR are very closely related, but they are not equivalent.

  • Yeah, i've seen this work around but not your great explanation on what it's doing. You mention that if you remove a list, SP will redo the ID it's assigned to ALL the lists. I didn't want to have to constantly redo all the code if someone removes a list, hence my attempt above. Do you know if the ID's change when a new list is added rather than removed?
    – ChrisBull
    Mar 24, 2017 at 14:20
  • If I recall (and I may be wrong about this), the numbering depends on the order of the web parts on the page. So if someone adds or removes a web part that as after your web parts, the numbering of your web parts should not change. But if someone adds a web part and puts it in between your web parts, the numbering will change. But again, I might be wrong about that, you would need to test various scenarios to be sure. Mar 24, 2017 at 14:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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