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

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

~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:

• Make Title field read-only using SPClientTempltes and JSLink in SharePoint Online
• SharePoint Online: Change SharePoint ListView To Jquery Accordion Using JSLink Client Side Rendering
• SharePoint 2013/2016/Online: Working with JSLink Templates Fields
• SharePoint 2013/2016/Online: How to Load multiple js file in JSLink
• Customize list view using jslink in SharePoint 2013/2016/Online
• How to use JSLink in SharePoint 2013/2016/Online
• Change the SharePoint List View into JQuery News Ticker Using JS Link CSR
• SharePoint Online Branding: Display List items into page using AngularJS and REST API in SharePoint online or SharePoint 2016/2013
• Freeze Header Row in List View or Library on Scrolling using jQuery in SharePoint 2013/2016/Online

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

SharePoint Online FREE Training

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

JOIN NOW