Sharepoint 2013 JSLink (CSR) Not Working

Question

I'm trying to make our list view as an accordion by following this tutorial:

https://code.msdn.microsoft.com/office/Client-side-rendering-code-ccdb2a0e

-

I followed the tutorial:

Create a Custom List, add a new column to the list:

Name: Description

Type: Multiple lines of text

Edit the Default New Form

Go to List view web-part properties and add the JSLink file (~sitecollection/Style Library/JSLink-Samples/Accordion.js) to JS link property under the Miscellaneous Tab. Click Apply.

-

Nothing changed, so I added a Script Editor in that page and pasted js code. Then it kind of works.

Is there anything I did wrong? Thanks!

Answer 1

Unfortunately the list view is rendered properly when Description field is type of Plain text from the specified example.

To render it properly when Description field is type of Rich text or Enhanced, replace the accordionTemplate function with this one:

function accordionTemplate(ctx) { 
    var title = ctx.CurrentItem["Title"]; 
    var description = ctx.CurrentItem["Description"]; 

    // construct List Item  
    return "<h2>" + title + "</h2><p>" + $(description).html() + "</p><br/>"; 
} 

Result

---

I would recommend you to try another approach to render List View as accordion as demonstrated in Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion article.

Key points:

• jQuery IU Accordion is used for rendering List Items as collapsible content panels
• demonstrates how to load multiple JavaScript libraries (e.g. jQuery) using JSLink property

Result