Creating add-ins for Outlook: custom ribbon & command bar in one project (C#, VB.NET)

Despite what some promulgate as software development best practices, I like to start my projects by sketching what I envision. I don’t conduct interviews. I don’t write requirements. I thumb my nose at all type-A project manager types and don’t make a plan. At least not at first… because what good idea ever started with a plan or methodology? I dare say none!

And so it is with the development of Ty Actions Add-in for Outlook. There are many features Outlook provides that work well but not 100% how I want. A good example is the ability to create a task from an email. I can drag and drop an email into Outlook Shortcut Bar’s task panel (see video below) and Outlook will create a new task.

Video: Creating Outlook 2010 task from an email

The new Outlook task will have the same subject and body as the originating email but nothing more. This situation has bothered me for too long. I have decided to do something about it. And for the sake of posterity and the benefit of everyone, I’ve decided to write about it.

And why not? Add-in Express provides Outlook specific components that help people like you and I (VB.NET, C# and C++.NET Outlook add-in developers). So let’s get to it. This article is the first in the “Outlook 2010 addin development” series that began with this rough set of requirements.

They will change but, for now, the requirements for this add-in are:

1. Provide the capability to create a task, appointment, or note from an email.
2. Extend the default “Create task” functionality to do more than Outlook does by default. I know, this is nice and vague but it will take a more definitive shape soon enough.
3. Provide custom toolbars (Ribbon or Commandbar) for Outlook’s Explorer and Inspector windows.
4. Support both Outlook 2007 and Outlook 2010.

In this article, I’ll tackle requirements 3 & 4. These two requirements highlight how easy it is, using the Add-in Express toolset, to

1. Support multiple versions of Outlook (2013, 2010, 2007, 2003) from a single code base and
2. Design custom toolbars (I refer to the Ribbon and traditional Office command bars collectively as toolbars) that are smart, and automatically display in the correct version of Outlook.

Features like these save a significant amount of effort and allow you to get on with developing your business logic.

Creating the Outlook add-in project in Visual Studio

For this example, I’m using Visual Studio 2010 along with the Add-in Express for Office and .net toolset. We have several articles and videos on this blog that show how to create the initial addin project (most recent is Outlook 2010 Solutions Module). If you don’t leave me to see how it’s done, I created this short video that shows what to do.

Video: Creating a COM addin for Outlook

Okay – I’ll assume you followed the video and successfully created an Add-in Express-based Outlook COM Add-in project. By the way, I’m testing an idea I have about combining short videos inside articles. I’d love to know what you think (via the comments area).

Building the Outlook custom ribbon

Per my requirements, this add-in will support Outlook 2007 and 2010. This is a significant requirement because Outlook 2007 has mixed support of the ribbon. The explorer windows utilizes the traditional Office command bars while the Inspector windows utilize the Ribbon. Personally, I have no idea why Microsoft did that. Outlook 2010, however, fully supports the ribbon.

This situation impacts my add-in development efforts; requiring me to include a custom ribbon and a custom command bar. Let’s first tackle the Outlook ribbon.

Make sure you have the AddinModule open in design view, then complete the following steps:

1. Add a new ribbon tab component (ADXRibbonTab) to the design surface. You can use the AddinModule’s toolbar or you can right click on the design surface and select it. Either way, the result is the same.
2. Click the AdxRibbonTab1 object to display the ribbon designer. If it isn’t visible, you can click the chevron in the lower right-hand corner of the AddinModuledesigner. You only need to configure two properties…
   • Caption = My Actions
   • Ribbons = OutlookMailRead;OutlookMailCompose;OutlookExplorer
3. Add a ribbon group control – ADXRibbonGroup
   • Caption = Make Things From Email
4. Add an ImageList control.
   • ColorDepth = Depth32Bit
   • Size = 32,32
5. Add images to ImageList1’s Images collection. Be careful to use icons that are 32×32 pixels. The icons provided by Visual Studio work nicely. It doesn’t matter which you choose at this point. Just choose three… you can change later if you want.
6. Add a ribbon button control – ADXRibbonButton
   • Name = btnCreateTask
   • Caption = Create Task from Email
   • ImageList = ImageList1
   • Image = 0
   • Size = Large
7. Add one more button control – ADXRibbonButton
   • Name = btnCreateAppointment
   • Caption = Create Task from Email
   • ImageList = ImageList1
   • Image = 1
   • Size = Regular
8. Add a third ADXRibbonButton control
   • Name = btnCreateNote
   • Caption = Create Note
   • ImageList = ImageList1
   • Image = 2
   • Size = Regular

The new Outlook ribbon design is done and should look something akin to this:

Not bad for just a few minutes of work. You can consider this ribbon designed and ready for some code. It will automatically display in the following Outlook windows:

• Outlook 2010 Explorer
• Outlook 2010 Inspectors
• Outlook 2007 Inspectors

It’s almost too easy. Do you feel guilty that you didn’t have to wire the display code yourself?

Building the Outlook 2007 Explorer command bar

Creating the CommandBar for our Outlook plug-in is just as quick as the ribbon. Per my requirements, I need to include it due to Outlook 2007’s rather strange lack of ribbon in the Explorer windows. No big deal, it’s part of the fun… just complete these short steps:

1. Add a commandbar component (ADXOLExplorerCommandBar)to the AddinModule’s design surface. Configure the following properties:
   • ItemTypes = Mail
2. Add a command bar button (ADXCommandBarButton) to AdxOlExplorerCommandBar1.
   • Name = cbbCreateTask
   • Caption = Create Task
   • ImageList = ImageList1
   • Image = 0
   • Style = adxMsoButtonIconAndCaption
3. Add an ADXCommandBarButtonto AdxOlExplorerCommandBar1.
   • Name = cbbCreateAppointment
   • Caption = Create Appointment
   • ImageList = ImageList1
   • Image = 1
   • Style = adxMsoButtonIconAndCaption
4. Add an ADXCommandBarButtonto AdxOlExplorerCommandBar1.
   • Name = cbbCreateNote
   • Caption = Create Note
   • ImageList = ImageList1
   • Image = 2
   • Style = adxMsoButtonIconAndCaption

Just like that, we are done with the design. Your custom Outlook command bar should look something like the image above.

One tiny bit of code

Now, there is one bit of code we need to write. This code will prevent the Explorer toolbar from displaying within the Add-Ins tab of the Outlook 2010 or 2013 ribbon. Add-in Express will display a custom explorer toolbar in this tab to support backward compatibility. But because we are implementing a custom ribbon for Outlook 2010, we want to prevent the toolbar from displaying in the Add-Ins tab.

To accomplish this task, open the AddInModule in Code View. Then insert the following code:

VB.NET code sample

Private Sub AddinModule_AddinInitialize(sender As Object, e As EventArgs) _ 
	Handles MyBase.AddinInitialize
 
	' Outlook 2010 = 14
    If Me.HostMajorVersion >= 14 Then
        AdxOlExplorerCommandBar1.UseForRibbon = False
    End If
End Sub

The code is elegant in its simplicity. It checks the version of Outlook using the HostMajorVersion property. If we are working with Outlook 14 or above, the code prevents the toolbar from displaying, leaving our lovely ribbon alone to impress our users.

Outlook add-in in action – works as advertised!

Now to prove to you our Outlook COM add-in works as promised, just watch this quick video in which I build the project, register it, and show off the magic!

Video: Custom command bars and ribbon tabs for Outlook

Video: Custom ribbon tabs for Outlook 2010 Explorer and Inspector

See you soon for Part 2 when I show you how to write some amazingly meaningful code (at least for a demo). I promise, it will be code you can steal for your own projects.

Available downloads:

This sample Outlook plug-in was developed using using Add-in Express for Office and .net:
VB.NET – Ty Actions Outlook Add-in

How to write better Outlook add-ins: C#, VB.NET

• Part 2: How to create an Outlook task, appointment or note from an email
• Part 3: How to work with Outlook objects and events
• Part 4: How to customize Outlook main menu and context menus