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.
Hi Marc!
I’m using a tabify solution to show list views and calendars in tabbed form, however, the calendar and list view webparts seem to break when inside the tabbed zone. They work fine when placed outside of the tabbed zone….but the calendar doesn’t pull in the events once it is placed inside the tabs. Are list views and calendars just a few of the webparts that don’t play well with this solution? Or is it just me? hahaha. I’ve read in some places that these webparts just don’t have the specific class that the tabify solution is targeting, but I also read above in some of your comments that it worked fine for you (but that you might not have been looking for the right thing while testing.) Does your calendar webpart populate with items when you use it inside the tabbed zone?
Jessica:
I can’t recall having any problems with the content loading in the Web Parts. Regardless what tabbing solution you use, you’ll need to do some prep in the DOM to set up things the way the tabbing solution wants it. You can either do that in the page markup directly or manipulate the DOM once the page loads. My guess is that you should be able to make it work. I was using jQueryUI .tabs() here, but others ought to work, too. If they don’t, try the jQueryUI one.
M.
Nark, I;ve added list view webparts inside the tabs and it works fine, but when column filter is applied to any of those list view webpart, it defaults back to the first tab. Can you give some idea on how can I solve this.
Jonam:
When you apply a filter to a list view, SharePoint reloads the page with the filter values on the query string. So the script runs anew and lands you on the first tab. You could set a cookie every time the user selects a tab and then activate that tab when the page loads. That would give you the persistence you’re looking for.
M.
Quick question Marc, SP 2010. What about adding a DVWP in a tab (say tab 4), where tabs 1-3 have divs of another DVWP? Nested Web parts?
Sean:
With this method, you can really do just about anything you want. You could also embed all the divs entirely in one DVWP and output them there.
M.
Marc, thank you for your comments regarding divs and DWPS. It worked out even better than I thought. This is only the second time I has asked for help from you and both times were extremely courteous and completely accurate, batting 1000.
NECROMANCY!!!! So, if there’s a better way to do this by now, I’d love to see it as well, but with 90% of google still losing their minds over tabifying single zones, this post was a holy grail in and of itself. I would desperately like to know more about how you did this. Were you on 2010/2013? Is your zone markup in a publishing page layout? Did you find a way to do it in one of those funky
David:
You can really tabify anything if you’re willing to write the script to get the DOM into shape before you call the .tabs function. That function wants the markup to look a certain way and you just need to mirror that. I can’t recall if I’ve ever done it on a publishing page, but it wouldn’t be any harder.
M.
Hello Marc,
I have managed to get your fantastic code inserted into the web part page and added a reference to the JQuery UI script. All the web zones are there. However, I don’t understand where the “call to activate the tabs” should go, and the tabs are not appearing. Do I call it from the web part page, or from a Content Editor WP? Thanks in advance, Dawn
Dawn:
You would generally put the call to activate the tabs
$("#tabs").tabs();in a JavaScript file that you’re loading in the page already.
Another approach would be to embed a script block in the page – but that’s not very easy to maintain.
M.
I am trying to get this tabbed view on a wiki page. I copied and pasted this code above in a script editor web part and used .tabs() function but its not working for me. I have correct reference of Jquery UI file. Are there any additional steps involved?
@Ned:
Each type of page in SharePoint has a different DOM structure. I can’t tell you exactly what’s going wrong, but you should be able to get some clues by using the developer tools in your browser. My best guess is that a selector that worked in a Web Part Page isn’t working for you in your Wiki Page.
M.
Mark, anything different or needs to be changed to allow this to work in O365 with SP2013?
Thanks so much; it was just what I needed!
Marc…where did you get lines 9 and 10…from SharePoint Designer?
@Maranda:
It’s been a while, but I probably copied a line from an existing page and edited it. It’s the server side control for a Web Part Zone.
M.
Brilliant! Thanks for the article!