Geeks With Blogs

Tangible Thoughts SharePoint, MOSS? and all the other questions

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

<table width="100%" cellpadding="0" cellspacing="0">
    <tr>

        <xsl:call-template name="dvt_1.body">
            <xsl:with-param name="Rows" select="$Rows"/>
            <xsl:with-param name="FirstRow" select="1"/>
            <xsl:with-param name="LastRow" select="$RowCount"/>
        </xsl:call-template>
        <td width="100%"/> <!-- <- this column is to span the last cell of the table -->
    </tr>
</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.

<script type="text/javascript">
    var currentPage = document.location.toString().toLowerCase();
    var xslPage = "<xsl:value-of select="@Page_x0020_Link"/>".toLowerCase();
    var title = "<xsl:value-of select="@Title"/>";
    if (currentPage == xslPage)
    {
        document.write('<td nowrap="true" class="ms-tabselected">');
        document.write('<a class="ms-vb" href="'+xslPage+'">'+title+'</a>');
        document.write('</td>');
    }
    else
    {
        document.write('<td nowrap="true" class="ms-tabinactive">');
        document.write('<a class="ms-vb" href="'+xslPage+'">'+title+'</a>');
        document.write('</td>');
    }
</script>

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

<td class="ms-CalSpacer"/>

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”

<table width="100%">
    <tr class="ms-sectionline">
        <td/>
    </tr>
</table>

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

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.

Posted on Thursday, January 20, 2005 11:23 AM SharePoint | Back to top


Comments on this post: No SharePoint Tabstrips? but then there is the DataView

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Sorry for the multiple trackbacks...
Left by Paul Schaeflein on Jan 20, 2005 6:39 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Tariq,

Have you tried placing this in a Site Definition?
What about linking it directly to a Document Library that holds the pages? (I suppose using a links list gives you the freedom to link to external sites)

Using a DVWP is a great idea - have a look at my solution to this (on Angus' Blog) - it's a little more complicated than yours - but having a combo of the two may be a good idea.

Cheers,

Craig.
Left by Craig Box on Jan 20, 2005 11:29 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
I havent tried putting it into the Site Defintion.

You are right, you could use document library as well instead of a list. That would be one step less in the maintainence process.

I agree DVWP is quite fabulous. A friend of mine called it 'the little engine that could'. The only problem with it is, its not very distributable. For instance if you used the lists webservice to bind to the list, then the data source is hard coded (As Sig was telling me yesterday). Even if you use a list on the page, editing the DataSource is no easy task for a layman, and I suspect this is where it might fail if you used it in a Site Definition.
Left by Tariq on Jan 21, 2005 4:29 AM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Hey Tariq,

Great post! A couple of things. To make it completely look like the tabs from a meeting workspace (after a theme is applied) you should add a "<div class=ms-WPBody>" tag in the dvt_1 template of the XSL and don't use the "ms-vb" class in the links. Once you do that it works perfectly when any theme is applied.

The other thing is putting it into a site def. Doesn't work because the DVWP needs the Guid of the list to work and the list isn't generated until the site is. Guids are great but it sucks when you want them to be static.
Left by Bil Simser on Feb 06, 2005 3:44 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Hi Tariq,

I have tried creating tab strips as mentioned in your article above using Data View Web Part (DVWP) from FrontPage 2003. But you have not mentioned anything for the Data Query and it is showing an error in the DVWP.

Please let me know if i am missing anything.

Looking forward to hear from you

Thanks in advance
Lakshmi
Left by Lakshmi on Apr 13, 2005 7:02 AM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Use the contact form on the top left of this post. That way I can reply to you.
Left by Tariq on Apr 13, 2005 11:41 AM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
I was wondering what this references in the XSL @Page_x0020_Link. It doesn't work in my page.
Left by Rich on Jun 02, 2005 1:58 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
@Page_x0020_Link is a column in the list that I have that is generating the tabs
Left by Tariq on Jun 02, 2005 2:44 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
I'm not familiar with XSL, where to insert the table to encapsulate the call the dvt_1.body? I've found three block of code with <xsl:call-template name="dvt_1.body">.

Also, where to insert the javascript?

Thanks for your help!


Left by rachel on Jun 10, 2005 9:55 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Within the section called <xsl:template name="dvt_1">
Left by Tariq on Jun 11, 2005 9:56 AM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Hey i want to introduce some look and feel features like mouse over,color changes and font color for each tabs.how can i do that.
dheeraj_bafna@yahoo.com
Left by Dheeraj Bafna on Jun 15, 2005 12:23 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Hello Tariq,

What you have done is exactly what I am trying to do, but I have no clue where even to start. What files does this all go in? I can manage to create a list and have a CAML query get all of the names and links but I just don't know where I even start on all of this. Thanks for your help.
Left by SamIAm on Jul 26, 2005 8:55 AM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
SamIAm, use the contact link right at the top of this page and I will get back to you
Left by Tariq on Jul 26, 2005 1:12 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Cool, but it seams to be only part of the answer. How does the MP Meeting Site drive the content frame below the web part?

Seems like you could wrap this into a web part that generated the tabs but would you use an IFrame?
Left by Matthew McDermott on Jul 29, 2005 2:47 PM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
I wouls like to know what are the properties of your @Page_x0020_Link Column in your list.

Thanks
Left by Simo on Oct 25, 2006 11:45 AM

# re: No SharePoint Tabstrips? but then there is the DataView
Requesting Gravatar...
Has anyone done this to create Zone Tabs (filter out or assign web parts in a Webpart Page Zone to different Tabs....?

Bill R
Left by B Ross on Oct 25, 2008 2:36 AM

Your comment:
 (will show your gravatar)


Copyright © Tariq | Powered by: GeeksWithBlogs.net