Correctly implementing Ribbon in SharePoint 2010
SharePoint 2010 introduces a new User Experience designed to make it easier for users to accomplish their tasks. One of the biggest improvements is the contextual Ribbon, which increases discoverability op options by displaying only options relevant to the current context. The main idea behind the Ribbon is that it’s always available and within reach. This applies not only to Office client applications but also to SharePoint.
Positioning the Ribbon
Following Microsoft’s guidelines, the Ribbon should always float at the top of the page. And although SharePoint 2010 provides us with a mechanism to position the Ribbon correctly, there is some work that needs to be done by us as well.
When creating new Master Pages, you will be very likely using either the Starter Master Pages for SharePoint 2010, made by fellow SharePoint MVP – Randy Drisgill, or one of the standard SharePoint Master Pages as a starting point. No matter your preference, in both cases you will be provided with all the necessary components to get the Ribbon positioned correctly. It’s upgrading existing SharePoint 2007 Master Pages that requires extra attention to ensure that you get all the necessary components in place.
How they do it: Floating Ribbon
SharePoint 2010 uses a rather complex approach to make the Ribbon float on the top of the page. On every page load, page’s height is being measured using JavaScript and the Ribbon and body are sized using those dimension. In order for this process to be executed SharePoint requires your Master Page to contain elements with the following ID’s: s4-ribbonrow, s4-workspace and s4-bodyContainer. If you haven’t defined one of those ID’s, the Ribbon positioning logic will not be executed.
The logic behind positioning the Ribbon is implemented in the init.js file in the FixRibbonAndWorkspaceDimensions **** function (line 3406; the exact position may depend on your patching level). In lines 3409-3412 how different prerequisite elements are being retrieved and how SharePoint checks in line 3413-3415 if all the required elements have been defined.
So whenever you have problems getting the Ribbon positioning to work, don’t forget to check if you have all those ID’s defined properly in your Master Page. Using standard Master Pages such as v4.master or nightandday.master is always a good idea to verify that you have done everything correctly.
Summary
SharePoint 2010 introduces the Ribbon to make it easier for users to accomplish their tasks. One of the ideas behind the Ribbon is that it’s always within the reach so that users can easily discover functionality they need at the given moment. Correctly laying out the Ribbon can be achieved using the standard SharePoint 2010 functionality but requires placing specific elements to get it to work.