Change Sharepoint ListView To Jquery Accordion Using JSLink – CSR

0
442
views

In this article, I have explained how to change the sharepoint list view to collapsible look and feel using JSLink

What is jquery accordion?

Jquery accordion helps to display the contents in a collapsible view.
Let’s get started to display the sharepoint list items using accordion control
Navigate to sharepoint site -> Create a custom list -> Add some information into it

My sample list look like below

Open sharepoint designer

Navigate into SiteAssets -> Create a Javascript file

Upload the required Jquery files and CSS files into site assets folder

Css Files:  

  • demo.css
  • Defaults.css

Jquery Files :

• Jquery-min.js
• Accordion.js

Now am going to include the scripts and stylesheets into my “Accordion.js”

Code:

//Declare the style inside a javascript file

//Declare my custom css for design HTML

var cssId = 'myCss';

if (!document.getElementById(cssId)) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement('link');

    link.id = cssId;

    link.rel = 'stylesheet';

    link.type = 'text/css';

    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/demo.css';

    link.media = 'all';

    head.appendChild(link);

}

//Declare my custom css for design HTML

var cssId = 'myCss1';

if (!document.getElementById(cssId)) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement('link');

    link.id = cssId;

    link.rel = 'stylesheet';

    link.type = 'text/css';

    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/defaults.css';

    link.media = 'all';

    head.appendChild(link);

}

Create a function to override the list template

Inside the function call all the jquery references

(function () {

    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/jquery.min.js"><\/script>'));

    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/accordion.js"><\/script>'));
}();

Create a variable Overridectx

var overrideCtx = {};  

//Get the template of the list using variable

overrideCtx.Templates = {}

Get the list Header

overrideCtx.Templates.Header = "<div class='main'><div class='accordion'>";

Get the item template from the function accordionTemplate (ctx)

overrideCtx.Templates.Item = accordionTemplate; 

Get the list footer

overrideCtx.Templates.Footer = “</div></div>”;

As of now you get

(function () {

    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/jquery.min.js"><\/script>'));

    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/accordion.js"><\/script>'));

     var overrideCtx = {};

     overrideCtx.Templates = {}

     overrideCtx.Templates.Header = "<div class='main'><div class='accordion'>";

     overrideCtx.Templates.Item = accordionTemplate;    

     overrideCtx.Templates.Footer = "<div></div>";

     overrideCtx.OnPostRender = accordionOnPostRender;        

// This line of code tell TemplateManager that we want to change all HTML for item row render

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

Now  implement the function accordion template

// This function provides the rendering logic

    function accordionTemplate(ctx) {

          // Return whole item html
    return "<div class='accordion-section'><a class='accordion-section-title' href='#accordion-"+ ctx.CurrentItem.ID +"'>"+ ctx.CurrentItem.Title +"</a><div id='accordion-"+ ctx.CurrentItem.ID +"' class='accordion-section-content'><p>"+ ctx.CurrentItem.Descriprion+"</p></div></div>";

}

Full Code:

//Declare my custom css for design HTML

var cssId = 'myCss';

if (!document.getElementById(cssId)) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement('link');

    link.id = cssId;

    link.rel = 'stylesheet';

    link.type = 'text/css';

    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/demo.css';

    link.media = 'all';

    head.appendChild(link);

}

//Declare my custom css for design HTML

var cssId = 'myCss1';

if (!document.getElementById(cssId)) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement('link');

    link.id = cssId;

    link.rel = 'stylesheet';

    link.type = 'text/css';

    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/css/defaults.css';

    link.media = 'all';

    head.appendChild(link);

}



(function () {

    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/jquery.min.js"><\/script>'));

    (window.jQuery || document.write('<script src="https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/Accordion/js/accordion.js"><\/script>'));

    var overrideCtx = {};

    overrideCtx.Templates = {}

    overrideCtx.Templates.Header = "<div class='main'><div class='accordion'>";

    overrideCtx.Templates.Item = accordionTemplate;

    overrideCtx.Templates.Footer = "<div></div>";

    // This line of code tell TemplateManager that we want to change all HTML for item row render

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);



})();

// This function provides the rendering logic

function accordionTemplate(ctx) {

    // Return whole item html

    return "<div class='accordion-section'><a class='accordion-section-title' href='#accordion-" + ctx.CurrentItem.ID + "'>" + ctx.CurrentItem.Title + "</a><div id='accordion-" + ctx.CurrentItem.ID + "' class='accordion-section-content'><p>" + ctx.CurrentItem.Descriprion + "</p></div></div>";

}

Let’s include the Js file into List view webpart

Go to the page -> Edit page-> Click Edit webpart

Under miscellaneous -> link the Js file

Click Ok

 

Conclusion:

You are now able to render any kind of HTML design using JSLink Client side rendering into SharePoint list and libraries

Download source: Accordion JSLink

 

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here