Convert a WebPart Zone in MOSS into Accordion or Tabs Style Interface

This is a web part that turns all the visible web parts with a Title in a Zone into Tab or Accordion interface.  Just drop the webpart into a zone and see it convert all the visible webparts with a title in the zone  into part of Tab or Accordion.  It renders one tab/accordion menu per webpart.

Originally inspired by EasyTabs from PathToSharePoint but instead of embedding some JavaScript with Content editor web part, it’s a custom web part providing a property to control if it renders Tab or Accordion and JavaScript bit is done using jQuery.

Some customary screen shots!

WebPart Zone Converted into Tabs

WebPart Zone Converted into Tabs

WebPart Zone containing the TabAccordion WebPart in Edit mode

WebPart Zone converted into Accordion

WebPart Zone converted into Accordion

WebPart Zone containing the TabAccordion WebPart in Edit mode

WebPart Zone containing the TabAccordion WebPart in Edit mode

Properties of the WebPart

Properties of the WebPart

Download Full Source Code. Hopefully it’s commented just enough to understand what’s going on in the JavaScript.

WSP Solution can be downloaded from here. Once the package is deployed, Activate the Kark SharePoint Web Parts feature at Site Collection level and Tab Accordion web part will be available in the Web Part Gallery.

Have changed the JavaScript to render tabs at the top

Download WSP Here

Here is a screenshot

Please excuse the ugly looking Tabs, but hopefully CSS should be really easy to change

Programmatically adding RSSAggregatorWebPart to a Page

I have been struggling to find information on how to add RSSAggregatorWebPart to a page. First I started with doing something like

RSSAggregatorWebPart rssViewer = new RSSAggregatorWebPart();
rssViewer.FeedUrl = "";
rssViewer.ID = "rssFeed";
rssViewer.DataSourcesString = dataSourceString.ToString();
rssViewer.Title = "My Blog";
//AddWebPart is an helper method to add a webpart to a page

That added the web-part to the page but when rendering the Page, web part gave an error asking to check error logs for errors and error log under 12 hive contained following error

RssWebPart: Exception handed to HandleRuntimeException.HandleException System.ArgumentNullException: Value cannot be null. Parameter name: key at Microsoft.SharePoint.WebControls.CacheObject.LoadDataFromCache(String key) at Microsoft.SharePoint.WebControls.BaseXmlDataSource.GetXmlDocument() at Microsoft.SharePoint.WebPartPages.DataFormWebPart.GetHierarchicalDocument(IHierarchicalDataSource ds) at Microsoft.SharePoint.WebPartPages.DataFormWebPart.GetHierarchicalXPathNavigator(IHierarchicalDataSource ds) at Microsoft.SharePoint.WebControls.SingleDataSource.GetXPathNavigatorInternal() at Microsoft.SharePoint.WebControls.SingleDataSource.GetXPathNavigator() at Microsoft.SharePoint.WebControls.SingleDataSource.GetXPathNavigator(IDataSource datasource, Boolean origin…

Blha Blha….. Really could not tell what’s going on, but If I add the same web-part from the UI (Using the Web Part Gallery) than it worked fine and my feed showed up in the web-part. After examining the properties of the working web-part in the debug mode, I noticed the web part has DataSourceString and ParameterBindings property set, MSDN has no documentation about it (or at least I could not find it) and setting those properties when adding RSS WebPart programmatically worked

Here is the full code snippet

RSSAggregatorWebPart rssViewer = new RSSAggregatorWebPart();
rssViewer.FeedUrl = "";
rssViewer.ID = "rssFeed";
StringBuilder dataSourceString = new StringBuilder("<%@ Register TagPrefix=\"WebControls\" Namespace=\"Microsoft.SharePoint.WebControls\" Assembly=\"Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c\" %>");
            dataSourceString.Append("<%@ Register TagPrefix=\"WebPartPages\" Namespace=\"Microsoft.SharePoint.WebPartPages\" Assembly=\"Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c\" %>");
            dataSourceString.Append("<WebControls:XmlUrlDataSource runat=\"server\" AuthType=\"None\" HttpMethod=\"GET\">");
            dataSourceString.Append("<WebPartPages:DataFormParameter Name=\"RequestUrl\" ParameterKey=\"RequestUrl\" PropertyName=\"ParameterValues\"/>");

rssViewer.DataSourcesString = dataSourceString.ToString();
rssViewer.ParameterBindings = "<ParameterBinding Name=\"RequestUrl\" Location=\"WPProperty&#91;FeedUrl&#93;\"/>";
rssViewer.Title = "My Blog";

Value of DataSourceString is:

<%@ Register TagPrefix="WebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<WebControls:XmlUrlDataSource runat="server" AuthType="None" HttpMethod="GET">
<WebPartPages:DataFormParameter Name="RequestUrl" ParameterKey="RequestUrl" PropertyName="ParameterValues"/>

Value of ParameterBindings is:

<ParameterBinding Name="RequestUrl" Location="WPProperty&#91;FeedUrl&#93;"/>

Programmatically Working with ListViewWebPart using Non-Default View (GetUncustomizedViewByBaseViewId)

If you add an Announcement web part to page from the web part gallery you get a nice view of the list which shows 5 items, shows (More Announcements…) link and “Add a new Announcement” link

ListViewWebPart - Announcements

This is exactly what I needed for one of my web part but my requirement was to add the web part to page from a feature programmatically and not using the UI.

After looking around for a while in MSDN and searching most of the examples showed how to set the properties of the ListViewWebPart programmatically but all of the examples used the Default View of the list as shown below (The default view is the view which you get by default on AllItems.aspx).

<br /> SPList list = web.Lists["Announcement"];<br /> ListViewWebPart webPart = new ListViewWebPart();<br /> webPart.Title = "Announcements";<br /> webPart.ViewGuid = list.DefaultView.ID.ToString("B").ToUpper();<br /> 

If you look at the Schema file for the list, the View with BaseViewID of 0 is the one which has the HTML to render the view in the ListViewWebPart

<View BaseViewID=”0″ FreeForm=”TRUE” Type=”HTML”>

So First thing that came to my mind was to iterate though the Views collection of SPList object and look for a view with BaseViewID of zero, but to my surprise it was not there in the collection OOPSSS! But If I add the Announcement web part using the UI and than search the Views collection of SPList object for BaseViewID of Zero than the View is found in the collection. So the moral of the story is SharePoint is doing some thing to customize the view and add it to the Views collection.

Now how do you do the same programmatically? Luckily I did not try very hard and found a method called GetUncustomizedViewByBaseViewId on the SPList object and that was it, here is the code snippet:

<br /> SPList list = web.Lists["Announcement"];<br /> ListViewWebPart webPart = new ListViewWebPart();<br /> webPart.Title = "Announcements";<br /> webPart.ListName = list.ID.ToString("B").ToUpper();<br /> SPView view = list.GetUncustomizedViewByBaseViewId(0);<br /> webPart.ListViewXml = view.HtmlSchemaXml;<br /> 

Few things though:

  • You cannot use ViewGuid property of ListViewWebPart as ID of the View returned by GetUncustomizedViewByBaseViewId will be empty instead use ListViewXml property of ListViewWebPart and assign View’s HtmlSchemaXml property to it
  • If your List is in a different SPWeb than the page on which you are adding ListViewWebPart than use WebId property of ListViewWebPart to point it to the ID of SPWeb which contains the List

Happy SharePointing!