JS link with multiple custom lists

Question

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.

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() {

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

  // 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);
  init();

});

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

Any Ideas?

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.