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

up vote 4 down vote accepted

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>";
    }
}

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);
  • hi Aveenav i still don't understand u well, so can you give me more explanation, for example where can i called this function ExecuteOrDelayUntilScriptLoaded ? can u give me the complete js file – Issibra Apr 28 '14 at 14:46
  • how can I override override the RenderListView once the ClientTemplates.JS has been called, it's done automatically or i have to put it in the same file with ClientTemplates.JS, if Yes, where ? – Issibra Apr 28 '14 at 14:56
  • See Chris O'Brien 's example for JSLink. sharepointnutsandbolts.com/2013/01/… The above code, you'd put under the anonymous function. – Aveenav Apr 28 '14 at 15:55

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.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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