How To Customize the Ribbon in Excel 2007 or Excel 2010 | ooxml | RibbonX | Open Office XML
With the introduction of Office 2007, Microsoft added a new UI element to their suite of productivity software: The RibbonX. There two ways that a developer can create and modify the RibbonX in either one of Microsft Office 2007 or 2010 software; through XML or with C# or Vb.Net in Visual Studio. This tutorial focuses on the XML version which is quick and easy way of creating or modifying a Ribbon.
To follow along I recommend using the Custom UI Editor from OOXML.org. See the Resources at the end for a link to download this free tool.
XLSX File Format Quick Overview
Excel 2007 and Excel 2010 are archive files.To illustrate create a workbook in Excel:
- From Windows Explorer navigate to the file created
- Change the extension to zip. (Note: You have to have the option “show extensions” enabled in Windows Explorer. Also accept the warning about changing the file extension).
- Open the zip file with any archive utility
- The archive file contains many XML files and other resource files to make Excel work. Any custom Macros would be saved as .bas files. The same goes for custom forms and images. To create custom UI resources it is best to use a tool like Custom UI Editor or Visual Studio or some other Editor.
- Rename to extension to .xlsx to revert the zip to its original file extension
CustomUI xml files in Excel
When you add a custom Ribbon Tab in the xlsx (or xlsm macro file) archive a new file is added to the archive depending on the version you choose and the version of Excel. For 2010 you can opt for either one.
- Excel 2007 : CustomUI.xml
- Excel 2010 : CustomUI14.xml
The main difference is the namespace
<?xml version="1.0" encoding="utf-8"?><customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
In Excel 2010 New Element:backstage
In 2010 you can enclosed your Custom UI in the Backstage so that it will appear in the file menu rather than as a Tab in the Ribbon:
<?xml version="1.0" encoding="utf-8"?>
<tab id="customTab" label="Custom">
To add or modify a custom UI element
- Use the CustomUI Tool which is available from OOXML.org (see the Resource section at the end off this article for the url)
- Open the xlsx file
- Either right click on the file name in the Explorer on the left hand side or select from the Insert menu, choose to add one of the two custom ui parts:
- Office 2010 Custom UI Part
- Office 2007 Custom UI Part
- You can either add your own xml code in the editor on the right, or choose to insert a sample, see Sample XML submenu in the Insert menu. Please see the Resources for listing on the complete RibbonX XML reference and also for the 2007 and 2010 Control IDs if you need to access a built-in command.
- To add a custom icon, right click on the xml file Custom UI Part and select “Insert Icons”. Only png (Portable Net Graphics) is fully supported. Additionally icons should either be 16x16 or 32x32 otherwise you risk not having your images display.
To add a custom UI part start adding the XML declaration:
<?xml version="1.0" encoding="utf-8"?>
Next add the root element : customUI followed by the appropriate namespace for the version of Excel (See above). Remember to add the closing element.
<?xml version="1.0" encoding="utf-8"?>
If you want to replace the default RibbonX in your Excel application, add the following property and set its value to true, otherwise set it to false or omit it to add to the current RibbonX.
Within this root element you can either add a backstage as I mentioned above, tabs, tab
then add the <tab> element along with an id, label and insertAfterMso attribute. The insertAfterMso specifies where you want your tab to appear.
<tab id="Tools" label="Reporting" insertAfterMso="NameOfTab">
The next logical step is to add a group and then elements like buttons and images, dropdownlist to the group along with the action you want that element to execute.
<tab id="Tools" label="Reporting" insertAfterMso="NameOfTab"><group id="data" label="Get Data">
<button id="dataBtn" label="SQL" size="large" onAction="retrieveReportData" imageMso="DataViewDetailsView" />
<button id="reportBtn" label="Reports" size="large" onAction="chooseReport" imageMso="CreateReportInDesignView" />
If you are specify an Office image resource, use the imageMso attribute. If you using a custom image, use the image attribute. The easiest is to right click on your customUI file and select “add icons” or from the Insert menu.
The onAction attribute specifies what callback you want to execute in the Excel file. A callback is, simply put, a macro or a command that is or will be in your Excel file. The Custom UI Editor provides a way to automatically generate your callbacks (macros) as defined in each onAction attribute. Once you have defined the names of your callbacks, click on the Genrate Callback button in the menu and boilerplate method will be generated. You will need to copy the generated method stub to the Excel file and add code to the callback method using the VBA editor in Excel.
XML Sample Code
The Custom UI Editor comes with some sample XML code to help you get started.
The Outspace code tidbit is to create a new backstage tab (The backstage is the File menu in Excel 2010).
<?xml version="1.0" encoding="utf-8"?> <customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"> <backstage> <tab id="customTab" label="Kevin BackStage"> <firstColumn> <taskGroup id="customTaskGroup" label="kevin"> <category id="tgCategory1" label="Test"> <task id="task1" label="Task 1" imageMso="FileOpen"/> <task id="task2" label="Task 2" imageMso="FileSave"/> <task id="task3" label="Task 3" imageMso="FileSaveAs"/> </category> </taskGroup> </firstColumn> </tab> </backstage> </customUI>
The Custom Tab code snippet creates a basic custom tab. It set the Tab name and group, adds a button and image set provides for a Callback method in the onAction attribute.
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"> <ribbon startFromScratch="false"> <tabs> <tab id="customTab" label="Custom Tab"> <group id="customGroup" label="Custom Group"> <button id="customButton" label="Custom Button" imageMso="HappyFace" size="large" onAction="Callback" /> </group> </tab> </tabs> </ribbon> </customUI>
Excel - A Custom Tab
This sample provides the XML code for multiple groups within a Tab. You can also create multiple Tabs within this code as the following demonstrates:
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"> <ribbon> <tabs> <tab id="customTab" label="Contoso" insertAfterMso="TabHome"> <group idMso="GroupClipboard" /> <group idMso="GroupFont" /> <group id="customGroup" label="Contoso Tools"> <button id="customButton1" label="ConBold" size="large" onAction="conBoldSub" imageMso="Bold" /> <button id="customButton2" label="ConItalic" size="large" onAction="conItalicSub" imageMso="Italic" /> <button id="customButton3" label="ConUnderline" size="large" onAction="conUnderlineSub" imageMso="Underline" /> </group> <group idMso="GroupEnterDataAlignment" /> <group idMso="GroupEnterDataNumber" /> <group idMso="GroupQuickFormatting" /> </tab> <tab id="KLcustomTab" label="Kevin" insertAfterMso="customTab"> <group id="customGroup" label="KLanguedoc Tools"> <button id="customButton1" label="So Something" size="large" onAction="DoSomething" imageMso="AdministrationHome" /> <button id="customButton2" label="Callback" size="large" onAction="MyCallback" imageMso="AddInManager" /> <button id="customButton3" label="Get Data" size="large" onAction="conUnderlineSub" imageMso="AccessListCustom" /> </group> </tab> </tabs> </ribbon> </customUI>
Word - Group on Insert Tab
This XML code as the name implies is for Word. The code is out of scope.
This code sample lets you modify the behavior of existing commands. The code below, the Bold command is disabled and a new Callback is defined for the Save. If you were to add this code to an Excel file and you clicked for instance on the Save command in the File menu, Excel would open the Developer Tab or if the Callback method “MySave” was included in the file, it would executed it instead of the regular Save command.
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui"> <commands> <command idMso="Bold" enabled="false"/> <command idMso="Save" onAction="MySave"/> </commands> </customUI>
RibbonX, although a little misunderstood in the beginning, is a powerful new way of organization commands in Microsoft Office.
For a complete list of elements for the RibbonX in either Microsoft 2007 or 2010 see the Resources below. This tutorial provides only a basic overview of the RibbonX control and how to modify it through XML. You can also use Microsoft Visual Studio to perform the same tasks and also to visually design your RibbonX. You can also export your custom RibbonX control through Visual Studio 2007 or 2010 as XML or as an dll for re distribution, resell or some other purpose.
These links are active at the time of this writing. If any are broken, do a search with your favorite search engine.
Office 2010 XML Reference
2007 Office System: XML Schema Reference
http://www.microsoft.com/download/en/details.aspx?id=4463Microsoft Office 2010.
Office 2010 Icons Gallery
This is a word document that displays (See Backage or File Menu) all the icons and their names in http://www.microsoft.com/download/en/details.aspx?id=21103
Office 2007 Icons Gallery
List of Control IDs (idMSO actions for built-in commands) for Office 2007
List of Controls as above for 2010