Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion

Overview

We have already discussed how to create Accordion List View in SharePoint 2010 in this post.
SharePoint 2013 introduces client side rendering framework for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript. So, let’s discuss how to create Accordion List View in SharePoint 2013 based on client-side rendering.

For demonstration purposes we will create FAQ List based on Custom List. Default view for our list  will look like this

FAQDefaultView

And our goal here to customize it in such a way list items will be displayed  in accordion as shown below

AccordionListView

Implementation

In order to simplify our solution we restrict ourselves to the creation of client side rendering template only and applying it to the existing List View. If you are interested how to build custom solution for Accordion List  please follow my post about creating Accordion List View for SharePoint 2010.

Create Custom List for FAQ

FAQ List is based on Custom List. For storing questions we will utilize Title field, for Answers we will create new field with Note type

Create  client-side rendered view for Accordion

Client-side rendered view of an FAQ list is presented below

Customize a List View

The last step is to apply client-side rendering template to existing view. Let’s first add FAQ List instance on on page, after that  we only need to specify JSLink property value for List View

Please note that actually  three JavaScript files have been specified(the first two are jQuery libraries) for  JSLink property. All of them are stored in my case in hive, but of course they could be stored not only in file system.

Advertisements

31 thoughts on “Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion

    • Hi, the described method is intended for demonstration of customization a list view only.
      In case of customizing the display of quick launch, at least two options are available:

      • customize the display on the client side
      • replace the Menu control, see for example here
  1. Pingback: SharePoint 2013: Renderizado en el lado del cliente (I) - Blog de Juan Carlos González en Geeks.MS

  2. Pingback: ¡Renderizado en el lado del cliente! - Blog de la Comunidad de Office 365 - Office 365 - Español - Microsoft Office 365 Community

  3. Pingback: SharePoint 2013: Customize a list view by using client-side rendering | Share your knowledge

  4. Здравствуйте, Вадим.
    А как вернуть фильтры и навигацию между страницами? У меня она почему-то не работает. Использовал Ваш пример во внешнем списке.

    • Приветствую, Сергей.
      Если я правильно понял, необходимо отобразить Header & Footer, как например, в стандартном представлении.
      Тогда требуется добавить рендеринг Table Header перед рендерингом Rows, т.е.:

      var accordionHtml = '';
      accordionHtml+= RenderTableHeader(renderCtx); //insert to render default header
      //Render rows goes here..

      Вот как это выглядит в моем примере
      FAQ List

      • Спасибо, Вадим. Уже разобрался. Правда пришлось отказаться от данного способа, т.к. я извлекаю внешний список, и нагрузка при этом становится жуткая – т.к. клиент выгружает сразу все данные, которые с у учетом клиентского рендеринга грузятся на медленных машинах более минуты (более 5000 тыс записей MSSQL). Сделал через серверный рендеринг XSL.
        А клиентский пожалуй использую во встроенных компонентах SP или непосредственно в форме просмотра элемента.
        Тем не менее Ваша информация помогла очень, ну и заодно время выиграл перед заказчиком. Спасибо 🙂

  5. Pingback: Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion | Share your knowledge

  6. Hi

    Thanks for this example. I have tried implementing it but I get an error. I reference the same JS files as yourself but in a different order; jquery, jqueryui and finally accordion, otherwise the code was loading in the wrong order and jQuery not working. But now I get the error:

    Object doesn’t support property or method ‘accordion’

    I have tried different browsers and versions of jQuery but the result is the same. Please can you help?

    Thanks for your help.
    Azam

  7. Dear Vadim,

    thank you for this example.

    I have tried with a custom field that I have, a LookupField.

    I have created the .js file to render the control for the view form, (AllItems), of the list where the control is used.

    In the default view of the custom list where I have my custom field, all works fine, but I also have a page where I have another view of the same list to show only certain list items: in this view it seems that the .js file is not used. The control is not rendered and I see something like

    &lta onclick=”OpenPopUpPage(‘http://mysite/siteCollection/_layouts/15/listform.aspx?PageType=4&ListId=25394913-1899-449b-8947-3ef7fdfa5cd1&ID=541&RootFolder=*’, RefreshPage); return false;” href=”http://mysite/siteCollection/_layouts/15/listform.aspx?PageType=4&ListId=25394913-1899-449b-8947-3ef7fdfa5cd1&ID=541&RootFolder=*”&gtBLA BLA BLA&lt/a&gt

    Can you help me?

    Thank you very much,
    Gennaro.

  8. Pingback: SharePoint 2013 List View Accordion Render | Question and Answer

  9. Hello,
    thanks for your help,
    I use Sharerpoint 2013 Online is the code works with a list.
    The problem occurs when you use the code in a page that contains multiple lists.
    Probably a problem with BaseViewID, but I’m no expert.

    Have an idea?

    Thank you very much

  10. Nice post. It works globally but i have a problem with the header. It seems that the css is not properly applied as my header is not displayed after the icon but on the left side making it somewhat messy. I tried changing the css but found no way to change that.
    Other question, do you have an idea how to create a subdivision using an additional field like having general questions first, software questions, etc.
    Thanks

  11. Hi there – In addition to my earlier question for search box; I am facing one more issue.
    I have created a custom list view and override by js link. I put this list view webpart one the homepage of the site. When I put another webpart from the document library. This custom rendering is applying to that document library view web part. How can we tie the js link only to that specific list view webpart? I tried with different BaseViewID’s but it didn’t work. Could you please advise?

    Thanks & Regards,
    Khushi

  12. Good afternoon, If anyone is following this that was successful can you please respond to how. I have created a custom list with (Title) being Question and another plain txt single line being answer I have changed the name of the list to Accordion I have added the AccordionViewTemplate to my Style Library and referenced it in the JS Link. I have also referenced the two jQueys such as this ~sites/StyleLibrary/jquery-1.11.3.min.js|~sites/StyleLibrary/jquery.ui.js|~sites/masterpages/AccordionViewTemplate.js. I did not change any of the code in the template at all, maybe I should have?? Nothing is happening at all. My list stays exactly the same. Any help would be GREATLY appreciated.

    Thanks very much, Lori

  13. Vadim,
    This is awesome. I was able to add my own styling to this, however am struggling with using this code to only target only one webpart on the page. Can you explain how I can use the JS link to target only one web part? I have another web part on my page which I need to use a different JS link. This code currently gives the other list (doc library) an “undefined” on page.
    Thanks,
    Drew

  14. Hi vadim,

    I’m trying to create a accordion which containt document libraries. Do you have smart solution to do this?

    Much appreciated!

    • I want to apply the JS to one particular list on my web parts page and not the other lists there. Could you please break it down for me? The solution you suggested above using ListTemplateType / ViewStyle / BaseViewID does not work for me.

  15. Hello. I tried doing this and everything is linked up but it doesn’t work. I also hosted the files on my site asset folder.

  16. Hi,

    It’s not working for me,I have tried below scenario, can you guide me please if I am missing anything?

    1-firstly created a js file and added you code into that and refereed in Js link property of List view but not worked
    2-In a script editor webpart added your js code and tried but not worked
    3-also tried to chnage view name in below code but not worked
    accordionHtml = ”;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s