Overview of the Ribbon User Interface

  • Article
Office Developer Reference
Aa434075.vs_note(en-us,office.12).gif  Note
The use of CommandBars in some Microsoft Office applications has been superseded by the new Ribbon user interface. For more information, search help for the keyword "Ribbon."

The Ribbon user interface (UI) feature replaces the current system of layered menus, toolbars, and task panes with a simpler system of interfaces optimized for efficiency and discoverability. The new UI has improved context menus, screentips, a Mini toolbar, and keyboard shortcuts that improve user efficiency and productivity. Ribbon Extensibility (or RibbonX) introduces an innovative model that developers can use to enhance the user experience. You use extensible markup language (XML) and one of several conventional programming languages to manipulate the components that make up the Ribbon UI. Because XML is plain text, you can create customization files in any text editor, or you can use your favorite XML editor. You can also reuse custom Ribbon UI files with a minimum of adjustments because each application uses the same programming model. For example, you can reuse the custom UI files you create in Microsoft® Office Word 2007, Microsoft Office Excel® 2007, Microsoft Office Access 2007, or Microsoft Office PowerPoint® 2007.

Using XML markup files to customize the UI greatly reduces the need for complex add-ins based on the CommandBars object model. However, add-ins written in previous versions of Office continue to work in the Ribbon UI with little or no modification. You can create a custom application-level Ribbon UI in Word 2007, in Excel 2007, or PowerPoint 2007 in the following ways:

  • Using COM add-ins in managed or unmanaged code
  • Using application-specific add-ins, such as .ppam and .xlam files
  • Using templates (.dotm files) in Word 2007

In a typical scenario, code in the COM add-in contains procedures that return XML markup either from an external customization file or from XML contained in the code itself. When the application starts, the add-in loads and executes the code that returns the XML markup. Microsoft Office validates the XML markup against an XSD schema, and then loads it into memory and applies it to the UI. The modified Ribbon UI is then displayed. Menu items and controls use callback procedures to execute code in the add-in. Document-level customizations use the same XML markup and an Open XML Formats file with one of these extensions: docx, .docm, .xlsx, .xlsm, .pptx, .or pptm. In this scenario, you create a customization file that contains the XML markup and save it to a folder. You then modify the parts in the Open XML Formats container to point to the customization file. When you open the document in the Office application, the customization file loads into memory and is applied to the Ribbon UI. The commands and controls then call code contained in the document to provide their functionality.

What About Existing Solutions?

In previous versions of Microsoft Office, developers used the CommandBars object model to build the Microsoft Visual Basic® code that modified the UI. In Office 2007, this legacy code continues to work in most cases without modification. However, changes made to toolbars in Office 2003 now appear on an Add-Ins tab in the 2007 release of Microsoft Office Suites. The type of customization that appears depends on the original design of the add-in. For example, Office creates a Menu Commands group that contains items added to the previous menu structure (File menu, Insert menu, Tools menu, and so forth). It also creates a Toolbar Commands group that contains items added to the previous built-in toolbars (such as the Standard toolbar, Formatting toolbar, and Picture toolbar). In addition, custom toolbars added by an add-in or document appear in the Custom Toolbars group on the Add-Ins tab.

Callback Procedures Add Functionality to the Ribbon

With Ribbon Extensibility, you specify callbacks to update properties and perform actions from your UI at runtime. For example, consider the onAction callback method for a button. The RibbonX markup looks like:

  <button id="myButton" onAction="MyButtonOnAction" />

