The last few of weeks I got a requests to create list views that where a bit nicer than the default views.
Some requests were to display a certain text as a hyperlink or hyperlinks to display as a certain image, but I also got the request to make a view that did not look like a list view anymore.
My colleague jumped on this to create a custom webpart to display this. After showing what the Client rendering could do he was convinced to do it with the client rendering.
So this was a nice way to see what the Client rendering features of SharePoint 2013 could do. I tried it before on my own site to change a color of a certain column.
In this blog I want to take you with me to create a view for a FAQ list with grouping.
First we start with a custom list that has 3 columns
- Question (default title field)
Now we create a new view that we are going to use to customize. In this view we only select the columns Question and Answer and add grouping on the Category field.
To make it our self a bit easier we select at grouping ‘Expanded’ so we get all the results of the list.
The basics are done now.
This set of functions and gives us the framework to overwrite the rendering. As you can see I use namespaces as this is best practice.
I saved this file in the style library with the name faq.js as you can see in the function
So let’s start to create the FAQ list that we want. We start with the header and footer
This will give the template its div where we can work with.
Let’s go with the grouping. Here we just create a div with the grouping variables to identify and interact with.
Now for the item rendering we create a new div with the question and answer
For the extra interaction we need jQuery and for this we can add the extra script to the JS Link of the webpart like this: “~sitecollection/style library/faq.js | ~sitecollection/style library/jquery-2.1.1.min.js”
Some references I used