Customizing the Office 2007 Ribbon UI - Part 1

Article
05/24/2006

This is the first in a series of topics focusing on the new Office 2007 user interface (UI) and Ribbon extensibility, also called RibbonX. By now, you've probably seen blogs, press releases, and other information on the virtues and benefits of the new Ribbon UI. In previous versions of Office, adding custom commands using COM add-in and command bars could be a daunting task for novice Office developers. RibbonX is a breeze. The basic structure of the Ribbon is a hierarchical model, consisting of tabs containing groups of commands and controls displayed in logical, easy-to-find groupings using familiar controls such as drop down dialog boxes, buttons, and context (right-click) menus. The Ribbon also includes rich, interactive new controls called galleries that allows you to see what a change will look like in your document before you actually commit the change. Solutions created in previous versions of Office continue to work and are added to an "Add-Ins" tab. Context menus provide rich, commands and controls relative to the section of the document you are working in.

Note: Some of these features, such as context (right-click) menus, the mini-Toolbar, the Status Bar and live preview using galleries, are not available when customizing the Ribbon UI with add-ins.

Customizing the Ribbon UI is really easy. You can customize the Ribbon through combination of XML markup and any .NET language supported in Microsoft Visual Studio such as Visual Basic .NET, Visual C++, and C#. You can also customize the Ribbon UI using Microsoft Visual Basic for Applications (VBA) and Visual Basic 6.0. There are essentially two ways to customize the Ribbon, both of which at their core use XML markup: directly through a valid Office XML Open File Format file and COM add-ins either containing XML markup or reading XML from a file. Using Office XML Open File Format files allows you to add customizations by using templates (such as .xlam, .dotm files). In this topic, I'll just talk a little about the XML. I'll go into more detail on the XML and code used to create specific UIs.

Before looking at RibbonX, I'll describe a little about some of the parts of the new UI. The Office 2007 UI is more than just the Ribbon; it is a combination of new and traditional features. For example, there is the Office Menu, available from the round Microsoft Office Button located in the upper left-corner of the application window, similar to the File menu found in previous versions of Office. This menu contains the customary New, Open, Save, and Print commands as well as additional commands like Publish, Send, and Finalize. Also in the upper left-corner of the application window is a customizable feature called the Quick Access Toolbar (QAT). The QAT exposes those controls that you typically use frequently such as Save, Undo, Repeat, and Print. The Ribbon includes enhanced versions of the familiar tool tips, called screen tips, that let you display the name and purpose of the control or command. There is a status bar of status indicators (Caps lock, Num Lock), statistics (page number, line number, column) and functions (count, average, sum). Note that the status bar is not customizable. And just as in Office 2003, there are rich, context (right-click) menus. To make it easier for users to find the options they need, they can access legacy dialog boxes in some of the groups by clicking a launcher control in the lower-right corner of some of the groups.

The actual Ribbon customization is done in declarative XML markup. That is, adding a line or encapsulated section to the XML markup in a customization file adds or hides a control, command, or option on the Ribbon. Attributes are used to identify, define characteristics, and add functionality. Writing XML is typically much easier than writing traditional code for many people. And because it's just text, you can write it in any text editor. Additionally, you can take advantage of the many utilities available to help you write and validate XML and associated XSDs such as those provided by Visual Studio Tools for Office.

RibbonX uses callbacks to provide its functionality such as provide status, update properties, or perform some action. Some callbacks look and act like the event procedures you see in other languages. You specify the callback as an attribute of an XML tag in the customization file and then define the callback in code in either the add-in, in a template, or in macro-enabled Office 2007 Open XML Formats file. For example, the XML markup for a button control can specify an onAction attribute that points to a procedure in code which is executed when the button is clicked. That procedure then calls back to the Ribbon to either provide a status or modify the Ribbon.

The following XML markup hides a built-in tab, adds a custom tab containing a custom group containing a custom button, a togglebutton, and a combo box with options.

</group>
</tabs>
</ribbon>
</customUI>

One of the first things you see is a <Ribbon> tag with a startFromScratch="false" attribute. Setting this attribute to True hides the built-in Ribbon controls so that you can build your own UI from scratch. The default for this attribute is False so it is included here for illustration purposes. Next, you see a built-in tab, identified as such by the idMso identifier. There is also an id identifier. The id identifier indicates a custom component. The tab contains a custom group that contains two built-in controls: Paste and Copy.

Next comes a built-in tab containing a custom group. The group contains a number of controls. Notice that the group uses a fully qualified name prepended with the namespace alias. The group contains a button and toggleButton with various attributes defined such as label text and the size of the button. Also included is an event declaration that makes a method call when the user clicks the button. The callback method is implemented in a COM add-in or in the code part of an Open XML Formats file.

A combo box control is added to the tab with three options. The combo box defines different attributes such as its label and a screen tip. And finally, we included a dialog box launcher control for the group that can be used to display a dialog box with additional options.

Looking at this markup, you can see how simple it is to see what's going on here and how easy it would be to add you own controls or adjust the properties of existing components. If you wanted to hide a built-in control, all you would need to do is set its visible attribute to False. In the next blog, I'll discuss callbacks procedures and how they are used, and then get into some examples of creating and modifying different commands and controls on the UI.

Customizing the Office 2007 Ribbon UI - Part 1

Additional resources