Ty Anderson

Creating add-ins for Outlook 2010, 2007: 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 2010 and 2007. 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.

A sketch of the Ty Actions Outlook Add-in

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 2007 and 2010

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:

Custom Outlook ribbon tab in the Add-in Express visual designer

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

Custom Outlook command bar in Add-in Express visual designer at design time

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 2007

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

10 Comments

  • https://secure.gravatar.com/avatar/60de9d9f254e1a01c3221a17dbf23748?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G vaishali says:

    Plz let me know,
    how to create outlook plugin in C#.
    this is only way or other way..

    basically,
    1..zzz is a company having website.
    n i want to read all mails in outlook..
    plz explain the way ofmy Q

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hi Vaishali,

    It is not really necessary to build a COM Add-in for this purposes. You can create a standard Windows Forms application to read emails from Outlook. You can find the following articles helpful:
    Reading outlook emails from C#
    Access your Email within Outlook

  • https://secure.gravatar.com/avatar/0eb91ae3efa02297a203deb6f60224aa?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Barry says:

    Hi, I’m evaluating your product for one of our projects, and my question is quick. I need to add a custom button to the Outlook Contacts –> Contact (window) –> “Communicate” ribbon group.

    I need to get a button beside the phone icon….same size.

    Any quick tips ?

    Thanks,

    Barry

  • Hello Barry,

    The Office Ribbon API doesn’t allow customizing a built-in Ribbon group. You can try to hide the built-in group and show a custom group containing the same controls plus you control; find more details at https://www.add-in-express.com/creating-addins-blog/2013/06/21/customizing-builtin-office-ribbon-groups/.

  • https://secure.gravatar.com/avatar/0eb91ae3efa02297a203deb6f60224aa?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Barry says:

    So just to make sure I’m clear then; you cannot add to the “Communicate” group, and you cannot modify/over-ride any buttons that are already there, or their functionality ? What we’re looking to do is add a second phone button that triggers some special telephony magic for our customer. The “Communicate” group is where they wanted the new button, and right beside the existing phone button. They might of entertained the idea of over-riding the existing phone button, and branding it with their own image….but sounds like that’s not doable either.

    So if that’s the case, then the best option is to add a custom tab (adxRibbonTab), with it’s own group (adxRibbonGroup)inside it, and then a button (adxRibbonButton) inside the group ?…correct ?

    Thanks,

    Barry

  • https://secure.gravatar.com/avatar/0eb91ae3efa02297a203deb6f60224aa?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Barry says:

    Quick follow-up…can I add a custom group beside the existing group ? so I could still get the custom phone button on the same tab as the “Communicate” group ? My client would prefer that over a custom (different) tab…

  • Hello Barry,

    > So just to make sure I’m clear then; you cannot add to the “Communicate” group, and you cannot modify/over-ride any buttons that are already there, or their functionality ?

    You cannot add any custom control to a built-in group. As to overriding a built-in command, you use the ADXRibbonCommand component; check section “How to intercept or disable a built-in Ribbon control” at https://www.add-in-express.com/docs/net-ribbon-components.php or in the PDF file in the folder {Add-in Express}\Docs on your development PC.

    > but sounds like that’s not doable either

    You can’t just add a custom button to a built-in group; you can hide the built-in group and create a custom one so that it contains [all or some] built-in controls from the built-in group. Still, there’s a non-zero probability that the built-in group use some built-in controls the visual representation of which cannot be replicated using the Ribbon API.

    > can I add a custom group beside the existing group ?

    Yes. See section Positioning Ribbon Controls on the same page.

  • https://secure.gravatar.com/avatar/0eb91ae3efa02297a203deb6f60224aa?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Barry says:

    Thank you for all the valuable information. I’m pouring through all the Microsoft code files (as per section “Positioning Ribbon Controls”), however I’m not seeing much of anything for Contact, and nothing for the “Communicate” group.

    Barry

  • https://secure.gravatar.com/avatar/0eb91ae3efa02297a203deb6f60224aa?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Barry says:

    I got it…so to get a custom group on the Contact screen, and position it beside the Communicate group:

    1) Add a adxRibbonTab to your module. Set its IdMso = “TabContact” (associate with that built-in tab), and Ribbons = “OutlookContact” (associate with that tabs ribbon).
    2) Add a adxRibbonGroup to the adxRibbonTab. Set InsertAfterIdMso = “GroupCommunicate” and also set its Ribbons = “OutlookContact”.
    3) Add a adxRibbonButton to the adxRibbonGroup. Set Ribbons = “OutlookContact”.

    When I ran my app, I had a new group beside “Communicate”, and inside it I had my custom button, which I tested with a little code behind “MessageBox.Show…”

    Thanks for the tips !

Post a comment

Have any questions? Ask us right now!