SharePoint 2013 jslink list view examples: Add header and footer to list view web part using JSLink in SharePoint Online/2013/2016

This SharePoint 2013 jslink list view example explains how we 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 list view web part in SharePoint Online.

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

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:

SharePoint 2013 JSLink

SharePoint 2013 JSLink

~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

sharepoint 2013 jslink list view example

You may like following jslink in SharePoint 2013 tutorials:

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

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

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

  • Steve Harvancik says:

    Not working. I entered the JS script as you suggested and put it into my assets library and reference it in the jslink on a page. Does not seem to be working. I am using your exact syntax of ~site/SiteAssets/js-test/JSLinkHeaderFooterTest.js

  • >