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:
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:
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
- 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
I hope this will be helpful to add a header and footer to a list view web part in SharePoint Online using JSLink.
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
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