Overview
The creation of non standard presentations for Lists/Libraries is a fairly common scenario and using the XSLT List View Web Part (XLV) possibilities that can be achieved pretty easily.
Let’s take a look how to render list of question and answers using Accordion Menu in SharePoint. Actually the idea for this post appeared after posting of corresponding question on StackOverflow.
So, let’s discuss how it could be accomplished using XLV. For Accordion we will utilize jQuery UI library.
Implementation
FAQ Custom List
First of all, let us define where the questions and answers (FAQ) we’ll be stored. For this we will use Custom List with Content Type.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <ContentType ID="0x0100fb1027dc96a44bf280f6cb823a8da5ae" | |
| Name="FAQ" | |
| Group="SE" | |
| Description="FAQ Content Type" | |
| Inherits="TRUE" | |
| Version="0"> | |
| <FieldRefs> | |
| <FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Question" Sealed="TRUE"/> | |
| <FieldRef Name="LinkTitleNoMenu" ID="{bc91a437-52e7-49e1-8c4e-4698904b2b6d}" DisplayName="Question" Sealed="TRUE"/> | |
| <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/> | |
| <FieldRef ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}" Name="Answer"/> | |
| </FieldRefs> | |
| </ContentType> |
Custom View for arranging items using jQuery UI Accordion
After creating Custom List we add new View for displaying Accordion for FAQ items
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <View BaseViewID="10" Type="HTML" WebPartZoneID="Main" DisplayName="Accordion" DefaultView="FALSE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="Accordion.aspx"> | |
| <Toolbar Type="Standard" /> | |
| <XslLink Default="TRUE">FAQ.xsl</XslLink> | |
| <RowLimit Paged="TRUE">30</RowLimit> | |
| <ViewFields> | |
| <FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/> | |
| <FieldRef Name="Answer" ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}"></FieldRef> | |
| </ViewFields> | |
| <Query> | |
| <OrderBy> | |
| <FieldRef Name="ID"></FieldRef> | |
| </OrderBy> | |
| </Query> | |
| <ParameterBindings/> | |
| </View> |
XSLT style sheet for rendering Accordion View
XSLT style sheet for FAQ List is intended for the following purposes:
- loading jQuery Core and UI Libraries
- rendering list items using layout as specified for Accordion menu
- initializing and rendering Accordion for List items
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" | |
| xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" | |
| version="1.0" exclude-result-prefixes="xsl msxsl ddwrt x d asp __designer SharePoint ddwrt2" | |
| xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" | |
| xmlns:asp="http://schemas.microsoft.com/ASPNET/20" | |
| xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" | |
| xmlns:xsl="http://www.w3.org/1999/XSL/Transform" | |
| xmlns:msxsl="urn:schemas-microsoft-com:xslt" | |
| xmlns:SharePoint="Microsoft.SharePoint.WebControls" | |
| xmlns:ddwrt2="urn:frontpage:internal"> | |
| <xsl:import href="/_layouts/xsl/main.xsl"/> | |
| <xsl:output method="html" indent="no"/> | |
| <xsl:template match="View[@BaseViewID='10']" mode="full" ddwrt:ghost="always"> | |
| <tr class="ms-viewheadertr"></tr> | |
| <tr> | |
| <td> | |
| <div id="accordionFAQ"> | |
| <xsl:apply-templates select="." mode="RenderView" /> | |
| </div> | |
| </td> | |
| </tr> | |
| <xsl:apply-templates mode="footer" select="." /> | |
| </xsl:template> | |
| <xsl:template mode="Item" match="Row[../../@BaseViewID='10']" ddwrt:ghost="always"> | |
| <xsl:param name="Fields" select="."/> | |
| <xsl:param name="Collapse" select="."/> | |
| <xsl:param name="Position" select="1"/> | |
| <xsl:param name="Last" select="1"/> | |
| <xsl:variable name="thisNode" select="."/> | |
| <h3> | |
| <xsl:value-of select="$thisNode/@Title" /> | |
| </h3> | |
| <div> | |
| <xsl:value-of select="$thisNode/@Answer" disable-output-escaping="yes" /> | |
| </div> | |
| </xsl:template> | |
| <xsl:template name="FAQViewOverride" mode="RootTemplate" match="View[List/@TemplateType=11999]" ddwrt:dvt_mode="root"> | |
| <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> | |
| <script> | |
| $(function() { | |
| $( "#accordionFAQ" ).accordion(); | |
| }); | |
| </script> | |
| <xsl:call-template name="View_Default_RootTemplate"/> | |
| </xsl:template> | |
| </xsl:stylesheet> |
Using jQuery UI Accordion
jQuery Core and UI libraries are injected during XSLT style sheet processing. After JavaScript files which hosted on Microsoft CDN are loaded, jQuery UI Accordion is initialized for items.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <xsl:template name="FAQViewOverride" mode="RootTemplate" match="View[List/@TemplateType=11999]" ddwrt:dvt_mode="root"> | |
| <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" /> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script> | |
| <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script> | |
| <script> | |
| $(function() { | |
| $( "#accordionFAQ" ).accordion(); | |
| }); | |
| </script> | |
| <xsl:call-template name="View_Default_RootTemplate"/> | |
| </xsl:template> |
Results
FAQ List Accordion View rendered in XLV is shown below on picture
References
- Source code for project on GitHub
- XsltListViewWebPart and Custom List Views on MSDN
- How to: Customize the Rendering of a Field on a List View on MSDN
- Accordion Menu in User Interface Design Patterns
- jQuery UI Library
YASP Blog 
Heh… A little to late. Few weeks ago I had to customize View kind of this way. It’s sad that there were no your post than. 🙂
🙂 In any case, I hope that someone find it helpful.
Hello Vadim,
Nice Post, but where should i put these files? am still fresh in SharePoint 😀
Mark,
Hi Mark,
actually you could just grab project from GitHub. Then you only need to build & deploy package. After that you will be able to create FAQ List instance.
Please follow How to: Customize the Rendering of a Field on a List View, it contains the answer to your question.
Vadim
Thanks for post
,
Warning 1 The ‘Default’ attribute is not declared. C:\Users\PrPandit\Desktop\YASPP.SharePoint.FAQ-master\YASPP.SharePoint.FAQ-master\FAQList\Schema.xml
Warning 2 The ‘Sealed’ attribute is not declared. C:\Users\PrPandit\Desktop\YASPP.SharePoint.FAQ-master\YASPP.SharePoint.FAQ-master\FAQList\Schema.xml
This method works well, because it makes use of the horizontal space to store massive amounts of content in “panels” that are hidden until the user wants to see it.
Pingback: Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion | Yet Another SharePoint Blog
Hi there, just wanted to say that I’m new to SharePoint development i.e. coded solutions and have downloaded this and tried it and it’s great! Thanks for sharing this.
Nicola
Hi Vadim,
If I wanted to hide the triangle icons that come with the accordion, where would I add this? Do I need to add my own css or add to the xsl?
Thanks!
Nicola
Hi Nicola,
if it is only intended for this specific List View, you could specify styles(not the only way, but probably the easiest one) in xsl template as demonstrated below:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
FAQViewOverride.xslt
hosted with ❤ by GitHub
Thank you Vadim!
Hopefully only one more question…
I’m testing the accordion by typing in:
I’m a vExpert… What about me?
and it’s showing in the Accordion header as:
I'm a vExpert… What about me?
I realise this is html code for the ‘ symbol but any solution to how to remove it so it displays normally?
Thanks so much.
Nicola
Hi, this is great as it is exactly what I am looking for.
I do not have visual studio, is there an alternative?
As a newbie, I could do with a bit more details on: ‘Go there to type this code…’
Pingback: XSL(XSLT) Based Views(XSL File Reference in WebPart) in SharePoint 2013 | Pankaj Salunkhe SharePoint Knowledge
I follow your step to create Accordion for SP2013. It works on publishing page but not in wiki page. Is there any i can resolve for wiki page?