Outlook 2013 view regions: Explorer pane, Navigation Pane, ToDo bar, Preview pane

When building an Outlook add-in you will definitely confront scenarios that require custom forms. In these scenarios, you must answer two questions:

1. What does the form need to do?
2. Where does the form need to display?

You are on your own with the first question. That’s up to you to figure out with your users. But the second question… that I can help you with.

By using Add-in Express, you have more options for displaying a custom form than Visual Studio provides out-of-the-box. We’ll cover these options in two parts. Today, in part 1, we’ll take a look at custom Outlook view regions. These are sub-panes that reside in the Outlook Explorer window (as opposed to the Inspector window) and host native .NET forms.

In this article, I’ll show you how create forms and display them in the following Outlook regions:

• Explorer pane
• Dock pane
• Navigation pane
• ToDo bar
• Preview pane
• Folder View region
• Web View region

Create an Outlook add-in project

So, why don’t you open Visual Studio 2012 or lower and create a new ADX COM Add-in project choosing VB.NET, C# or C++ as you programming language? It’ll be more fun if you do because you’ll be able to follow along. I’ll even let you name the project whatever you want.

I named mine ExplorersPanesRegionsAndMore (available for download at the end of the article).

What we’ll do now is create seven (that’s right 7!… my favorite number) Outlook view regions. The steps are basically the same for each but there are differences.

Explorer Pane

The Explorer pane can reside within four areas. For the sake of clarity, I created the illustration below:

You can disregard the green square sections for now. We’ll cover them later.

Create a custom Outlook form

To build the form, we’ll make use of an Add-in Express project template called the ADX Outlook Form.

1. In the Visual Studio menu, click Project > Add New Item. In the Add New Item dialog box, expand the Add-in Express Items node and click Outlook. The item you want is the ADX Outlook Form. Click it, name it ExplorerPane, and click the Add button.
2. Visual Studio will display this warning:Don’t worry about it for now. We’ll get to the meaning of this in the next sub heading, titled Configure the form display. Just click OK and set it aside for now.
3. Visual Studio will add the form to the project and open its code window… but we need to open it in design view. So, right-click ExplorerPane.cs and click View Designer from the context menu.
4. We are not going create any fancy designs so the property modifications will be kept to a minimum today. Just set the following:
   • BackColor = 128, 255, 128
   • Text = Explorer Pane
   • Size = 407, 123

The ExplorerPane should now look a bit like this:

Creating and designing the form is one thing but, it’s only 50% of the job. It’s time to deal with that alert from step #2.

Configure the custom form display

For each form we add, we need to create some configuration settings that specify how the Outlook addin will display our custom form. You use the AddinModule plus an ADX Outlook Forms Manager to create the display settings… as follows:

1. Find the AddinModule in the Visual Studio solution explorer window and open it in design view.
2. Right-click the AddinModule and click Add Outlook Forms Manager.
3. Select adxOlFormsManager1 and you can see its visual design at the bottom.
   You can use the designer to add new items to its Items collection or you can use the property window. I prefer to use the property window because it allows you to utilize the ADXOlFormsCollection Editor window.
4. In the properties window, click the “… ” button of the Items property.
5. Click add to create a new collection then set the following properties:
   • Name = ExplorerPane
   • ExplorerItemTypes = Mail
   • ExplorerLayout = BottomSubpane
   • AlwaysShowHeader = True
   • FormClassName = ExplorersPanesRegionsAndMore.ExplorerPane
   • UseOfficeTheme = False

And done (at least with this pane)! What you just did is configure the ExplorePane to display in the Outlook Explorer window’s bottom sub pane. It will show a header and will not use the Office theme. If we did use the Office theme, the theme would override the artistic green background color. We don’t want that. Today we are artists and will express ourselves artistically. Outlook is our art gallery…

We have a few more forms to build. We’ll move more quickly because you now have the hang of it.

DockPane

Let’s handle the outer rim of the explorer window and add a form that will display in the DockTop region. The Dock panes can also reside within four areas:

1. Add another ADX Outlook Form to the add-in project and name it DockPane.
2. Set the following form properties:
   • BackColor = 255, 192, 128
   • Text = Dock Pane
   • Size = 865, 29
3. Select AdxOlFormsManager1 in the AddinModule design window.
4. Find the Items property and click the “… ” button to open the ADXOlFormsCollection Editor. Click add and set the new collection’s properties:
   • Name = DockPane
   • ExplorerItemTypes = Mail;Appointment;Contact;Task;Journal;Note;Post;DistributionList
   • ExplorerLayout = DockTop
   • AlwaysShowHeader = True
   • FormClassName = ExplorersPanesRegionsAndMore.DockPane
   • UseOfficeTheme = False

You’re all set. During run-time, this form will display just under the ribbon. It’s pretty, no?

Custom forms for Navigation pane

The Navigation pane resides on the left-hand side of the Outlook explorer window (see the mockup image in the Explorer section). We can place a custom form just below it. All it takes is this:

1. Add an ADX Outlook Form to the add-in project and name it NavigationPane.
2. Set the following form properties:
   • BackColor = 255, 192, 255
   • Text = Navigation Pane
   • Size = 150, 150
