Modifying and Customizing Office 2007 Ribbon UI

[spacesurfer]

I love the new Office Ribbon. However, the first thing I wanted to do was modify it. The Home tab has a big chunk of the Styles group that I don't use. I wanted to get rid of it and put my own shortcuts in the Home tab. It took many hours of research and trial and error to modify the Ribbon. I put together a guide for everyone who wants to modify it.

Edit 11/28/2009: I have created a website that digs a little deeper into modifying the Ribbon UI: Modify Office 2007 Ribbon UI. Hope you find it useful. It includes everything in Post 2 plus includes the following topics:

• Explanation of callbacks
  
• checkBox example
  
• editBox example
  
• buttons and assigning macros
  
• dropDown
  
• Create a Conversion tab for unit to unit conversion with my example
  

Here's the pdf attached: Modifying_Office_Word_Ribbon.pdf

The text version is in post 2.

Comments welcome.

Edit 2: With the release of Office 2010 Beta to the public, I wanted to share that Office 2010 now allows you to modify the Ribbon directly from Options without all this mess. However, the limitations are that you can only add built-in controls; you cannot make your own custom controls. If you want to add more power than is packed in Office, you will still need this guide.

Edited December 7, 2009 by spacesurfer

[spacesurfer]

Introduction

Here is a tutorial on how to modify the ribbon interface in Office Word. This method doesn’t require Visual Basic programming. It requires modifying a simple XML file with a text editor. This guide only shows you how to shift the built-in controls around from tab to tab or group to group. It does not show you how to create your own controls.

Step 1: Enabling a Custom Ribbon

1) Create a folder called ‘Ribbon’ anywhere on your hard disk.

2) Open Office Word. Do not modify the new blank document. Click on ‘Save As’ to save the document as customUI.docm file in The Ribbon folder. This is a macro-enabled file. Make sure you change the “Save As Type” to docm.

3) Go to the Ribbon folder and add a zip extension to customUI.docm. It should now be customUI.docm.zip. Open the zip file with your zip utility or use the built-in zip support of Windows XP. The docm file is a zip file in disguise. You should now see three folders (_rels, docProps, and word) and one file called [Content_Types].xml.

4) Extract the folder _rels to your Ribbon folder.

5) In the _rels folder, open the .rels file with a text editor such as Notepad. Replace the content of the file with the following code below. This only sets the relationship allowing you to modify the Ribbon interface as specified by the file customUI.xml. We will modify customUI.xml file in the next step.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId3" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/extended-properties" Target="docProps/app.xml"/><Relationship Id="customUIRelID" Type="http://schemas.microsoft.com/office/2006/relationships/ui/extensibility" Target="customUI/customUI.xml"/><Relationship Id="rId2" Type="http://schemas.openxmlformats.org/package/2006/relationships/metadata/core-properties" Target="docProps/core.xml"/><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="word/document.xml"/></Relationships>

If you do not want to replace the entire code, simply add the following line after the last Relationship and before </Relationships>.

<Relationship Id="customUIRelID" Type="http://schemas.microsoft.com/office/2006/relationships/ui/extensibility" Target="customUI/customUI.xml"/>

