Ty Anderson

Customizing Outlook main menu, context menus and Backstage view

Often, the focus of an Outlook add-in centers around a custom ribbon or form region. I think this makes sense. They are sexy, upfront, and what everyone wants to see. But they are not enough. A good Outlook solution should provide other user interface customizations that allow the user to execute your solution’s logic.

These other methods are, arguably, the less-sexy, more utilitarian UI components. The “geeks”, if you will. They are there when you need them. They are not always obvious, but they are there and they are clever.

I am referring of course to the main menu, context menus, and the backstage. And today, I’ll show how to build them so you can include them in your Add-in Express based Outlook solutions.

Create an Outlook COM add-in

The first thing you want to do is open Visual Studio and create a new ADX COM Add-in project using Add-in Express for Office and .net. As you click-through the New Microsoft COM Add-in wizard, specify the following:

  • Language = Visual Basic.NET
  • Minimum supported Office version = Microsoft Office 2003
  • Supported Applications = Microsoft Outlook

Choose the programming language and the minumum Office version for your add-in to support.

Choose Outlook as the supported host application.

After you do that, just keep clicking the Next and Finish and you’ll soon have a project to use while you following along. For the sake of our conversation, this addin provides various Outlook task features and it must work with Outlook 2003 to Outlook 2013.

Customize the main menu in Outlook 2007 – 2000

The Main Menu is the primary command bar (or toolbar) of non-Ribbon Office applications. Given the prevalence of the ribbon with recent Office versions, you’ll need to build a main menu if you want to support older Office versions. In Outlook’s case, customizing the main menu is relevant to Outlook 2007, 2003 and older.

The Outlook main menu, aka menu bar, is the main toolbar that contains the File, Edit, View, et al. commands. It’s the ideal place to locate menu buttons that should always be available.

To customize the Outlook menu bar, add an ADXMainMenu control to the AddinModule’s design surface. Now click it so it is active and its visual designer displays. We are just a few steps away from a really kick-ass main menu.

  1. Select the AdxMainMenu1 control and set…
    • Name=MyTasks
    • CommandBarName=Menu Bar
    • SupportedApp=Outlook
    • Temporary=True
  2. Add an ADXCommandBarButton to menu bar and set…
    • Caption=Create Task
    • FaceID = 1100
  3. Add an ADXCommandBarPopup control to the menu bar.
    • BeginGroup=True
    • Caption=Set New Deadline
    • OlExplorerItemTypes=Mail
    • OlInspectorItemTypes=Mail
    • Add five more ADXCommandBarButtons and set their captions as Today, Tomorrow, This Week, Next Week, and Some Other Day respectively.

That’s it. Your customized Outlook main menu should look a bit like this image below.

A customized Outlook main menu at design time

I decided to use the icons of built-in controls for my menu. I found the value of their FaceID by using our Built-in Controls Scanner. This is a must-have tool.

I only set the FaceID for the Create Task button. Why don’t you give the scanner a try and specify the FaceID values for the other controls in the menu?

Customize Outlook context menus

Context menus, aka right-click menus, enhance the user experience by allowing the user to invoke a useful command by right-clicking their mouse. As their name implies, the current context matters. As the user navigates to different folders that contain different types of Outlook data, they are looking to take different types of actions. You will want to anticipate their needs and provide useful commands using two different Add-in Express controls.

Customizing Outlook 2003 and Outlook 2007 context menus

This control is for the non-ribbon versions of Outlook (e.g. 2003). You want to use this control when targeting the traditional, commandbar-based versions. Let’s add one now.

    1. In the AddinModule, click the icon for a new ADXContextMenu.
    2. Select ADXContextMenu1 and set SupportedApp=Outlook in the properties window. The menu is set to display in the Context Menu but you can change it by specifying a different CommandBarName. The thing to keep in mind is a context menu is just another command bar.

Specifying the CommandBarName property

  1. Add an ADXCommandBarButton to the menu bar and set…
    • Caption=Create Task
    • FaceID = 1100
  2. Add an ADXCommandBarPopup control to the menu bar.
    • BeginGroup=True
    • Caption=Set New Deadline
    • OlExplorerItemTypes=Mail
    • OlInspectorItemTypes=Mail
    • Add five more ADXCommandBarButtons and set their captions as Today, Tomorrow, This Week, Next Week, and Some Other Day respectively.

