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
3 Answers
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– IssibraApr 28, 2014 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 ?– IssibraApr 28, 2014 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.– AveenavApr 28, 2014 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.