6) In the Ribbon folder, create a folder called customUI. In the customUI folder, create a text file called customUI.xml. The customUI.xml file contains the code to your Word Ribbon. The features you want in the Ribbon will determine the code of this file. The following code is provided so you can see the structure of the code.

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
	<tabs>
	  <tab idMso="TabHome">
		<group idMso="GroupStyles" visible="false" />
		<group id="Shortcuts" label="My Shortcuts" insertBeforeMso="GroupClipboard">
		  <button idMso="FileSave" showLabel="false" />
	  <splitButton idMso="FileSaveAsMenu" showLabel="false" />
	  <splitButton idMso="FilePrintMenu" showLabel="false" />
	  <button idMso="ZoomOnePage" />
	  <button idMso="ZoomPageWidth" />
		  <checkBox idMso="ViewThumbnails" />
	</group>
	<group id="NewInsert" label="Insert Objects">
		  <gallery idMso="TableInsertGallery" />
		  <button idMso="PictureInsertFromFile" />
	  <toggleButton idMso="ClipArtInsert" />
	  <gallery idMso="TextBoxInsertGallery" />
		  <gallery idMso="SymbolInsertGallery" />
		  <gallery idMso="GalleryAllShapesAndCanvas" />
	</group>
	<group id="NewPageLayout" label="Page Layout">
		  <gallery idMso="TableColumnsGallery" />
		  <gallery idMso="PageOrientationGallery" />
		  <gallery idMso="PageMarginsGallery" />
	</group>
	  </tab>
	  <tab id="EditStyles" label="Edit and Styles" insertBeforeMso="TabInsert">
		<group idMso="GroupEditing" />
		<group id="EditShorts" label="Quick Edits">
	  <button idMso="RedoOrRepeat" />
		  <gallery idMso="Undo" />
		  <gallery idMso="Redo" />
	</group>
		<group idMso="GroupClipboard" />
		<group idMso="GroupStyles" />
	  </tab>
	  <tab idMso="TabPrintPreview">
		<group id="Reviewing" label="Reviewing">
	   	  <dropDown idMso="ReviewDisplayForReview" />
		  <menu idMso="ReviewShowMarkupMenu" />
	   	</group>
	  </tab>
	</tabs>
  </ribbon>
</customUI>

7) The features of the customUI.xml will be explained below. But once you have your customUI.xml modified, drag the _rels and customUI folders to the customUI.docm.zip file. Overwrite the existing files if prompted. Remove the zip extension. Open customUI.docm and you should see the result of your modification. If you do not see a change, then either you have some mistakes in your code or the file conflicts with a modified Ribbon interface in Normal.dotm (in folder “%UserProfile%\Application Data\Microsoft\Templates\”). If so, try deleting Normal.dotm (back up the file if you need it).

8) Once you open customUI.docm and everything looks correct, click on ‘Save As’ and save the file as a macro-enable document template and call it Normal.dotm. You can replace your existing Normat.dotm with this one so you see the modified Ribbon each time you open Word. See Step 3 on replacing Normal.dotm.

Step 2: Modifying the customUI.xml

Control IDs

Each built-in button, split button, drop-down menu, menu, toggle button, checkbox, etc. that you see in the Ribbon interface is called a control. Each control has a unique Control ID that calls that control. Each tab and group also has a Control ID. In order to modify the Ribbon, you must know the Control ID that you want to manipulate and the type of control it is. The list of Control IDs can be downloaded from Microsoft’s website from the following URL: Office Control IDs or search for “Lists of Control IDs”.

Structure

The basic structure of customUI.xml is the following code:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
	<tabs>
	  <tab id="XXX" label="XXX">
		<group id="XXX" label="XXX">
		  <button id="XXX" label="XXX" />
		</group>
	  </tab>
	</tabs>
  </ribbon>
</customUI>

Tabs

First, lets modify tabs. To modify a built-in tab (or any other built-in control), idMso tag is used. The built-in tabs Home, Insert, View, etc. are named TabHome, TabInsert, TabView, etc. For a complete list, refer to the list of Control IDs. To modify the Home tab, the following code is used.

<tab idMso="TabHome">
</tab>

Groups

Groups are defined the same way as Tabs. With groups, however, you may want to hide them if you don’t use them in addition to creating your own group.

<tab idMso="TabHome">
   <group idMso="GroupStyles" visible="false" />
   <group id="Shortcuts" label="My Shortcuts" insertBeforeMso="GroupClipboard">
	  <button idMso="FileSave" showLabel="false" />
	  <splitButton idMso="FileSaveAsMenu" showLabel="false" />
	  <splitButton idMso="FilePrintMenu" showLabel="false" />
	  <button idMso="ZoomOnePage" />
	  <button idMso="ZoomPageWidth" />
	  <checkBox idMso="ViewThumbnails" />
   </group>
</tab>

This code modifies your Home tab in the following way:

• The Styles group is hidden with visible=“false”. idMso is used since it is a built-in group.

• A “My Shortcuts” group is created before the built-in Clipboard group. It is given the id Shortcuts.

• The rest of the items are individual controls that are displayed within the My Shortcuts group. They are explained in Controls section below.

