Saturday, January 21, 2012

The Browse Tab In SharePoint 2010 Ribbon


Back to the contents of the series.

Required Foreword
This post is a part of the upcoming series about SharePoint 2010 and related technologies. I'm an enthusiast of SharePoint platform (especially of 2010 version) and I like very much to explain things I know to others. These articles is my attempt to systematize my own knowledge of platform and to help others to understand it. I'd like to hear from you if there are any mistakes or things on the subject of the given article that are not covered. You can write your comments here or on my email - mail@alexboev.com.
I will update any article as my knowledge will improve. And sorry for my English - it's not quite good now but I'm learning. :) Fill free to point me on any mistakes.

While viewing CMDUI.XML file you can find a tab with "Ribbon.Read" identidier and with empty scaling and groups sections:
<Tab Id="Ribbon.Read" Sequence="100" Command="ReadTab" Description="" Title="$Resources:core,TabRead;" CssClass="ms-browseTab">
   <Scaling Id="Ribbon.Read.Scaling">
   </Scaling>
   <Groups Id="Ribbon.Read.Groups">
   </Groups>
</Tab>
It's the Browse tab of the Ribbon. The Browse tab is a special tab and it can't be customized with Server Ribbon XML. The purpose of this tab is hiding of the most Ribbon interface in page read mode - when the Ribbon isn't needed.


The Browse tab is opened as a default tab on most pages. At the same time it doesn't appear on pages opened in modal dialog mode (e.g. pages with "IsDlg=1" parameter in url query string).

When the Browse tab is displayed the Ribbon gets minimized for saving of useful page space. The height of the Ribbon is reducing to the height of tabs headers area. At the same time the special page "title" area is getting visible by means of CSS. The title area is a div with id "s4-titlerow". It is defined in v4.master master page and contains the site navigation breadcrumb and some other staff.

So the groups of controls are never shown on the Browse tab - the according Ribbon area is always hidden.

On the following screenshot you can see a page in the read mode. The Ribbon area is marked with red, the page title area is blue and the rest of the page content is green.

The page layout in Ribbon read mode

On the opening of any other tab SharePoint restores the Ribbon height and  hides the page title area back.

The page layout in Ribbon edit mode

Because of identical height of Ribbon groups&controls area and of page title area there's an illusion that page title is a part of the Ribbon but it's not.

Some additional thoughts and info about ways to customize the Browse tab you can find here and here.
--------------------------------------
TEMPORARILY - ANSWER TO THE COMMENT
It's an interesting question and i've done some research to answer that question. If I understand you right it's not the button - it's the header of the tab. As the summary - you can replace the Read tab with the standard Ribbon element replacement technique and specify the desired text. Here's the XML of the definition:

<CommandUIDefinition Location="Ribbon.Read">
          <Tab Id="Ribbon.Read" Sequence="110" Command="" Description="" Title="Desired Read Tab Header Text" CssClass="ms-browseTab">
        <Scaling Id="Ribbon.Read.Scaling">
        </Scaling>
        <Groups Id="Ribbon.Read.Groups">
        </Groups>
      </Tab>
        </CommandUIDefinition>
It works but still there's a little problem - if there's a Page tab on the Ribbon and you click on it something changes replaced tab back. I didn't find the reason yet. I'll try to find it out and the new information here or right in my article. Fell free to ask if you have any questions still. --------------------------------------

Back to the contents of the series.

9 comments:

  1. Thanks for the article, very nice!

    I have a question regarding this 'browse' button, is it possible to rename it?
    Can i deploy with some feature a new action which will override the current browse, but inherit the functionality?

    ReplyDelete
    Replies
    1. Unfortunately there are some restrictions on the comment text here so I have to add my answer right to the end of the article temporarily - see there. Feel free to ask if you still have any questions.

      Delete
  2. when selecting page tab page title area hides can we fix not to hide Title area visible even page tab selects and push the page down.

    ReplyDelete
    Replies
    1. I'm not sure it's within the SharePoint UI ideology but anyway if you really need it I can offer this little trick - you need to redefine OOTB javascript function from the init.js file named "OnRibbonMinimizedChanged". As the minimum you can disable the code that actually hides/shows page title div with this script I've made for you:
      http://pastebin.com/cBjMq3GX. Beware - I've not tested it much.

      HTH

      Delete
  3. To change the text of the tab, a great solution here:
    http://stackoverflow.com/questions/3700829/default-sharepoint-2010-tabs

    ReplyDelete
    Replies
    1. Thanks, it looks like a simple and acceptable solution.

      Delete