How to add header and footer to list view web part using JSLink in SharePoint 2013?

SharePoint 2013 JSLink

In this post, we will discuss how we can add header and footer into a list view web part using JSLink in SharePoint 2013 or SharePoint 2016 or SharePoint Online. Here we have a list known as Training and I have added the list inside a web part page.

You can also check:
JSLink in SharePoint 2013 or JSLink in SharePoint Online

Display List Data in Tabular format in SharePoint Online using AngularJS

Microsoft Flow Copy files from one SharePoint Online account or folder to another Office 365

The list appears inside the web part page like below:

JSLink in SharePoint 2013 tutorials
JSLink in SharePoint 2013 tutorials

Now add the below code and save it in .js file.

(function () {

var overrideContext = {};

overrideContext.Templates = {};

overrideContext.Templates.Header = overrideCustomHeader;

overrideContext.Templates.Footer = overrideCustomFooter;

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

})();

function overrideCustomHeader() {

return “<h3>Our Custom Header</h3>”;

}

function overrideCustomFooter() {

return “<h3>Our Custom Footer</h3>”;

}

Now I have added the .JS file inside the Site Assets document library.

Now edit the list view web part and you can see the JS Link and you can put the JS Link path like below:

SharePoint 2013 JSLink
SharePoint 2013 JSLink

~site/SiteAssets/JSLinkHeaderFooterTest.js


After you save the page, you can see the header and footer like below:

JSLink in SharePoint 2013
JSLink in SharePoint 2013

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →