When I first started with SharePoint I was pretty much surprised that the ability to create tabs was only available on meeting workspaces. I have no explanation as to why there is such a limitation. I am also currently unaware of a hack to make that system available across all WSS Sites, but here is something that I was able hooked up, and I am actually pleased with it (the main reason I am pleased with it, is because it’s nothing more than a DataView WebPart).
What I wanted was a system of dynamically creating tabs on sites.
What a tab consists of is
- Display text
- Link to a page
Other Requirements
- Special Highlighting for inactive and active tab
- Ability to reorder tabs
Well if you think about it, that’s just a glorified version of a Links List, with just some snazzy display.
Creating this snazzy Display is where the DVWP comes in.
All you need to do is create a DVWP pointing to your links list, what I normally do is insert a DataView with only the Title field.
Then in the “dvt_1” template of the XSL encapsulate the call the dvt_1.body within a table
You might need to trim out any other unnecessary formatting depending on what the existing stylesheet is.
In the “dvt_1.body: template of the XSL place the following javascript to do that snazzy formatting of tabs.
So what does the above Javascript do? It only writes out a td tag consisting of a hyperlink for each item in the list. The reason I used javascript was to do the check (currentPage == xslPage) to determine if the tag being rendered is the active tab. Based on that there are 2 distinct css styles applied the tags.
Then we also need a spacer between the tabs, so I have the following spacer just after the script above
We also need an underline to separate the content below the tabs from the tab. For that I have the following table after the table mentioned above for the xsl template “dvt_1”
That’s about it really. For ordering the tabs around, you could have a number field in the list, and have the DVWP sort by that field. You could also go as far as using a single list for several tab strips by having another column and filtering each Tabstrip based on that column.
Ultimately the DVWP should look like this
!(/images/tariq/20458/6e4a8111-o_tabs.gif)
And the DVWP code would be something like this (note you can’t use the below code since it needs to point to an existing list and WSS site)
And there is potential for this approach beyond tabs. For instance you could create a list of shortcuts and display only an icon using a similar approach to what is shown above.