As a SharePoint developer, mirroring the style of the SharePoint user interface in a custom application is important to create a homogeneous experience for your end users. One of the best opportunities to accomplish this is by creating a custom ribbon tab containing contextualized buttons to suite your application.
Deploy a Custom Ribbon Tab Definition
We begin by deploying a custom ribbon tab definition to your SharePoint environment. This is done using the <CustomAction /> element of a SharePoint feature. We begin by defining a <CustomAction /> element with the location of ‘CommandUI.Ribbon.Tabs._children’. This will add our custom ribbon tab defined in the <CommandUIDefinition /> element to the collection of available SharePoint ribbon tabs.
Coordinate the Ribbon Tab Using a CUI.Page.PageComponent
This sample RibbonAppPageComponent provides a basic framework to support your ribbon tab’s custom commands. The RibbonAppPageComponent can be reused by all of your custom ribbon tabs and it is not necessary to create a custom PageComponent for each tab. Although creating a custom PageComponent to alter or customize the behavior of a specific ribbon tab may be a good option is select circumstances.
Adding the Ribbon Tab to a Page
Once the ribbon tab is defined and the page component created it is time to add the ribbon to your SharePoint .ASPX page. We start by creating a private method named InitializeRibbon which gets called from the Page_Load method of our SharePoint page. We begin the method by getting a reference to the current SPRibbon element and check to ensure the current ribbon is not NULL.
Once we have a reference to the current ribbon we can begin defining the ribbon behavior. We start by setting some basic ribbon properties and adding the available tabs. The Id passed to the MakeTabAvailable method must match the value defined in our ribbon tab definition. We can also setup the initial ribbon tab. A common tab added to most pages is the ‘Ribbon.Read’ element which provides the page title and description.
Your ribbon tab is now ready. Build and deploy your application to your SharePoint environment and enjoy the fruits of your labor. If you make a lot of changes to your ribbon you will notice IE caches a lot of ribbon content. It may be necessary to delete your cached files after an update or turn off caching all together.
Additional Ribbon Commands
To handle the post back event our page must implement the IPostBackEventHandler. The implementation of the RaisePostBackEvent begins by deserializing the SharePoint ribbon post back event and handling the post back ID provided by our post back command.
The ribbon is new to SharePoint 2010 and is being embraced by Microsoft. The ribbon is making its way into many Microsoft applications like the Office Suite, WordPad, Paint and Windows 7. Consumers of Microsoft products, including SharePoint users, will come to expect a ribbon driven menu to be included in custom applications.
Creating a custom ribbon tab for your SharePoint application doesn’t have to be a pain and can be accomplished by defining a ribbon tab definition, creating a PageComponet to coordinate ribbon events and initializing the ribbon in your application page. Using a custom ribbon tab is an excellent way to present custom actions in your application while maintaining a cohesive visual experience for your users. Wow your users by including a custom ribbon tab in your next SharePoint application.