Pieter van der Westhuizen

The Outlook UI: Explorer and Inspector Windows. What is customizable?

It can take some time to familiarize yourself and understand the various different components of the Outlook UI. Outlook is made up of windows, panes and forms. The two types of Outlook windows are Explorer and Inspector windows.

So you might be asking: “What exactly can I customize in both the Explorer and Inspector windows?” This article will give you an overview of what to expect from Outlook when you’re ready to start customizing.

Customizing the Outlook Explorer window

When you initially start Outlook the first window you will see is the Explorer window, this window contains a folder/navigation and view pane and, depending on whether the user enabled it, the reading pane. It can also display the To-do bar, dependant on whether the user decided to show it.

Outlook Explorer window

Custom Explorer ribbons

The ribbon UI is used throughout the entire Microsoft Office suite and is also one of the most customized components. The ribbon consists of a number of various components and Add-in Express provides visual designers for all of these components.

The following image illustrates the visual designer that Add-in Express for Office and .net added to Visual Studio, which you can use to visually design your Outlook ribbons.

Designing a custom Outlook ribbon in Visual Studio using the Add-in Express Ribbon designer

Your ribbon will adopt the Outlook 2013 look when running. As you can see from the following screenshots different ribbon controls can be nested to create complex ribbon layouts.

A complex ribbon layout with various controls

The Outlook ribbon is context-sensitive, which means it will change as the user uses different aspects of Outlook. For example, when clicking inside the search box of the Outlook Inbox, the Search ribbon tab becomes visible and active. When the user clicks outside of the search box, the ribbon returns to its usual layout.

A custom ribbon for the Outlook Search tab

With Add-in Express, adding the same functionality to your own custom ribbon tab is as easy as setting the Context property of the ribbon.

Setting the Context property of a custom ribbon

For example, by setting it to Outlook.TabSetSearch my custom ribbon tab will now only be visible when the user clicks in the Outlook search box.

A context-sensitive ribbon for the Outlook search box

Customizing Outlook context menus

Context menu (aka right-click menu) is the menu that is visible when a user right-clicks on a specific item in Outlook. You can add you own menu items to these context-menus by either using the Add-in Express Context menu component for Outlook 2007 and earlier, or the Ribbon Context menu component for Outlook 2010 and 2013.

As with the ribbon designer, Add-in Express also provided a visual designer for context menus in Visual Studio.

Add-in Express designer for customizing the context menu

In Outlook 2013 and 2010, any custom items you add to a context-menu will be appended at the bottom of the menu.

Custom items added to the context menu in Outlook 2013

Customizing the Outlook Navigation Pane

The Navigation Pane is used to switch between different modules in the Outlook Explorer, such as Calendar, Contacts and Mail. It also contains a list of folders for each module. From Outlook 2013 this module navigation has moved to the bottom of the Outlook Explorer window.

You have two options when customizing the navigation pane:

  • Add a custom region to the bottom of it; or
  • Add your own pane by creating your own solution module.

Add-in Express has a powerful framework for creating form and view regions in Outlook. Adding such a region to the bottom of the Outlook Navigation pane provides you with immense flexibility. You can include any component which you can add on a standard Windows form to your own custom region.

A custom region can be embedded to the bottom of the Outlook Navigation pane

Adding your own solution folder on the other hand, creates an entry in the navigation list and a separate folder view. This gives you a lot of flexibility when combined with other Add-in Express components.

Custom folders added to Outlook 2013 solution module

Folder view pane

The Folder view pane as its name suggests provides a view on the contents of the selected folder. Using the Add-in Express custom view regions you can add your own UI to this pane. When setting the region’s ExplorerLayout property to FolderView, Add-in Express adds a header to the folder view with two navigation arrows, enabling your user to switch between the standard Outlook folder view and your custom region.

Custom regions can be added to the Folder view pane

You can also add your regions to the top, bottom, left or right hand side of the folder view and even enable your user to drag the region to where they want it docked. Add-in Express automatically shows a visual indication as to where the region can be dragged to.

You can add your regions to the top, bottom, left or right hand side of the folder view and even enable your user to drag them.

Customizing the Outlook Reading Pane

The standard Outlook Reading pane can be docked to either the right or bottom of the folder view or completely switched off by the user. When it comes to customizing the reading pane using Add-in Express advanced regions, you have similar layout options as with the Folder view. By setting the region’ ExplorerLayout property to ReadingPane Add-in Express will add the two navigation arrows and a dropdown list to navigate between all the available regions.

Customizing the Outlook Reading Pane

You’re also able to dock your custom region to the top, bottom, right or left hand side of the reading pane. As with the folder view a visual indicator will show which areas you can drag your region to.

You can dock your custom region to the top, bottom, right or left hand side of the reading pane.

Customizing the Outlook Inspector window

Every time you open an e-mail, appointment, task or contact in Outlook, you’re looking at an Inspector window. In short, Inspector windows provide a window to create new, or edit and read existing items in Outlook. Inspector windows can be customized using form regions and the ribbon UI.

An Outlook Inspector window

Custom Inspector ribbons

As with the Explorer window, you can add your own ribbon tab to any Inspector window. You’ll design the layout as you would any ribbon using the Add-in Express visual designers built into Visual Studio.

You’ll need to specify for which Inspector window you want to show your custom ribbon tab by setting its Ribbons property.

Specify for which Inspector window you want to show your custom ribbon tab.

By selecting OutlookContact as the value for the Ribbons property, the custom ribbon tab will be visible on all contact inspector windows.

A custom ribbon tab will show up on all contact inspector windows

Inspector form regions

Inspector windows have six possible layout locations for form regions:

  • TopSubPane
  • BottomSubPane
  • RightSubPane
  • LeftSubPane
  • InspectorRegion
  • CompleteReplacement

As with all view and form regions, you do have the option to enable drag and drop for Inspector regions and a visual indication of possible drop location will automatically be shown to the user.

You can enable drag and drop for Inspector regions.

Customizing the Backstage view

The Backstage view was introduced in Outlook 2010 and has essentially replace the File menu of both the Explorer and Inspector windows. This new menu structure provides a rich representation of various program options to the user and can also be customized using the Add-in Express BackstageView component.

As with all the Add-in Express components you can use the visual designer to design the layout of the backstage view.

Add-in Express provides a visual designer to design the layout of the backstage view

In Outlook, when opening a contact and clicking on the File menu, you will see the changes you’ve made to the Backstage view.

A custom item added to the Backstage view in Outlook 2013

This was a quick overview of what you can expect when customizing Outlook and by using Add-in Express. In the coming articles we’ll take a closer look at how to customize various aspects of the Outlook UI.

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:

2 Comments

  • Cesare Cogliandro says:

    It isn’t possible!!! There’s not a way to change by code the stores order in the navigation pane???

    Very useful tutorial. Congratulations.
    But… if you know a way to order stores… please, send me a note.
    Thanks in advance

    Cesare Cogliandro

  • Andrei Smolin (Add-in Express Team) says:

    Hello Cesare,

    Alas, the Outlook object model doesn’t provide a way to achieve this.

Post a comment

Have any questions? Ask us right now!