How to Add header and footer to list view web part using JSLink in SharePoint

Complete SharePoint Training Course ($46 OFF)

This SharePoint 2013 jslink list view example explains how to add header and footer to a list view web part using JSLink in SharePoint 2013 or SharePoint 2016 or SharePoint Online. We can use jslink to customize the list view web part in SharePoint Online.

Add header and footer to list view web part using JSLink in SharePoint

In this particular JSLink SharePoint Online example, I am going to show, how you can add a header and footer to a list view web part in SharePoint Online. I will add a custom message for the header and footer in the list view web part.

Here we have a SharePoint Online list known as Training and I have added the list inside a web part page. The SharePoint Online list appears inside the web part page like below:

SharePoint 2013 jslink list view examples

To use jslink inside a list view web part, we have to first save the below code in a .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 in SharePoint Online. Once we Save the file, we need to provide .js file path in the JS Link in the list view web part.

Open the SharePoint Online web part page where you have added the list view web part. Then edit the list view web part, from the web part properties expand Miscellaneous section and provide the js link file page in the JS Link option like below:

~site/SiteAssets/JSLinkHeaderFooterTest.js

After you save the SharePoint web part page, you can see the custom header and footer appears for the list like below:

sharepoint 2013 jslink list view example

You may like following jslink in SharePoint 2013 tutorials:

I hope this will be helpful to add a header and footer to a list view web part in SharePoint Online using JSLink.

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 SPGuides.com