JSLink conflict with lists of the same type (List Custom 100)

Question

Problem

I've two custom lists with ListTemplateType = 100. When I insert both into a page, the last rewrite the first.

I tryed add BaseViewID with diferent ID, like this question. But anything works with this property and is showed with default Sharepoint template.

Template 1 app1-jslink.js

;(function(){
    overrideCtx.Templates.Header = "<div id='gallery-cardapio'>"+
            "<div class='gallery-cardapio'>"+
                "<ul class='thumbs'>";
    overrideCtx.Templates.Footer = CustomFooter;
    // overrideCtx.BaseViewID = 1000; // Do not works
    overrideCtx.ListTemplateType = 100;

    overrideCtx.Templates.Item = CustomItem;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

    function CustomItem(ctx){...}

    function CustomFooter(ctx){...}
})();

Template 2 app2-jslink.js

;(function(){
    overrideCtx.Templates.Header = "<div id='gallery-niver'>"+
            "<div class='gallery-container'>"+
                "<ul class='thumbs'>";
    overrideCtx.Templates.Footer = CustomFooter;
    // overrideCtx.BaseViewID = 900; // Do not works
    overrideCtx.ListTemplateType = 100;

    overrideCtx.Templates.Item = CustomItem;

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

    function CustomItem(ctx){...}

    function CustomFooter(ctx){...}
})();

---

Tests

If I put BaseViewId in just one, both templates are rendered with override that does not have BaseViewId property.

If I put BaseViewId in both, they are render with default Sharepoint template.

If I don't put BaseViewId, both are render with last override.

---

How fix it? How to use 2 diferent lists of type custom (100) in same page?

_{Sorry, my english is not very good, and I've taken a bit help from Google Translate.}

Answer 1

It's not enough just to assign different BaseViewId values in your overrides, you also have to set matching BaseViewId values to the web parts on the page.

What you specify in the override is telling SharePoint: "this override applies when there are web parts that match the ListTemplateType and BaseViewId of what I set here."

If you do not change the BaseViewId value of the web parts themselves, they will stay as 1, and there will be no matches to your overrides.

So in your case, the behavior you saw was because both your web parts on the page still have ListTemplateType = 100 and BaseViewId = 1, like this:

// override code for template 1
overrideCtx.ListTemplateType = 100;
overrideCtx.BaseViewId = 1000;

// override code for template 2
overrideCtx.ListTemplateType = 100;
overrideCtx.BaseViewId = 99;

//...

// web part 1 on page
ctx.ListTemplateType = 100;
ctx.BaseViewId = 1;

// web part 2 on page
ctx.ListTemplateType = 100;
ctx.BaseViewId = 1;

In the above case there were no matches, so both web parts render with default rendering.

// override code for template 1
overrideCtx.ListTemplateType = 100;
// overrideCtx.BaseViewId = 1000; // commented out, so base view id will be 1

// override code for template 2
overrideCtx.ListTemplateType = 100;
overrideCtx.BaseViewId = 99;

//...

// web part 1 on page
ctx.ListTemplateType = 100;
ctx.BaseViewId = 1;

// web part 2 on page
ctx.ListTemplateType = 100;
ctx.BaseViewId = 1;

This time, both web parts match the override settings for template 1, so both will render as template 1.

What you have to do is hijack the code where SharePoint is rendering the web parts initially, and set their BaseViewIds to match the ones you use in the template overrides.

Read through this article very carefully: http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/

He outlines a way to hijack the rendering at the right time to be able to see which web part is rendering, and set it to have the BaseViewId that you want it to have so it will match your override.