Implement Accordion In SharePoint Using JS Link And Client Side Rendering

Client-side rendering was introduced in SharePoint 2013. The primary purpose of CSR is to provide the conditional formatting of the data present within the List Views. Prior to SharePoint 2013, XSLT formatting was the way to implement the conditional formatting of List Views. XSLT formatting required in-depth knowledge of working with XSL and debugging was also cumbersome. However, with CSR, we can tap in to the rendering process and override some of the default properties of the List View, using JavaScript. Some of the properties that can be overridden are given below.

• OnPreRender
• OnPostRender
• View
• Body
• Item
• Fields
• Header
• Footer

OnPreRender allows us to write some logic even before the List View is rendered, while OnPostRender allows us to modify the List View once the view has been rendered. Similarly, each of the properties can be overridden during run time to accomplish different List View modifications and at different List View locations.

Accordion

As per wiki definition, Accordion in GUI can be expressed as -

“The graphical control element accordion is a vertically stacked list of items, such as labels or thumbnails. Each item can be "expanded" or "stretched" to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration”.

In this walk through, we will see how to convert a SharePoint List View into accordion using Client Side Rendering (CSR). This becomes handy if we want to use SharePoint List to create an FAQ web part or a Question/Answer web part.

Pre-requisites

We will be using a SharePoint List that contains two multi line columns named “Question” and “Answer”. We will also create a new View named “Accordion” in the list where we will add the JS file used for Client Side Rendering in the JSLink section.

Implementation

Primarily we will be using Client Side Rendering to modify the list view during its run time. “overrideCurrentContext” is the main object that will hold the context information of ‘which property to override’ and ‘what logic to implement’ while over ridden. We will be over riding the Header and Footer section to encapsulate the view within a div class. This is done by overriding the Templates.Header and Templates.Footer properties of overrideCurrentContext

var overrideCurrentContext = {};
Templates = {};
Templates.Header = "<div class='ListAccordion'>";
Templates.Footer = "</div>";

We will then override the Item property so that each list item will be rendered in a specific Question Answer pattern. This is done by overriding ‘Templates.Item’ property and calling the function ‘ItemTemplate’ where we will return the html in the format Question Heading followed by the Answer. Finally ‘OnPostRender ‘ method will be used to implement the animation sliding and other styling of the Accordion, post rendering of the view.

OnPostRender = OnPostRender;
Templates.Item = ItemTemplate;

Full Code

(function() {
    var overrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.Templates.Header = "<div class='ListAccordion'>";
    overrideCurrentContext.Templates.Footer = "</div>";
    overrideCurrentContext.OnPostRender = OnPostRender;
    overrideCurrentContext.Templates.Item = ItemTemplate;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();

function ItemTemplate(ctx) {
    var Question = ctx.CurrentItem["Question"];
    var Answer = ctx.CurrentItem["Answer"];
    return "<h2>" + Question + "</h2><p>" + Answer + "</p><br/>";
}

function OnPostRender() {
    $('.ListAccordion h2').click(function() {
        $(this).next().slideToggle();
    }).next().hide();
    $('.ListAccordion h2').css({
        "background-color": "grey",
        "cursor": "pointer",
        "color": "white",
        "border-radius": "15px",
        "padding-left": "10px"
    });
}

Add JSLink

We can save the above code to a js file and upload it to say: Site Assets within the SharePoint Site. We can then go the list view’s edit page by appending “?toolpaneview=2” . In the edit page of the view go to the edit properties of the List view and add the js file in the JSLink section.

Ensure that if you have added the JS file in the Site collection’s Site Assets library use the token ‘~sitecollection’ and if you have uploaded it to the site’s site asset library use ‘~site’ token to mention the relative path of the JS File.

Once you click on Apply, the Client Side Rendering will modify the list view to act in an Accordion fashion as shown below,

We can now expand the questions as required to view the answers.

This implementation can also be used to create a Frequently Asked Question (FAQ) section. You can download the JS file used for the implementation from the top of the article.

Summary

Thus, we saw how to implement accordion in SharePoint List View using Client Side Rendering and JS Link.