My Idea Factory - By Ludovic Perrichon

SharePoint, SP2010, WebPart, jQuery

Custom views WebPart

It's a project I have made in 2012. The goal was to create different view for a webpart. And each user should able to choose the view he want. The users has a big turnover on computer. And everytime they change to another computer, they have to find the view they have choosen before.

In this demo, I used a pictures library, and the web part is going to show a slider on the default view (made with Flexslider). The second view will be a Fancybox.

In the solution, I have got my pictures library, my web-part, a module and a configuration list.

The module will copy files like jQuery, the two plugin above, a css and js file for each view in Style Library.

The Config list will save the view which has been chosen by the user. So each user can customize his page. This list is hidden for the user. The list contains two fields, Title to save the user name and View to save the chosen view.

About the web part. The Pictures_Gallery.cs file will set the verbs and have a look in the config list to see which view has been chosen by the user. And if the user switch to another verb, the web part will edit the item in the config list. Then it will call the right view whith the associated .ascx file. Of course all the users must have the right to add, delete and edit items in the configuration list (which is hidden). In case of a default view, we delete the item. We don't save the default view because we don't want to overload the configuration list. And to be honest, most of user doesn't switch to another view thant the default one.

Here is a code example to show you how to create verbs :

public override WebPartVerbCollection Verbs  
WebPartEventHandler slideHandler = new WebPartEventHandler(SliderVerbEventHandler);  
WebPartVerb customVerbSlider = new WebPartVerb("events_slider_Filter_Verb", sliderHandler);  
customVerbSlider.Text = "Slider";

WebPartEventHandler fancyHandler = new WebPartEventHandler(FancyVerbEventHandler);  
WebPartVerb customVerbSlider = new WebPartVerb("events_fancy_Filter_Verb", fancyHandler);  
customVerbSlider.Text = "Fancybox";

WebPartVerb[] customVerbsArray = new WebPartVerb[] { customVerbSlider, customVerbFancy};

WebPartVerbCollection customVerbsCollection = new WebPartVerbCollection(base.Verbs, customVerbsArray);

return customVerbsCollection;  

Then I added the code to save, delete or edit the item in the config list when a user click on a verb.

And let’s finish with the call of each view.
When I load the page, I read the config list and I call the right .ascx file.

private const string _ascxPathSlider = @"~/CONTROLTEMPLATES/SP_Customview/Pictures_Gallery/Pictures_GalleryUser_slider_control.ascx";  
private const string _ascxPathSlider = @"~/CONTROLTEMPLATES/SP_Customview/Pictures_Gallery/Pictures_GalleryUser_fancybox_control.ascx";

protected override void CreateChildControls()  
// Code to connect to the config list
// Read the item in the config list
// The view name has been saved into the "whichView" var
// And then, below, call the right .ascx file

if(whichView == "Slider")  
Control cSlider = Page.LoadControl(_ascxPathSlider);  

if(whichView == "Fancybox")  
Control cFancy = Page.LoadControl(_ascxPathFancy);