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