Pieter van der Westhuizen

Creating a custom ribbon for Outlook 2013, 2010 and toolbar for Outlook 2007, 2003 – C# sample

The Outlook UI provides a lot of customization options, but one thing almost all Outlook add-ins share is either a ribbon tab or a toolbar or two. The Ribbon UI was introduced in Office 2007 although only the Inspector windows actually used it. The Explorer window still used the traditional menus and toolbars from previous Outlook versions.

Whichever version of Outlook you decide to develop for, Add-in Express for Office and .net provides visual designers and tools for both the Ribbon UI as well as for toolbars. Add-in Express fully supports Outlook 2013, 2010, 2007 and 2003 and works with Visual Studio 2012 – 2005 (C#, VB.NET or C++ .NET) .

Creating a custom Outlook ribbon

Before you can create your own Outlook ribbon, you need to add an ADXRibbonTab component to the AddinModule designer surface.

Adding a Ribbon Tab component to the AddinModule designer surface

When you select the ADXRibbonTab component in Visual Studio, the visual designer will become active. When designing your Ribbon Tab, you need to follow a certain hierarchy, for example, any control you add to the Ribbon Tab, needs to be inside a Ribbon Group first.

You can add a Ribbon Group by clicking on its toolbar button inside the visual designer. The visual designer will display the control hierarchy as well as a preview of what the Ribbon Tab will look like inside Outlook.

The Ribbon Tab designer

You need to stipulate the Ribbons property in order to specify where in Outlook your ribbon tab should be displayed.

Configuring Configuring the Ribbons property to specify where your custom ribbon tab should be displayed in Outlook

Find more about Ribbon designer.

Ribbon context-sensitivity

This property is available on all ribbon controls and it enables you to display or hide different controls based on the type of item in Outlook. Consider the following ribbon design:

Context-sensitive ribbons for Outlook mail and contact items

The Ribbons property of the first ribbon group is set to OutlookMailRead and OutlookMailCompose. The second ribbon group’s Ribbons property is set to OutlookContact. When building and running the add-in in Outlook, you’ll only see the first ribbon group when you either edit or open an e-mail.

The custom ribbon group is displayed when you edit or open an e-mail.

The second ribbon group will be visible when you have a contact inspector window open. Be careful thought, for this to work the Ribbon Tab’s Ribbons property needs to be set to OutlookMailRead,OutlookMailComposeandOutlookContact.

The ribbon group will be visible when you have a contact window open.

Creating a custom Outlook toolbar

Creating a custom toolbar or a commandbar for any pre-ribbon versions of Outlook 2007, 2003 and 2000 is done in a similar fashion as creating ribbons. However, Add-in Express provides two separate command bar components for pre-ribbon versions of Outlook:

  • ADXOLExplorerCommandBar
  • ADXOLInspectorCommandBar

The names of the two components are pretty self-explanatory. When you would like to add controls to an existing or create a new toolbar for the Outlook Explorer window, you would need to use the ADXOLExplorerCommandBar component.

Use the ADXOLExplorerCommandBar component to create a custom toolbar for the Explorer window.

For all other pre-ribbon Outlook Inspector windows you would need to use the ADXOLInspectorCommandBar component.

Use the ADXOLInspectorCommandBar component for Outlook 2007 and 2003.

When you select the ADXOLExplorerCommandBar component in Visual Studio, Add-in Express will display a visual designer for you, to visually design the toolbar.

Add-in Express provides a visual designer to design custom toolbars.

The visual designer also comes with its own toolbar that contains all the standard commandbar controls you can add. However, I want to draw your attention to a very special control: the CommandBar Advanced Control.

This control gives you the ability to embed any non-Office control to an Outlook toolbar. This can include anything from a date picker to a tree view control!

Find more about Toolbar designer.

Advanced Toolbar control

Once you’ve added an advanced command bar control to your toolbar, you need to add the control you want to embed to the AddinModule designer surface. In this example, I’ve simply dragged a DateTimePicker control onto my designer surface.
Next, you’ll need to add an Outlook Control Adapter control onto the designer surface as well. You’ll find this control in your Visual Studio toolbox, under the “Toolbar Controls for Microsoft Office” group.

Adding the Outlook Control Adapter onto the designer surface

With the control adapter in place, select the advanced command bar control and select the name of the Date Picker control in the drop-down list next to the Control property.

Selecting the DateTime Picker control

With the controls and properties in place, we can build, register and run our Outlook add-in project. When you have your Inbox open in Outlook 2007 and earlier, you should see the following toolbar:

A custom toolbar in Outlook 2007

Toolbar context-sensitivity

As with the ribbon control you can also display a toolbar or certain controls on the toolbar depending on the folder name or item types (Mail, Contact, Task, Calendar etc.). If you want to show the toolbar when a certain folder is selected, specify the folder name in the FolderName property. If you need it to show for a collection of forms, add their folder names to the FolderNames property.

If you want to show your custom toolbar for a certain folder, specify the folder name in the FolderName property.

If, for example, you would only like to show certain components on the toolbar based on which type(s) of item is selected, select the toolbar component and either specify the Outlook item type in the OlExplorerItemTypes or OlInspectorItemTypes property depending on whether you’re using an Explorer or Inspector toolbar.

Specify the Outlook item type(s) for which you want to display your custom toolbar.

And as easy as that you can have a toolbar which only shows or hides certain controls depending on the types of items or folders that are selected.

Thank you for reading! Until next time, keep coding!

Outlook 2013 add-in development in Visual Studio 2012 for beginners

You may also be interested in:


Post a comment

Have any questions? Ask us right now!