Adding a Tabbed View to A Web Part Page Using jQueryUI
Sometimes I work on something and blindly stumble into a neat trick. The other day I was trying to figure out how to reliably add a tabbed view to a SharePoint Web Part Page. I was working in SharePoint Designer, so I had total freedom to try whatever I wanted.
The idea was to show a set of tabs, each of which could contain at least a Content Editor Web Part (CEWP) initially. We wanted it to look something like this:
Aside: Wireframes drive me a little batty because they turn into the goal rather than just a useful development tool. Mock ups like this using something like Balsamiq make far more sense to me. The Comic Sans makes it very clear to everyone that this is the basic idea, and we’re not talking about pixel placement.
My first thought was of course to use Christophe Humbert’s most excellent Easy Tabs, but for some reason that wasn’t working in the page. Since we’re already using jQueryUI for some other things – this is a highly customized environment – I figured that it would be a good alternative and would probably give me more control of the display.
If you look at the jQueryUI documentation, you’ll see that there is some specific markup required to get the .tabs() widget to function:
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Tab 1 content</p>
</div>
<div id="tabs-2">
<p>Tab 2 content</p>
</div>
<div id="tabs-3">
<p>Tab 3 content</p>
</div>
</div>
Once you have that basic markup in place, you can make this simple call to activate the tabs:
$("#tabs").tabs();
There are multiple options, of course, but that gets you the basics.
I tried a number of things, but the main difficulty I had was that Web Part Zones cannot contain markup; they can only contain Web Parts. SharePoint Designer strips out any markup that you add manually inside a Web Part Zone.
Somehow I thought of trying to wrap the Web Part Zone with the markup I needed to make the tabs work instead. Even better, each tab could have its own Web Part Zone so that we could edit existing Web Parts and add new Web Parts to the tabs at will. That markup ended up like this:
<div id="team-tabs">
<ul>
<li><a href="#tabs-how-we-help">How we can help</a></li>
<li><a href="#tabs-case-studies">Case studies</a></li>
<li><a href="#tabs-projects">Current projects</a></li>
<li><a href="#tabs-applications">Applications we support</a></li>
</ul>
<div id="tabs-how-we-help">
<WebPartPages:WebPartZone runat="server" Title="loc:HowWeHelp" ID="HowWeHelp" FrameType="TitleBarOnly"><ZoneTemplate>
</ZoneTemplate></WebPartPages:WebPartZone>
</div>
<div id="tabs-case-studies">
<WebPartPages:WebPartZone runat="server" Title="loc:CaseStudies" ID="CaseStudies" FrameType="TitleBarOnly"><ZoneTemplate>
</ZoneTemplate></WebPartPages:WebPartZone>
</div>
<div id="tabs-projects">
<WebPartPages:WebPartZone runat="server" Title="loc:Projects" ID="Projects" FrameType="TitleBarOnly"><ZoneTemplate>
</ZoneTemplate></WebPartPages:WebPartZone>
</div>
<div id="tabs-applications">
<WebPartPages:WebPartZone runat="server" Title="loc:Applications" ID="Applications" FrameType="TitleBarOnly"><ZoneTemplate>
</ZoneTemplate></WebPartPages:WebPartZone>
</div>
</div>
This markup gives us this nice UI. I’ve blurred out the specific content in the CEWP, but you should get the idea.
The really nifty thing about all of this is that editing the content of each Web Part Zone seems to work just fine in the context of each tab. In other words, not only do we get the user experience (UX) goodness from the tabs for the end user, we also get it for the few people who will be editing the tab content.
I love jQueryUI and this is a reallly elegant application. I hadn’t thought to use tabs to contain web parts or web part zones, but it’s really nice to know that it can be done.
Hey Marc,
Do you think it would be possible to use jquery UI to ‘Tabify’ a DVWP. I’m thinking if I had a dataview that was grouped by a collumn –lets say category– to have the categories appear as tabs in the dataview.
Any ideas?
Russell
Russell:
Absolutely. I did a post last week that shows how to do an accordion with a DVWP. The approach would be similar.
M.
I adore Balsamiq! And tabs are a great strategy if you don’t want to prioritize one information bucket or product over another.
Claire:
You do inherently prioritize the first tab, assuming that is the one you set to open on page load. Right?
M.
Hi, I used the jQuery UI last week to do just that for a project. Have you tried inserting a Calendar view web part? It seems to break my setup, but I haven’t quite figured out why.
cheers,
Ingeborg:
I just did a quick test and added a calendar view to a tab. I don’t see any issues, but maybe I’m not lookig for the right thing.
M.
There’s actually an issue with calendar views in SharePoint (not sure if this is what Ingeborg is referring to). Calendar views are made of two layers – the dates and the events – and these two layers don’t stay together when you resize the views, or toggle the display.
Did you figure out why the conflict with the calendar view web part?
Marc, I just came across your post. The link to the Easy Tabs is an old one (pre-SP 2010), and that’s certainly the reason why it was not working for you.
Setting tabs at the Web Part zone level is something I’ve also done in the past, and it works seamlessly. You can even take it one step further and create a two level tabbed interface – one tab per zone, then one tab per Web Part!
Christophe:
Great to hear from you after such a long time! Sorry about the old link to EasyTabs. I looked all over for the right version and that’s what I found. You might want to add some cross links to whatever other locations you have so that simpletons like me don’t end up with the wrong version.
M.
Hello Christophe,
Would you please elaborate on two level tabbed interface with one tab per zone then one tab per web part. As of now I use EasyTab v5 for one level only. Thank you very much.
Regards,
HN
Hi Marc,
this is a very nice blog and i have been reading your blogs continuously.
my query is not related to this blog , my query is related about data view webpart, actually one of my clients wants paging in data view web part similar to spgridview. so is this feasible that we can have paging in data
view web part similar to spgridview and if it is possible then how?
Thanks,
Gaurav
Gaurav:
DVWPs are XSL-driven, so you can build pretty much anything you want. There are multiple ways to do paging, depending on the expected number of items, etc.
In the future, rather than posting a question to a random post, consider using one of the excellent SharePoint-based forums out there.
M.
I’m not sure what I’m doing wrong but no matter what I can’t get the webpart zones to show up
I’m not sure what you’re doing wrong, either! You don’t see the WPZs at all?
M.
I am creating a aspx page from sharepoint designer 2010.I am keeping the js and css reference from a doc lib .But i am not seeing any tab niether the webpart zone.Plz tell if my approach is correct
It’s hard to say based on what you’ve said.
M.
Hi Marc, I am new to O365 Jquery thing here. For your example here, should I create a aspx as a template and then I reference this aspx from the CEWP? Please advise.
@Anonymous:
In the case of this post, I edited the aspx page directly so that I could lay out my Web Part Zones the way I wanted them. It really depends on your desired end result.
M.