• Note that built-in groups are simply ended with />. For your custom groups, however, you’ll need a </group> tag since you will have controls defined within the group.

Controls

Each control begins with the type of control. For example, a control can be a button, split button, drop-down menu, menu, toggle button, check box, gallery, etc. If you mismatch the Control ID with the control type, your Ribbon will not display correctly.

In the code above, the following controls are added to the ‘My Shortcuts’ group.

• A ‘Save’ button is added.

• Split buttons ‘Save As’ and ‘Print’ are added. Note the case-sensitive splitButton control type. By setting showLabel=“false”, only the icon is displayed.

• Buttons for ‘One Page’ view and ‘Page Width’ view are added. This will display with icon and text since showLabel=“false” is omitted.

• The check box ‘Thumbnails’ is displayed.

Creating a New Group

To create your own group, simply use the id tag instead of idMso. You also need a label tag to define the display name.

<tab idMso="TabInsert">
  <group id="MyGroup" label="My Group">
  </group>
</tab>

This creates a group called “My Group” in the Insert tab. The id of the group is MyGroup. You must define an id and it should not have any spaces.

The following piece of code is under the idMso=“TabHome” so it will create the group in the Home tab.

<group id="NewInsert" label="Insert Objects">
   <gallery idMso="TableInsertGallery" />
   <button idMso="PictureInsertFromFile" />
   <toggleButton idMso="ClipArtInsert" />
   <gallery idMso="TextBoxInsertGallery" />
   <gallery idMso="SymbolInsertGallery" />
   <gallery idMso="GalleryAllShapesAndCanvas" />
</group>
<group id="NewPageLayout" label="Page Layout">
   <gallery idMso="TableColumnsGallery" />
   <gallery idMso="PageOrientationGallery" />
   <gallery idMso="PageMarginsGallery" />
</group>

This code adds to the Home tab:

• Galleries for inserting tables, text boxes, symbols, and shapes.

• Button for inserting pictures.

• A toggle button for inserting clipart. Note the case-sensitive control toggleButton.

Creating a New Tab

You may want to create a new tab, especially if you removed groups from a built-in tab. For example, I removed the Styles group from the Home tab since I don’t use Styles that often. I created a group called Edit and Styles and put the Styles group there since I want access to it.

The method of creating your own tab is similar to creating a new group.

<tab id="MyTab" label="My Tab">
  <group id="MyGroup" label="My Group">
  </group>
</tab>

This creates the tab “My Tab” and the group “My Group” in My Tab.

<tab id="EditStyles" label="Edit and Styles" insertBeforeMso="TabInsert">
   <group idMso="GroupEditing" />
   <group id="EditShorts" label="Quick Edits">
	  <button idMso="RedoOrRepeat" />
	  <gallery idMso="Undo" />
	  <gallery idMso="Redo" />
   </group>
   <group idMso="GroupClipboard" />
   <group idMso="GroupStyles" />
</tab>

This creates a tab called “Edit and Styles”. It includes the built-in groups Editing, Clipboard, and Styles. It also creates editing shortcuts for undoing and redoing.

Step 3: Modifying and Testing

The modified Ribbon in customUI.docm displays correctly only if Normal.dotm does not exist in “%UserProfile%\Application Data\Microsoft\Templates\” or it is the default one created by Word. If you try opening customUI.docm after replacing Normal.dotm with a modified one, Word may not display the Ribbon appropriately. Every time you modify customUI.docm and you want to see the effect, you should ensure that Normal.dotm in “%UserProfile%\Application Data\Microsoft\Templates\” is the default file created by Word, not the modified file.

Now that you have your customUI.xml file set, you’ll want to play around and test it out. Once you have everything setup, you will only have to modify customUI.xml. Once it is modified, drag the folder customUI to customUI.docm.zip. Remove the zip extension and open to test it.

Once you get the Ribbon the way you want it, use the ‘Save As’ to save it as a macro-enable document template and call it Normal.dotm. Replace your Normal.dotm in “%UserProfile%\Application Data\Microsoft\Templates\”. If you modify customUI.docm again, you must delete Normal.dotm, then open customUI.docm to test the effect.

Conclusion

