-
Notifications
You must be signed in to change notification settings - Fork 164
/
csr_ovr_RenderListTemplate_Fixed.js
109 lines (85 loc) · 4.77 KB
/
csr_ovr_RenderListTemplate_Fixed.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
//Original Author: Paul Hunt - April 2014
//Create our Namespace object to avoid polluting the global namespace
var pfh = pfh || {};
//Define our Header Render pattern
pfh.renderHeader = function(ctx) {
//Define any header content here.
//You can include JavaScript and CSS links here.
var headerHTML = "<div>Header</div>";
return headerHTML;
}
//Define our footer render pattern
pfh.renderFooter = function(ctx) {
//Define any footer content here.
var footerHTML = "<div>Footer</div>";
//Now begin the paging control
var firstRow = ctx.ListData.FirstRow;
var lastRow = ctx.ListData.LastRow;
var prevPage = ctx.ListData.PrevHref;
var nextPage = ctx.ListData.NextHref;
var pagingCtrl = "<div class='paging'>";
// Using the JavaScript in line IF notation, we'll check IF the variable contains any data
// If it does, then the relevant paging control for forwards or backwards will be displayed.
pagingCtrl += prevPage ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" +
prevPage + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left'" +
" src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
pagingCtrl += prevPage || nextPage ? "<span class='ms-paging'><span class='First'>" + firstRow +
"</span> - <span class='Last'>" + lastRow + "</span></span>" : "";
pagingCtrl += nextPage ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" +
nextPage + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right'" +
" src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
//If you want the paging to appear above the footer content, switch the order of these two items
return footerHTML + pagingCtrl;
}
//Define our item Render pattern
//This will be called once for each item being rendered from the list.
//All fields in the view can be access using ctx.CurrentItem.InternalFieldName
//NB: The field must be included in the view for it to be available
pfh.CustomItem = function(ctx) {
var itemHTML = "<div>" + ctx.CurrentItem.Title + "</div>";
return itemHTML;
}
//Define any code/function that needs to be run AFTER the page has been completed and the DOM is complete.
pfh.PostRenderCallback = function(ctx) {
}
//Define the function that will register our Override with SharePoint.
pfh.RegisterTemplateOverride = function () {
// Define a JavaScript object that will contain our Override
var overrideCtx = {};
overrideCtx.Templates = {};
// Here we assign our Header and Footer functions to the template overrides.
overrideCtx.Templates.Header = pfh.renderHeader;
overrideCtx.Templates.Footer = pfh.renderFooter;
// And here we assign the CustomItem function to the Item registration.
overrideCtx.Templates.Item = pfh.CustomItem;
// And finally we add our PostRender function.
// This expects a JavaScript array, so we pass the function in []
// Dec 2015: Fixed an issue with the PostRender registration that caused it to fire during template registration
overrideCtx.OnPostRender = [function() {pfh.PostRenderCallback(ctx);}];
// Register this Display Template against views with matching BaseViewID and ListTemplateType
// See http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.listtemplatetype(v=office.15).aspx for more ListTemplateTypes
overrideCtx.BaseViewID = 99; //Note: We're using BaseView ID 99 to match our override below
overrideCtx.ListTemplateType = 100;
// Register the template overrides with SharePoint
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
};
//Now we load in our override to ensure that this Override is only applied to the intended ListView
ExecuteOrDelayUntilScriptLoaded(function(){
var OldRenderListView = RenderListView;
RenderListView = function(ctx,webPartID)
{
//Check using the F12 developer toolbar, which WPQ number is required for the webpart
if (ctx.wpq == 'WPQ3')
{
ctx.BaseViewID = 99;
}
OldRenderListView(ctx,webPartID)
}
},'ClientTemplates.js');
//Register for MDS enabled site otherwise the display template doesn't work on refresh
//Note: The ~sitecollection tokens cannot be used here!
//PH Jan 2015 - As we know what the URL is on MDS enabled sites, we can safely extract the site colleciton URL
//For none MDS sites, we don't care if RegisterModuleInit works or not...
pfh.sitecolpath = window.location.pathname.substring(0,window.location.pathname.indexOf("/_layouts/15/start.aspx"))
RegisterModuleInit(pfh.sitecolpath + "/_catalogs/masterpage/Display Templates/csr_ovr_RenderListTemplate_Fixed.js", pfh.RegisterTemplateOverride); // CSR-override for MDS enabled site
pfh.RegisterTemplateOverride(); //CSR-override for MDS disabled site (because we need to call the entry point function in this case whereas it is not needed for anonymous functions)