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
Sometimes in SharePoint we need to visualize hierarchical data as organizational chart. Prerequisites: not to use Flash or Silverlight technologies here.
So, in our scenario for storage of organization structure will be used SharePoint List based on Custom List , for rendering engine Google Chart Tools.
First, let’s take a look at list’s schema for storing organizational structure
||Used for parent/child relationship
||Display text for chart box
||Visual behavior for chart box
From Google Charts library we’ll use Organizational Chart package only.
1. Google Charts Tools loading and package initialization
2. Fetch data using SharePoint Web Service from list that contains organizational structure
3. Bind data source and draw chart
Result page with Org Structure rendered as Chart in List View
Validation of SharePoint PeopleEditor WebControl on the client-side is often required. On server side validation is supported, see AllowEmpty and ValidatorEnabled properties for details, but the lack of client side validation makes it inconvenient for scenarios where client side validation is mandatory. So let’s discuss some techniques how it could be achieved.
In order to enable/disable validation for Entity Editor based controls (like People Editor) the following properties should be specified in combination:
For example, the code below demonstrates how to disable empty values:
Let’s start with the simple method that allows to check if PeopleEditor control is not empty.
The code below demonstrates how to validate if SharePoint PeopleEditor control value is not empty
It can be used in the following scenarios:
Since jQuery is commonly used in SharePoint front-end development, it validation capabilities could be used for PeopleEditor, for example jQuery Validation plugin. The code below demonstrates how validation rule that allow us to verify if PeopleEditor value is not empty, may look like.
Sometimes SharePoint PeopleEditor WebControl need to be initialized on the client side.
Initialize People Editor control
Clear People Editor control