JSLINK for multiple list views

Question

I have a list that i used for many view as a web parts in the home page, so all the view are from the same list. what i want is to customize my view in a specific design, so i have to apply a JSlink for every web part, the problem is that when i apply a js file for a view it's applied also for the other view. I search a lot in the net and i find this tutorial http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/ but i still don't understand how to build my own jsfile and apply it thanks

Answer 1

The Answer of this question is that we can list by view ID; every view has his own viewID. there is the whole code of my script that I use to style 3 différents view coming from the same list

(function () {
/*
* Initialize the variable that store the overrides objects.
*/
var overrideCtx = {};
overrideCtx.Templates = {};

//  Assign functions or plain html strings to the templateset objects:
//  header, footer and item.
overrideCtx.Templates.Header = "<div style=\"background: #FFFFF120;\">";
overrideCtx.Templates.Footer = "</div>";

//  This template is assigned to the CustomItem function.
overrideCtx.Templates.Item = CustomItem;

overrideCtx.BaseViewID = 1; 
overrideCtx.ListTemplateType = 100;


// Register the template overrides.
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

/*
 * This function builds the output for the item template.
 * Uses the Context object to access announcement data.
 */
function CustomItem(ctx) {
    // Build a listitem entry for every announcement in the list.
      var view=ctx.view;
       var id=ctx.CurrentItem.ID;

    if (Head && (Head.length ) >= 25)
    {

        Head = Head.substring(0, 25) ;
    }

    // Return html element with appropriate color based on priority value
    switch (view) {
        case "MyfisrtviewID":
            return "<a href=''><span>" + ctx.CurrentItem.Title  + "</span>";
            break;

    case "mysecondviewID":
         return  "<a href=''><span >"+ ctx.CurrentItem.Title +"</span><span> - <b>"+ Head +"</b></span></div>";
        break;


        case "mylastviewID":
            return "<span style='color :#cab023'>" + ctx.CurrentItem.Title  + "</span>";
    }
}

Answer 2

There are couple of ways to handle your scenario (multiple views of the same list). When you override the context, it provides properties such as view, BaseViewID, webPartID etc. Within your JSLink, you can check if the view matches the GUID of the view you intend to apply JSLink to.

Cimares from myfatblog shows an excellent example of overriding the BaseViewID. Source: http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/

See the slightly modified code below:

overrideContext.BaseViewID = 99;
overrideContext.ListTemplateType = 10002;

// Now override the RenderListView once the ClientTemplates.JS has been called
ExecuteOrDelayUntilScriptLoaded(function(){

    //Take a copy of the existing Microsoft Definition of RenderListView
    var oldRenderListView = RenderListView;

    //Now redefine RenderListView with our override
    RenderListView = function (overrideContext, webPartID)
    {
        //Check the context of the currently rendering List view
        if (overrideContext.ListTitle == 'YOUR_LIST_TITLE')
        {
            //Change the GUID below from your View, you can also check the webpart ID but webpart ID changes if you add/modify webparts
            if (overrideContext.view === "{E9555BA9-944E-4BAD-9992-F8C92A143145}") {
                //Override the BaseViewID if it's the one we want.
                ctx.BaseViewID = 99;
            }
        }

    //now call the original RenderListView
        oldRenderListView(overrideContext, webPartID);
}

}, 'ClientTemplates.js');


SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

Answer 3

This might work I suppose.

Add the list web part -> open the web part menu for the same -> In the menu, select the required view from the drop down.

This way if the JS is associated will be applied else not.

P.S. I have tried it by using a couple of views and associating a JS file with one of them.