I recently was given the task of making SharePoint look less like SharePoint. This post will not discuss how to properly create master pages, layouts, and styles. There are plenty of posts already written that do a quality job explaining how to best create the desired aesthetic. This post addresses a specific design element that was requested, namely a tabbed interface to wrap various web parts.
Setting Things Up
A couple of items to note before we get into the meat of this. First, we will need to keep track of what web parts we are going to be “tabbifying” so we create a list to tuck the parts away in. We also want to make sure we have a nice ID set for styling (more on this later) and that we clear out any chrome set for our tab web part.
Now, since we will be manipulating how other web parts look and feel within our tab control, we need to know whether or not we are presenting or editing the page and act accordingly.
Adding the Tabs
For simplicity’s sake, we will assume that any web part above our tab part is outside of our concern. And let’s also assume we want to include all web parts below ours through the end of the zone our part is contained in. Now, obviously, if there are no other web parts in our zone that meet this criteria, there’s no point of continuing on.
Assuming we are though, for each web part that we do want to wrap up, we need a tab for them. For this case, the tabs were designed to span the width of the zone and are specified as such, but this is not an essential aspect. Our tabs are also generated in the same order that they appear in the zone. That way if you want to reorder them, all you need to do is shift the order of the WebParts within the zone. Also, in order for our tabs to work, we need to be able to easily program against them. So, we class them.