Implement Accordion in SharePoint using JS Link and Client Side Rendering



Published: 27 September 2017

Client Side Rendering is a powerful option to modify the list views and list forms. It simply means that the data is transformed and displayed using Client side technologies like HTML and JavaScript. Prior to SharePoint 2013 in case of any requirements to modify the list views we had to use SharePoint Designer and XSLT formatting. However with SharePoint 2013 Client Side rendering has been made available. It comes in two flavors

  1. Display Templates – Used to modify the rendering of the Search Results display
  2. JSLink – Used to modify List Views and List Forms like NewForm.aspx

Essentially CSR with JSLink taps into list view rendering and overrides properties that govern the list view look and feel. Some of the properties that can be over ridden are:

  • 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 we can override the Item property if we want some logic to be implemented for each row of the List View and we can over ride the Fields property to update the rendering of the List Column. Header and Footer as the name suggests can be used to add Header and Footer Customization to the List.

In this article we will see CSR in action by creating an Accordion in SharePoint using Client Side Rendering

What are we going to do ?

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. 

How to do it ?

Primarily we will be using Client Side Rendering to modify the list view during its run time. “overrideCurrentContext” is the context 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 object.

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 of Question Heading followed by the Answer. Finally ‘OnPostRender ‘ method will be used to implement the sliding animation and other styling of the Accordion, post rendering of the view.

    overrideCurrentContext.OnPostRender = OnPostRender;

 overrideCurrentContext.Templates.Item = ItemTemplate;

JSLink Full Code

The complete code used for the demo is given below :

Apply the JSLink to SharePoint

The above code will be saved as a JS file and can be uploaded to the site assets library of SharePoint. In order to override the specific List View, append “?toolpaneview=2” at the end of the List View URL to go to the edit mode of the page. 

Specify the URL of the JS File in the JS Link section as shown above. While specifying the JSLink file URL we have to take a special note that we will be specifying site/site collection relative URL using the below tokens.

  • ~site - Used to link to the JS file in the current web
  • ~sitecollection - Used to link to the JS file in the current site collection
  • ~layouts - Used to link to the JS file that has been deployed to the layouts folder

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. 

Summary

Thus we saw how to implement Accordion in SharePoint List View using Client Side Rendering and JS Link. We will cover more of CSR practical uses in the upcoming articles. 



Join 6,500 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers


About Author

Priyaranjan is a SharePoint Consultant with 7+ years experience in developing and deploying SharePoint Applications.He has worked on various SharePoint iterations starting from MOSS 2007 through SharePoint 2016 and Office 365. He is a frequent contributor at Microsoft TechNet and has won 33 Gold Medals in various TechNet Wiki Guru Monthly Competitions.As a token of appreciation for the TechNet community activities, he was interviewed by Microsoft Program Manager,Ed Price. He has also published 300 Articles and 4 SharePoint Ebooks in different technical communities.You can find his Microsoft TechNet contributions here