Changing the Home tab in Mutipage Meeting Workspaces with jQuery

Another simple trick today. Very often people ask about how to change the tab name on sites created with the Multipage Workspace Template. A simple enough request but not something you can do out of the box. Or can you?

Okay, let’s take a step back. Let’s say you want a site with tabs. There’s a built-in template under the Meetings group called Mutiplage Meeting Workspace. It creates a site with tabs and allows you to add new tabs (Web Part Pages) and place whatever Web Parts you want on each tab.

Just a note that this is actually a Meeting Workspace template and isn’t quite like a normal site template. You’ll find oddities like the inability to create subsites and weird hidden “1” folders. This is because meeting workspaces are designed to have the ability to repeat and use the hidden folders for supporting this. However for the purpose of creating a site with tabs, it works and easy to get going with. See some links at the end of the article on tips and tricks creating Multipage sites.

Using this template it’s easy (but not intuitive) to change the name of the tab for each page. To change the name of an existing tab:

1. Navigate to the tab page
2. Click on Site Actions then select Manage Pages
   
   
   
3. Click on Order to show the dropdown menu and select Settings
   
   
   
4. Change the Page Name and click OK
   
   

However if you try this on the Home Page you’ll see this message:

That’s not very comforting (and I can’t recall why you can’t change the name as it’s rather silly) however it’s jQuery to the rescue to correct this quip.

To change the Home Page tab name we’ll need two Content Editor Web Parts (CEWP). One when the Home tab is active and one when it’s not. Using jQuery we simply find the tab and change the text. Seriously it’s this easy:

<script type="text/javascript">
    $(document).ready(function(){
        $('.ms-tabselected:contains("Home")').text("Zombieland");
    });
</script>

And here’s the code when the tab is inactive (it has a different classname):

<script type="text/javascript">
    $(document).ready(function(){
        $('.ms-tabinactive:contains("Home") a').text("Zombieland");
    });
</script>

I know it’s simple and boring. You can also use the ‘begins’ wildcard feature of finding a class in jQuery so rather than the simplistic code above, you can impress your friends and pick up hot chicks with something a little more sophisticated looking like this:

<script type="text/javascript">
    $(document).ready(function(){
        $('*[className^="ms-tab"]:contains("Home")').text("Zombieland");
    });
</script>

However this only works when the Home tab is active. When it’s inactive you need to include the hyperlink so the selector looks like this (note the addition of the ‘a’):

<script type="text/javascript">
    $(document).ready(function(){
        $('*[className^="ms-tab"]:contains("Home") a').text("Zombieland");
    });
</script>

I thought I would be smart and use the className^=”ms-tab” wildcard so it would work on any page but the content changes if the page is active. Even with the class selector when the page is active, there’s no hyperlink to the page (which makes sense) so no ‘a’ selector to find. When the tab isn’t active it’s there. My JavaScript kung-fu prevents me from figuring out something that works for both situations but feel free to post a snippet in the comments and I’ll update the post.

In any case, with a single line of JavaScript and jQuery we transformed this:

into this:

Enjoy!

• Serve Hermans – How to enable Quicklaunch on multipage meeting workspace
• Angus Logan – How to create a multipage site in SharePoint from Craig Box (for 2003 but *should* work on 2007)
• Tariq – No SharePoint Tabstrips but then there is the DataView (again, 2003 but should work in 2007)