Modifying the Ribbon – Part 2

Posted on November 23rd, 2006 in Excel,Office 2007,The Ribbon by Ken Puls

Part 1 of this series can be found here.

In this post, I'm going to show a few more examples of customizing the ribbon using buttons. (We'll get to other types of controls later.) All of these are variations of the schema set up in the first post linked to above.

Three Small Buttons to a Column

In the example from our previous section, we saw how to add three new buttons to a group in the ribbon. The following XML adds a forth button, (no major excitement there,) but it does show how to start a second column in the group. (Similar to text wrapping.)

PLAIN TEXT
XML:
  1. <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  2. <ribbon startFromScratch="false">
  3. <tabs>
  4. <tab id = "customTab" label="Custom Tab" insertAfterMso="TabView">
  5. <group id="customGroup1" label="Custom Group 1">
  6. <button id="Button1" label="Button 1" onAction="CallControl" imageMso="HappyFace" />
  7. <button id="Button2" label="Button 2" onAction="CallControl" imageMso="HappyFace" />
  8. <button id="Button3" label="Button 3" onAction="CallControl" imageMso="HappyFace" />
  9. <button id="Button4" label="Button 4" onAction="CallControl" imageMso="HappyFace" />
  10. </group>
  11. </tab>
  12. </tabs>
  13. </ribbon>
  14. </customUI>

The end result looks like this:

Adding the Group to an Existing Tab

This time, we'll add the the group to an existing tab. We'll go back to the three button scenario, and put it right next to the clipboard on the Home tab. (I'm not suggesting you put your items there, as this is only an example.) So here's the code to do exactly that:

PLAIN TEXT
XML:
  1. <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  2. <ribbon startFromScratch="false">
  3. <tabs>
  4. <tab idMso = "TabHome">
  5. <group id="customGroup1" label="Custom Group 1" insertAfterMso="GroupClipboard">
  6. <button id="Button1" label="Button 1" onAction="CallControl" imageMso="HappyFace" />
  7. <button id="Button2" label="Button 2" onAction="CallControl" imageMso="HappyFace" />
  8. <button id="Button3" label="Button 3" onAction="CallControl" imageMso="HappyFace" />
  9. </group>
  10. </tab>
  11. </tabs>
  12. </ribbon>
  13. </customUI>

Notice that the XML to create the tab only declares the tab idMso = "TabHome", rather than going through whole CustomTab setup portion. In addition, though we do need to specify where the new group will go, so we need to add the insertAfterMso="GroupClipboard"

And by the way, just to make this more fun, the XML markup is case sensitive. :(

The net effect of the above XML is the following:

Adding Big Buttons

Now we'll go back to the original example from the first post again. This time, however, we'll add another custom group, with three large buttons on it. (This is in addition to the original group.)

The code:

PLAIN TEXT
XML:
  1. <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  2. <ribbon startFromScratch="false">
  3. <tabs>
  4. <tab id = "customTab" label="Custom Tab" insertAfterMso="TabView">
  5. <group id="customGroup1" label="Custom Group 1">
  6. <button id="Button1" label="Button 1" onAction="CallControl" imageMso="HappyFace" />
  7. <button id="Button2" label="Button 2" onAction="CallControl" imageMso="HappyFace" />
  8. <button id="Button3" label="Button 3" onAction="CallControl" imageMso="HappyFace" />
  9. </group>
  10. <group id="customGroup2" label="Custom Group 2">
  11. <button id="BigButton1" label="I'm #1!" onAction="CallControl" size="large" imageMso="HappyFace" />
  12. <button id="BigButton2" label="I'm #2!" onAction="CallControl" size="large" imageMso="HappyFace" />
  13. <button id="BigButton3" label="I'm #3!" onAction="CallControl" size="large" imageMso="HappyFace" />
  14. </group>
  15. </tab>
  16. </tabs>
  17. </ribbon>
  18. </customUI>

The only real difference between the XML used to create the button is the inclusion of size="large" in the second group. Without that, the buttons end up being small and stacked on top of each other, as in our first example. With the size clause included, they are bigger and placed horizontally in the group, as shown below:

Mixing Button Sizes

The final example of this article will display mixing the large and small buttons. This time, all the buttons are on Custom Group 1 of the Custom Tab. I've mixed up order though, and dropped Button 3, just to show how the mixed sizes will display.

PLAIN TEXT
XML:
  1. <customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  2. <ribbon startFromScratch="false">
  3. <tabs>
  4. <tab id = "customTab" label="Custom Tab" insertAfterMso="TabView">
  5. <group id="customGroup1" label="Custom Group 1">
  6. <button id="BigButton1" label="I'm #1!" onAction="CallControl" size="large" imageMso="HappyFace" />
  7. <button id="Button1" label="Button 1" onAction="CallControl" imageMso="HappyFace" />
  8. <button id="Button2" label="Button 2" onAction="CallControl" imageMso="HappyFace" />
  9. <button id="BigButton2" label="I'm #2!" onAction="CallControl" size="large" imageMso="HappyFace" />
  10. <button id="Button4" label="Special Button 1" onAction="CallControl" imageMso="HappyFace" />
  11. <button id="Button5" label="Special Button 2" onAction="CallControl" imageMso="HappyFace" />
  12. <button id="Button6" label="Special Button 3" onAction="CallControl" imageMso="HappyFace" />
  13. </group>
  14. </tab>
  15. </tabs>
  16. </ribbon>
  17. </customUI>

The output from this XML is shown below:

4 Comments

4 Responses to 'Modifying the Ribbon – Part 2'

Subscribe to comments with RSS or TrackBack to 'Modifying the Ribbon – Part 2'.

  1. Annemarie said,

    on November 7th, 2007 at 1:25 pm

    This is really Great! Everything worked as described. Thank you so much. But...how can I specify my own custom icons? Or any other icon? Where do the icons "live" and what is the file format?

    Thanks again for a very clear explanation.

  2. Ken Puls said,

    on November 7th, 2007 at 1:57 pm

    Hi Annemarie,

    For choosing other Microsoft images, see part 3 of my Ribbon blog posts here: http://excelguru.ca/blog/2006/11/26/modifying-the-ribbon-part-3/

    You may also be interested in a tool to make the browsing easier. You can find one here: http://www.excelguru.ca/blog/2007/05/05/identifying-your-imagemso-excel-word-powerpoint/

    Using your own custom icons is described in part 4 of my series here: http://excelguru.ca/blog/2006/11/27/modifying-the-ribbon-part-4/

    Hope this helps!

    Ken

  3. ayaz hoda said,

    on May 29th, 2008 at 11:57 pm

    How could we open customize ribbon in Access 2007 development mode

  4. Ken Puls said,

    on May 30th, 2008 at 8:46 pm

    I'm not sure I quite follow that question... What is it you are trying to do?

Post a comment