The design of your Outlook context menu should look like this:

A custom Outlook context menu at design time

What it will do is display in the main context menu when the user right-clicks a mail item.

Creating a custom context menu for Outlook 2013 – 2007

The ribbon is a separate set of components than the traditional command bars objects. It has a different architecture too. Therefore, to create a context menu in Outlook versions that support the ribbon (i.e. Outlook 2010 & 2013), we need to build a separate component. This component is the ADXRibbonContextMenu.

  1. In the AddinModule, add an ADXRibbonContextMenu to the design surface.
  2. Select the ADXRibbonContextMenu1 component and set Ribbons=OutlookMailRead;OutlookMailCompose;OutlookExplorer.
  3. Now open the ContextMenuNames property and display its ContextMenuNames dialog box. In the first row, select the Outlook.Explorer.ContextMenuMailItem value. This value will cause the custom ribbon context menu to display in any Outlook Explorer windows that displays mail items.
  4. Click OK to close the ContextMenuNames dialog box.
  5. Add an ADXRibbonButton to the menu bar and set Caption=Create Task.
  6. Add an ADXRibbonCheckbox and set its Caption=Open Task after Creating It. This control is a toggle control and is great for surfacing a setting that changes the behavior of the controls you place on the context menu. The idea with this checkbox is that if enabled, the ‘Create task’ button will show the task after creating it. If disabled, the button will create the task, save it to the task folder, and move on.
  7. Add an AdxRibbonMenuSeparator and place it under the check box control. This will add a dotted line to separate, or group, our controls.
  8. Add an ADXRibbonMenu control to the ribbon context menu.
    • Caption=Hide Email
  9. Add three more ADXRibbonButton controls and place them on ADXRibbonMenu1. Set their captions as For 1 day, For 1 week, and Forever respectively.
  10. Add an AdxRibbonMenuSeparator and place it above the button labeled Forever.

Your custom ribbon context menu should look like this:

A custom Outlook ribbon context menu at design time

For more details, please see Creating custom Outlook menus – VB.NET example.

Custom Backstage View

Microsoft removed the File menu in Outlook 2010 and replaced with a the File tab. The official name for this tab is the Backstage view and it is part of Outlook 2010 and 2013. In these editions of Outlook, when the user clicks the File tab, the backstage view covers the entire Outlook window. At first blush the situation is very confusing but, I suppose, you get used to it soon enough.

The backstage is the place for commands and features that work with Outlook objects. The Ribbon and menus are the place for displaying commands and features that help create items. This is how I interpret Microsoft’s developer guidance for the backstage. How you choose to use it, however, is up to you.

For our sample, we’ll create two versions of the Backstage view. Each includes buttons for sending a status report for the task displayed in an Outlook Inspector window.

Customizing Ribbon Office menu in Outlook 2007

The ADXRibbonOfficeMenu is relevant only to Outlook 2007 inspector windows. For some reason, Microsoft ran out of budget in the Office 2007 development cycle and didn’t include the ribbon in the Outlook explorer window. The situation was made more confusing by the removal of the File menu. Instead, Microsoft gave us a circular button that displays the Office logo. The name for this button is the Office Button.

Using the ADXRibbonOfficeMenu you can customize the Office Button to suit your purposes. For our purposes today, we want to add a few controls that allow the user to send a status report.

  1. Add an ADXRibbonOfficeMenu to the AddinModule.
  2. Select ADXRibbonOfficeMenu1 and set Ribbons=OutlookTask in the Properties window. This settings tells the add-in to display the menu customization only for task items.
  3. Add an ADXRibbonSplitButton to ADXRibbonOffceMenu1 and set…
    • Ribbons=OutlookTask
    • Caption=Send Status Report to…
  4. Add an ADXRibbonMenu to ADXRibbonSplitButton1. This control will host three buttons and no further configuration is required.
  5. Add three ADXRibbonButton controls to ADXRibbonMenu1 and set their caption to My Boss, My Boss’s Boss, and My team respectively.

The design of your custom Office menu should look like the image below:
A custom Office menu item at design time

I’m sure you noticed I added some icons to the controls. You can easily do the same by adding an ImageList control to the AddinModule, filling it with images, and assigning them to the control’s ImageList and Image properties.