Modifying the Ribbon Interface is simple if you know the Control IDs of each control in Word.

[Xable]

Very interesting, Nice one spacesurfer.

[spacesurfer]

If you don't want to do all of this by hand, you can download the Custom UI Editor from Custom UI Editor.

Here's what this tool does:

* It allows you to verify your code. If there are any mistakes, it will tell you there are mistakes.

* It allows you to add your own images (or icons) for your custom buttons.

* It does not write the code for you. You still have to write the code. That's why the post above is necessary so you know what to write.

[mrQQ]

very nice find indeed!

it's sad, however, to see that now you have to do all that, instead of just conveniently dragging and dropping buttons around...

[spacesurfer]

Yes, it's sad it's complicated. But the fact that it's complicated gives it a lot more functionality that what you can do with simple drag-and-drop.

Also, if you customize your Ribbon, you can take pleasure about what others can't do.

Hehe.

[avoidz]

very nice find indeed!

it's sad, however, to see that now you have to do all that, instead of just conveniently dragging and dropping buttons around...

Agreed. The Ribbon makes a nice change (and something new to learn) after so many years of the same-old-but-good Office

It would be good, however, to remove the annoying Styles module and replace it with something custom - easily.

[Garyk007]

This tutorial is amazing.

Thanks for adding this info.

Maybe some kind soul can help with one question.

I can now add a new Tab, Group and standard buttons using the Xml method in the example,

But I want to add a custom button that will display say a "contracts" category of the buiding blocks.

For eg. I have added some content to the Builing Blocks gallery, with a new category I created called "contracts".

So all that I now need is a button that will filter the Quick parts gallery and just show the content that falls into the "contracts" category.

I hope this makes sense.

Im no programmer and would be so greatful for any help the Guru's out there may have.

[spacesurfer]

The information to add tabs in there, you missed it:

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  <ribbon>
	<tabs>
	  <tab id="XXX" label="XXX">
		<group id="XXX" label="XXX">
		  <button id="XXX" label="XXX" />
		</group>
	  </tab>
	</tabs>
  </ribbon>
</customUI>

Where id is the ID you want to give your new tab. idMso are builtin tabs.

[tosbsas]

Is there any way to get ribbon in office 2003

Ruben

[spacesurfer]

no

[AdroS]

Hi there,

I have been examining in detail of how to use the CustomUI tool to customize the Word 2007 ribbons, as those tutorials from MSDN about ribbonX are somewhat helpful.

Here's my scenario:

I have created a macro-enabled word 2007 template (.dotm) and have created a function in VBA. It pulls out a VBA form and inserts data from form into document. I now like to have this function included in the Add Ins Tab in the ribbon.

So I used the customUI Tool that is offered from the ribbonX website, downloaded it and studied the tutorials from MSDN reference site.

I used the XML tags and used the event call back procedures to call functions in the VBA sourcecode.

Now that I have a completed XML document done in CustomUI Tool and have the procedures required in the VBA sourcecode, including the callback function etc. When I test and open the documnet, I am not getting the Add-In Tab that displays the menu button for the function.

So my general question is, how do I ensure that the XML document created in CustomUI is referencing the template that I would like it display in?

I thought this would be automatic when you open the XML file of the template in CustomUI and save it. Additionally, I have also tried adding it as a COM Add-IN in the template via Visual Studio 2008, and still no further progress.

Any advice and tips would be appreciated.

Cheers.

Adrian

[spacesurfer]

I believe the Add-in tab is a built-in tab. You probably can't add to this one. Try creating your own custom tab and add your buttons there.

[damo12]

Thanks for the tutorial. I have found it most helpful. I managed to create a new Group on the Home tab of Word 2007, but I still can't work out how to add a button to the tab. I want to add a button the runs a macro (that I have created) when it is pressed. Do you know what I need to do to achieve this?

[damo12]

Thanks for the tutorial. I have found it most helpful. I managed to create a new Group on the Home tab of Word 2007, but I still can't work out how to add a button to the tab. I want to add a button the runs a macro (that I have created) when it is pressed. Do you know what I need to do to achieve this?

Its OK. I found a previous post I made regarding this topic. No need to respond to this post. Sorry about the confusion.