Wednesday, April 22, 2009
10 Minute Screencast: Create a tabbed, layered interface – no code required
A couple weeks ago, I found an intriguing article by Baris Wanschers on how to create tabbed windows in SharePoint with jQuery. Peter Allen from Bits of SharePoint started playing around and created some really nice documentation, using the solution to document itself.
This screencast shows how simple a solution it is. Within 10 minutes, I am able to create a tabbed interface for managing workshop descriptions. Fun, easy and extremely impressive for your End Users. So impressive, in fact, they won’t even know it’s there.
Watch the screencast, read the documentation and give the guys some well deserved feedback.
Resources for this screencast
Are there any issues with using a web part other than the CEWP? If I want various lists of libraries to display on the tabs, will it work as well?
Hey Mark, I have done similar things with coding but found an easier tool. Check out Zone Tabs. I deploy this on all servers so my power users can provision tabs themselves without any code experience.
http://code.msdn.microsoft.com/zonetabs
http://blogs.msdn.com/bobgerman/archive/2008/02/19/back-in-the-zone-with-zonetabs.aspx
Hi,
I would like to embed your Screencast on my blog to bring the information to the German end users. But the code seems not to work. Could you please check?
Cheers
Sebastian
Hi Eric,
that is possible, every tab contains its own Web Part Zone in which you can put any Web Part you like, even Content Query Web Part (like I did in the original post).
That’s no problem, you can add any Web Part you like as every Tab contains its own web part. In my original post I used the Content Query Web Part :)
Jeff – You used an ugly word around here… “deploy”. Most of the audience here will not have access to the server, so will have problems deploying a solution.
That said, if you can convince the server admin to get things setup, it is a good alternative.
Mark
I think what Baris is saying is critical to understanding how powerful this solution is. You can use ANY web part available to you within ANY tab in the interface. The ramifications of that are huge.
What are some ideas on what you would put in the tabs? My first thought is a bunch of calendars, one for each team, giving the ability to quickly click through and see multiple team schedules.
What else?
Sebastian – I have confirmed that the code in the cut and paste box is correct. I have found in some instances that a corporate or company firewall blocks access to the screencasts. If that’s not the case, try one of the following.
Make sure that you get the entire string. It should start with an object tag and end with an object tag.
If you are placing it in your blog, be sure to embed it as source HTML code, not in the visual view.
Hope that helps. Thanks for trying it out.
Mark
Any hints on integrating this with an existing page Can the code be cut-and-pasted into using SharePoint Designer?
Eric – Pop open the .aspx page provided as the download for this project, cut and paste the code. Should be pretty simple. — Mark
This is utterly awesome.
Can it be used with my existing page temlates? If so how? ;)
Hi Tony,
just open the .aspx and strip out the code that’s used. Paste in in your existing Page Template to get it working. You can also check my original post to see how I solved it. However, I prefer above solution ’cause this enables flexible naming of the tabs.
I’m kinda like a stuck record saying “this is awesome” about stuff I try from EUSP…. but seriously….. THIS IS AWESOME!
For example I’m looking at a tab with a company on it, another tab with contacts at that company, another tab with tasks open for that company, another with notes… you get the idea. I’m now going to try for one more with a google map so that engineers can find that company too. This is great stuff from Baris and Peter. Thanks Mark for highlighting this.
Mick – Now THAT’S a great idea. — Mark
Excellent article and video, some great ideas for quick and easy improvements to SharePoint without heavy customization.
This is so good!
Ok I’ve been dabbling a little to see if I can expand the number of columns and it’s dead simple even for a noob like me.
Add as many columns to the table containg the 8 webparts as you need. Copy the code within the first column containing the 8 webparts into the blank column. For each of these, change the ID to ID1a,ID2a etc. If you’re adding a third column, ID1b,ID2b and so on.
The tabbing stil works and you end up with a more flexible page!
The one niggle I have is the Page title doesn’t show in my breadcrumb. Any idea?
Tony,
I do not believe that the Page Title shows up in a breadcrumb, I believe it is name of the file.
If you are looking for a Page Title, this was not added. I did not have an elegant way to do this, without having the user edit the file.
If you would like to add a page title both on the page and the header of your browser, you can added the following code at the bottom of the page, but this will require editing the code on the page.
Downside to this is that for each tab page you implement you will have to open it up in a text editor or SPD and add/edit the code.
Hi.
I have managed to fix it by using an existing template attached to a master page and merging code from both.
One simple use I’ve found for it is all those views of a list you have on the right hand side drop down, you can bring them all to the front, one click away by using the tabs.
Re. point 15 above: I’ve got a pretty good page together now using lists across the pages that are connected by selection made in tab 1. All works great and I’m really happy with the solution… until….
I went to add some jQuery to the page. I have amalgamated a few of Paul Greniers scripts into a single CEWP to control some aspects of the page: accordian menu, hide ‘view all site content’, print icon into list header etc.
When I add my script to the page all of tabbed pages (tab2-6) appear below tab 1 rather than in their own tabs.
I wondered if anybody else has applied jQuery to the tabbed pages or has any insights?
I’d love to get this working and have the tabbed pages look exactly like the normal pages. If I can’t then I’ll learn to live with it. These tabbed pages are a real shot in the arm for the interface. Love ‘em!
Mick,
I tested it with one of Paul’s JQuery solutions and I did not get the results that you outlined. Could you send me the JQuery that you are putting and I will take a look. [email protected]
Thanks,
Peter
Thanks Peter! I sent the script onto you
In reference to question 10, responce 11:
I am fairly new to coding so sometimes need a little more direction, so bare with me. The .aspx page you are refering to, where is it exactly? I really need to do what Eric mentioned and need to add this functionality to existing pages so a little more guidance for those of us not as experienced would greatly be appreciated. Thanks ahead of time.
Jeff,
I recommend that you go to Baris’s original post where he outlines how to add this to an existing webpage.
Here is the link: http://www.bariswanschers.com/blog/creating-tabbed-windows-sharepoint-jquery
Hope that helps,
Peter
I have added the tabpage.aspx to the document lib.
I have some exisiting webparts on the page how can i link this tabs to it?I know i have read you can link webparts instead of
TAB 2
Anywhere i can see real sample on this its not that clear.
Thanks in advance
Patrick,
Have you taken a look at the site that documents this?
http://www.bitsofsharepoint.com/ExamplePoint/Site/TabPage.aspx
Is this what you are looking for? Also, Mark’s video is a great overview on how to put the web parts in right places.
Peter
Yes i have Peter thanks.
I have that setup already re the link.
My question is how to add webparts to show in the tabs instead of href links.
Patrick,
You should be able to edit the page, click on a tab and see the associated “add a web part” zone, click “Add a Web Part”, add any web part from the list and that should do it.
Hope that helps.
Peter sorry ‘m a pain but thats exactly what i’m doing but instead of the new added webpart going inside the TAB1.I can see it outside the zone Tab 1.
Any ideas
Patrick,
No worries. Why don’t you send me an email with a picture of what is happening. Please send one in the standard view and the edit mode. [email protected]
I’m in an environment with WSS instead of MOSS. Would this work in that environment? If so, how do I need to modify the steps?
Thanks in advance for any help you can provide.
Joyce,
You do not need to make any changes for WSS. It will work the same in WSS or MOSS. The documentation site is setup in WSS using the tab page and can be found here:
http://www.bitsofsharepoint.com/ExamplePoint/Site/TabPage.aspx
Hope this helps.
Hi Peter
I have tried taking the code on the Tabs.aspx page and have tried numerous attempts to get this code onto an existing page as I dont want to start from scratch.
Any suggestions as to what code and where it should be placed would be appreciated.
Iain
Iain,
I recommend that you go to Baris’s original post where he outlines how to add this to an existing webpage.
Here is the link: http://www.bariswanschers.com/blog/creating-tabbed-windows-sharepoint-jquery
Hope that helps.
Hi There,
Just wondering if there a way to create the tabbed layered interface without using a document library but some other web part that can be easily inserted on other pages throughout the site?
Thanks
hi everybody
This is a powerful template. I’m very fascinated.
You already describt it on your page that the end-user will be automatically navigated back to Tab1 when IE do a refresh. On my MOSS Environment I created a *aspx page using your “Tab Template” + “a Document Library inluding Folders”. Now every time when an end-user opens a Folder on Tab3 he will be throw back to Tab1. This is very cumbrous for him. Do you know a solution how I can tell IE to remeber the last Tab session?
I hope you can help me
Thomas,
I have added cookies into the code to address this. Try this new code out . You will need to be able to edit the Tab Page with SharePoint Designer. You will then need to replace the current to with the below code. This should do it.
$(function () { var tabContainers = $('div#tabs > .tabbedWindow'); var tabsX = get_cookie ( "tabs" ); if ( tabsX == null) { tabContainers.hide().filter('#tab-1').show(); } else { tabContainers.hide(); tabContainers.hide().filter(tabsX).show(); $('div#tabs ul.tabNavigation a').removeClass('ms-topnavselected selected'); $('[href=' + tabsX + ']').addClass('ms-topnavselected selected'); } $('div#tabs ul.tabNavigation a').click(function () { var tabSelected = $(this).attr('href'); tabContainers.hide(); tabContainers.filter(this.hash).show(); $('div#tabs ul.tabNavigation a').removeClass('ms-topnavselected selected'); $(this).addClass('ms-topnavselected selected'); set_cookie ( "tabs", tabSelected ); return false; }) }); function set_cookie ( name, value ) { var cookie_string = name + "=" + escape ( value ); document.cookie = cookie_string; } function get_cookie ( cookie_name ) { var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' ); if ( results ) return ( unescape ( results[2] ) ); else return null; }Hi, Peter…
I respect your work. This is an awesome SharePoint Template. When I downloaded the first version of it I had many problems using Folders in Document Librarys but now it makes my life a lot easier with SharePoint. Best SharePoint Tab Template.
Thx a lot