Customizing Backstage view in Outlook 2010 – 2013

Now for the finale. Here we’ll create a custom backstage utilized by Outlook 2010 and Outlook 2013. The idea is the same as above… send task reports.

  1. Add an ADXBackstageView control to the AddinModule. Set its Ribbons property to OutlookTask.
  2. Add an ADXBackstageTab. It will automatically include two columns and we will utilize both so keep them. Set the tab’s caption to My Task Actions
  3. Select FirstColumn and add an ADXBackStageGroup control. Set its Caption to Task Options.
  4. Select the PrimaryItem and add an ADXBackstagePrimaryMenu control. Set the caption to Send Status Reports to… .
  5. Select the ADXBackStagePrimaryMenu and add an ADXBackstageMenuGroup. This group will host three buttons. Set its caption to People.
  6. Select the ADXBackstageMenuGroup and add three ADXBackStageMenuButton controls. Set their captions to My Boss, My Boss’s Boss, and My Team. If you want, assign some icons. I did as you’ll see in a bit.
  7. Select TopItems and add an ADXBackStageLabelControl. Set the Caption to You have an option here.
  8. Select TopItems and add an AdxBackstageCheckBox control and set the caption to CC me when sending status reports.
  9. Now let’s tackle the SecondColumn. Select it and add an ADXBackStageGroup. The caption is My Tasks – A Fancy Outlook Add-in. Set the group’s Style property to Warning. This value causes the group to be highlighted.
  10. Select TopItems and add an ADXBackStageLabelControl. Set the Caption to Manage Tasks Your Way.
  11. Last step… add an ADXBackstageHyperlink control to the TopItems section. The caption is Change Product Key.

A custom Backstage view at design time

See the following articles for more information:

A few action screenshots

It’s always fun to see how a design looks during run-time. I’ll close this article with a screenshots of our customizations in action.

Outlook 2003 with custom context menu and custom main menu:

A custom righ-click menu and main menu in Outlook 2003

Outlook 2007 inspector with a custom Office button:

Outlook 2007 inspector with a custom Office button

Ribbon context menu in Outlook 2013:

A custom context menu in Outlook 2013

Outlook 2013 inspector with a custom Backstage view:

A custom Backstage view of a task item in Outlook 2013

Designing and building these Outlook UI customizations takes only few minutes… especially after you know what you’re doing. So rummage around the toolkit, dig-in, and discover what’s possible.

Available downloads:

This sample Outlook add-in was developed using Add-in Express for Office and .net:

VB.NET sample Outlook add-in

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

4 Comments

  • http://0.gravatar.com/avatar/25028625a2830857099e98bb07048f46?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G LaughingJohn says:

    The part entitled “Creating a custom context menu for Outlook 2013 – 2007″ is confusing because you then go on to say “Therefore, to create a context menu in Outlook versions that support the ribbon (i.e. Outlook 2010 & 2013), we need to build a separate component.”

    I believe I’m right in saying that the ribbon context menu does not exist in 2007 and it needs to be handled in the same way as the section entitled “Customizing Outlook 2003 context menus”. So it should say “Customizing Outlook 2003 and 2007 context menus”

  • http://0.gravatar.com/avatar/c68f03884efb33fd95bcfbd9f1078c07?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Ty Anderson says:

    Nice catch LaughingJohn. I made the revision you suggested.
    Thanks.

  • http://0.gravatar.com/avatar/2be5e77b01c08a88e3c59bcc7563bcca?s=32&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G D-Rock says:

    Hi, great blog post!

    What if I wanted to create a context menu for an object within a mail message for instance a hyperlink. So I can right-click on the hyperlink and choose to open it with a specific application?

    Thanks!

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

    Hi D-Rock,

    Yes, you can customize the context menu that appears after right-clicking a hyperlink in the Read or Compose inspectors in Outlook 2010 and 2013. To do this you need to use the ADXRibbonContextMenu component and set its ContextMenuNames property to new string[] { “Outlook.Mail.Read.ContextMenuReadOnlyMailHyperlink”, “Outlook.Mail.Compose.ContextMenuHyperlink” } value.

    I can send you a sample project if you wish.

Post a comment

Have any questions? Ask us right now!