We have already discussed how to create Accordion List View in SharePoint 2010 in this post.
For demonstration purposes we will create FAQ List based on Custom List. Default view for our list will look like this
And our goal here to customize it in such a way list items will be displayed in accordion as shown below
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
SharePoint 2013 introduces functionality to integrate location information and maps in SharePoint lists and location-based web and mobile apps for SharePoint with the following capabilities:
- new field type named Geolocation that enables you to annotate SharePoint lists with location information. The built-in Geolocation field can render only with Bing Maps. However, you can create a custom field by using the Geolocation field as a parent field type, for example see my blog post about using Google Maps as map service.
- Map View that displays a map (with data obtained from the Bing Maps service), using longitude and latitude entries from the Geolocation field type
Client-side rendering for Map List View in SharePoint 2013
Map List View in SharePoint 2010
But what about SharePoint 2010? Let’s discuss one approach related with customizing List View for XSLTListViewWebPart (XLV) . So, in proposed solution geographical locations are stored in Custom List and custom View is used to render data on Map using Google Maps service For example, list items
will be represented in Map View as shown below
Implementation of Map List View in SharePoint 2010
As was noted earlier for storing geographical location on a map and visualizing it in Map View we will define Custom List named GeoMap List.
GeoMap Content Type
For storing geographical locations we define the following Content Type
GeoMap List is based on Generic List with GeoMap Content Type and with custom View
XSLT stylesheet for Map List View
GeoMap rendering control
- How to: Customize the Rendering of a Field on a List View in SharePoint 2010 on MSDN
- How to: Customize a list view in apps for SharePoint using client-side rendering on MSDN
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.
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.
After creating Custom List we add new View for displaying Accordion for FAQ items
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
Using jQuery UI Accordion
FAQ List Accordion View rendered in XLV is shown below on picture
In previous post we have discussed approach on how to embed video into SharePoint from YouTube. Custom List Video Links were used for storing embedded video properties and Computed Field for rendering Video player.
This time we will extend our solution with the following capabilities:
- Support for different video providers listed in oEmbed
- Preview view for displaying video arranged in list
- Alternative mode for posting the embed code for video into SharePoint
Support for different video providers
In addition to embed code using iframe, another options also available now. Some providers listed in oEmbed specification use object element for embedding code.
Table 1. Support for Video Providers listed in oEmbed specification
Alternative mode for posting embedded code
Additionally to existing mode for embedding video code, the approach described below allows to paste the embed code as it was generated by Provider. Let’s take a look at the common usage scenario:
- Generate and copy the embed code on the Provider website
- Select Embed Code from New Item for Video Links List
- In New Form for Video Links List paste the embed code and fill in comments if needed as shown below
For displaying video player the same (see previous post for details) Computed Field EmbeddedVideoOnForm field is used
Preview view for displaying video
In addition to default view (video player items with details), Preview view is intended to display items arranged by columns as shown below
To paste the embed code we define Embed Code Content Type
where field EmbedCode for storing the embed code is used
As was noted earlier, for displaying video player the same (see previous post for details) Computed Field EmbeddedVideoOnForm field is used, below is presented complete XSLT style sheet for rendering of a field on a List View