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

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.