3. Select AdxOlFormsManager1 in the AddinModule design window.
4. Find the Items property and click the “… ” button to open the ADXOlFormsCollection Editor. Click add and set the new collection’s properties:
   • Name = NavigationPane
   • ExplorerItemTypes = Mail;Appointment;Contact;Task;Journal;Note;Post;DistributionList
   • ExplorerLayout = BottomNavigationPane
   • AlwaysShowHeader = True
   • FormClassName = ExplorersPanesRegionsAndMore.NavigationPane
   • UseOfficeTheme = False

Here our custom form is run-time, right underneath the Outlook Navigation pane:

Custom forms for ToDo Bar

The ToDo Bar is like the Navigation but resides on the right-hand side of the Outlook explorer window (see the mockup image in the Explorer section). The steps are the same, only the location changes…

1. Add yet another ADX Outlook Form to the add-in project and name it ToDoBar.
2. Set the following form properties:
   • BackColor = 255, 128, 128
   • Text = ToDo Bar
   • Size = 150, 150
3. Select AdxOlFormsManager1 in the AddinModule design window.
4. Find the Items property and click the “… ” button to open the ADXOlFormsCollection Editor. Click add and set the new collection’s properties:
   • Name = ToDoBar
   • ExplorerItemTypes = Mail;Appointment;Contact;Task
   • ExplorerLayout = BottomToDoBar
   • AlwaysShowHeader = True
   • FormClassName = ExplorersPanesRegionsAndMore.ToDoBar
   • UseOfficeTheme = False

Unfortunately, Outlook 2013 doesn’t support the BottomToDobar. So here is a screenshot of Outlook 2010 showing our custom ToDo bar.

Preview pane

The preview pane areas surround the Outlook explorer’s preview window:

They are an ideal place to display elements that will be helpful to the user while reading an Outlook item in the preview pane. Let’s add one:

1. Yep, you guessed… add an ADX Outlook Form to the add-in project. This time, name it PreviewPane.
2. Set the following form properties:
   • BackColor = 128, 255, 255
   • Text = Preview Pane
   • Size = 143, 513
3. Select AdxOlFormsManager1 in the AddinModule design window.
4. Find the Items property and click the “… ” button to open the ADXOlFormsCollection Editor. Click add and set the new collection’s properties:
   • Name = PreviewPane
   • ExplorerItemTypes = Mail
   • ExplorerLayout = RightReadingPane
   • AlwaysShowHeader = True
   • FormClassName = ExplorersPanesRegionsAndMore.PreviewPane
   • UseOfficeTheme = False

Here is our Reading Pane from, looking good in a happy shade of blue:

Both of the next customizations replace the grid-view of a folder and allow you to what you want instead.

Folder View regions

The Folder View region allows the user to switch the display between your custom form and Outlook’s typical view.

1. Second to last time… .add an ADX Outlook Form to the add-in project. This time, name it FolderView.
2. Set the following form properties:
   • BackColor = LightSkyBlue
   • Text = Folder View
   • Size = 740, 580
3. Select AdxOlFormsManager1 in the AddinModule design window.
4. Find the Items property and click the “… ” button to open the ADXOlFormsCollection Editor. Click add and set the new collection’s properties:
   • Name = FolderView
   • ExplorerItemTypes = Task
   • ExplorerLayout = FolderView
   • AlwaysShowHeader = True
   • FormClassName = ExplorersPanesRegionsAndMore. FolderView
   • UseOfficeTheme = False

Take a gander:

Notice the menu in the upper right-hand corner. The user can use this menu to change the display to the custom view region and the standard Outlook display.

Something else to note: folder view regions work with everything but calendar folders in Outlook 2013 – 2010. I don’t know why Microsoft changes these things.

WebView region

Web view regions are like Folder Views but without the option to toggle back to the standard Outlook view. You create them the same was you do Folder view regions but with, you set the ExplorerLayout property to WebViewPane. Here is what it looks like at runtime:

Use the web view option when you want to take steps to ensure the user sees your form in targeted folder(s).

***

That’s a quick lap around the different location options for displaying you custom forms in the Outlook Explorer window. All that’s missing here is your business logic.

For more information about Outlook view regions please see:

• Outlook view and form regions basics
• Outlook view regions: To-Do bar, Navigation and Reading pane

Available downloads:

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

Outlook view regions sample

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

• Part 1: Outlook add-in development: Outlook Application and base objects
• Part 2: Creating custom Outlook views
• Part 3: Creating custom Outlook forms
• Part 4: Outlook UI – Explorer and Inspector Windows. What is customizable?
• Part 5: Customizing Outlook main menu, context menus and Backstage view
• Part 6: Creating custom Outlook ribbons and toolbars
• Part 7: Advanced view regions for Outlook 2013 – 2003
• Part 8: Advanced form regions for Outlook 2013 – 2003
• Part 9: Working with Outlook Accounts, Stores, Folders and Items
• Part 10: Working with Outlook calendar
• Part 11: Working with Outlook tasks