This markup tells Office to call the MyButtonOnAction function when the button is clicked. The MyButtonOnAction function has a specific signature depending upon your choice of languages; here is an example in Microsoft Visual C#®:

  public void MyButtonOnAction (IRibbonControl control)
   {
      if (control.Id=="myButton")
      {
         System.Windows.Forms.MessageBox.Show(“Button clicked!");
      }
   }

Customizing the Ribbon UI with COM Add-ins

Customization at the application-level results in a modified Ribbon UI that appears in the application regardless of which document is open. Primarily, you create COM add-ins to make these modifications. To customize the Ribbon UI using COM add-ins:

  1. Create a COM add-in project. The add-in you create must implement the Extensibility.IDTExtensibility2 interface as with all COM add-in and the additional IRibbonExtensibility interface (found in the Microsoft.Office.Core namespace).
  2. Build the add-in and setup project, and then install the project.
  3. Start the Office application. When the add-in loads, the IDTExtensibility2::OnConnection event is triggered which initializes the add-in, just as in previous versions of Office.
  4. Next, the QueryInterface method is called which determines if the IRibbonExtensibility interface is implemented.
  5. If so, the IRibbonExtensibility::GetCustomUI method is called which loads the XML markup (from the XML customization file or from XML markup embedded in the procedure) and then loads the customizations into the application.
  6. Finally, the customized UI is ready for the user.

Customizing the Ribbon UI with Office Open XML Formats Files

At the document level, the process for customizing the UI using XML markup involves the following steps.

  1. Create the customization file in any text editor by adding XML markup that adds new components to the Ribbon UI, modifies existing components, or hides components. Save the file as customUI.xml.
  2. Create a folder on your desktop named customUI and copy the customization file to the folder.
  3. Validate the XML markup with custom UI schema.
    Aa434075.vs_note(en-us,office.12).gif  Note
    This step is optional.
  4. Create a document in the Office application, and then save it as an Open XML Formats file with one of these extensions: .docx, .docm, .xlsx, .xlsm, .pptm, or .pptx. Files containing macros have an m suffix. These files can contain procedures called by RibbonX commands and controls.
  5. Add a .zip extension to the document file name, and then open the file.
  6. Add the customization file to the container by dragging the folder to the file.
  7. Extract the .rels file to your desktop. A _rels folder containing the .rels file is copied to your desktop.
  8. Open the .rels file and add a line that creates a relationship between the document file and the customization file, and then save the file.
  9. Add the _rels folder back to the container, overwriting the existing file.
  10. Rename the file to its original name by removing the .zip extension. When you open the Office file, the Ribbon UI appears with your customization.

General Format of XML Markup Files

You can use XML markup to customize the Ribbon UI. The following example shows the general format of an XML markup file that customizes the Ribbon UI in Word 2007:

  <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
    <tabs>
      <tab idMso="TabHome">
        <group idMso="GroupFont" visible="false" />
      </tab>
      <tab id="CustomTab" label="My Tab">
        <group id="SampleGroup" label="Sample Group">
          <toggleButton id="ToggleButton1" size="large" label="Large Toggle Button" getPressed="MyToggleMacro"  />
          <checkBox id="CheckBox1" label="A CheckBox" screentip="This is a check box" onAction="MyCheckboxMacro" />
          <editBox id="EditBox1" getText="MyTextMacro" label="My EditBox" onChange="MyEditBoxMacro"/>
          <comboBox id="Combo1" label="My ComboBox" onChange="MyComboBoxMacro">
            <item id="Zip1" label="33455" />
            <item id="Zip2" label="81611" />
            <item id="Zip3" label="31561" />
          </comboBox>
          <advanced>
            <button id="Launcher1" screentip="My Launcher" onAction="MyLauncherMacro" />
          </advanced>
        </group>
        <group id="MyGroup" label="My Group" >
          <button id="Button" label="My Large Button" size="large" onAction="MyButtonMacro" />
          <button id="Button2" label="My Normal Button" size="normal" onAction="MyOtherButtonMacro" />
        </group >
      </tab>
    </tabs>
  </ribbon>
</customUI>

This sample makes the following changes to the Ribbon UI in Word 2007, in the order shown:

  1. First the sample declares the default namespace and a custom namespace.

  2. The sample then hides the built-in GroupFont group that is located on the built-in Home tab.

  3. The sample then adds a new CustomTab tab to the right of the last built-in tab.

  4. Aa434075.vs_note(en-us,office.12).gif  Note
    Use the
    id= identifier
    attribute to create a custom item, such as a custom tab. Use the
    idMso= identifier
    attribute to refer to a built-in item, such as the TabHome tab.

  5. The sample adds a new SampleGroup group to the My Tab tab.

  6. The sample adds a large-sized ToogleButton1 button to My Group. An onAction callback and GetPressed callback is also specified.

  7. The sample adds a CheckBox1 check box to My Group with a custom screentip. An onAction callback is also specified.

  8. The sample adds a EditBox1 edit box to My Group. An onChange callback is also specified.

  9. The sample adds a Combo1 combo box to My Group with three items. The combo box specifies an onChange callback that uses the text from each item.

  10. The sample adds a Launcher1 launcher to My Group with the onAction callback set. A launcher may also display a custom dialog box to offer more options to the user.

  11. The sample adds a new MyGroup group to the custom tab.

  12. The sample adds a large-sized Button1 button to MyGroup. An onAction callback is also specified.

  13. Finally, the sample adds a normal-sized Button1 button that is a normal-sized button to MyGroup. An onAction callback is also specified.

Working with Legacy Command Bar Add-ins

When you create COM add-ins, you usually need a way for users to interact with the add-in. In earlier versions of Office, you accomplished this by adding a menu item or toolbar button to the application using the CommandBars object model. In this release of Office, custom applications continue to work in the Ribbon UI without modification in most cases. However, changes you make with the CommandBars object model, or any other technology that modified the menus or toolbars like WordBasic or XLM, appear on a separate Add-Ins tab. This makes it easy for users to locate the controls they need to work with and the add-ins they used previously.

Dynamically Updating the Ribbon UI

Callbacks that return properties of a control normally get called once unless you specify that the call is to be repeated. You can requery your callback by implementing the onLoad callback in the customui element. This callback gets called once; when the RibbonX markup file is successfully loaded, and then passes the code to an IRibbonUI object. Here is sample code to get the IRibbonUI object, so you can update your controls at runtime: XML Markup:

  <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui" onLoad="ribbonLoaded">

In C#: Write a callback in your Connect class:

  IRibbonUI myRibbon;

 public void ribbonLoaded(IRibbonUI ribbon) {
     myRibbon = ribbon;
 }</code>

The new UI in Office 2007 offers users a flexible way to work with Office applications. The Ribbon feature uses text-based, declarative XML markup that simplifies creating and customizing the Ribbon. With a few lines of XML, you can create just the right interface for the user. Because the XML markup is contained in a single file, modifying the interface as requirements change is much simpler. You can also improve user productivity by putting the commands where users can easily find them. Finally, the Ribbon adds consistency across applications, which reduces the time users spend learning each application.