Published: 27 September 2017
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 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
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.
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.
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;
The complete code used for the demo is given below :
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.
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.
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.
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