Remember those days when customizing MS Office clients (Word, Excel and Outlook) used to be a complicated development task? Well, with new features in Visual Studio, building office apps is much easier and there is much less code to deal with. 

In this blog post, I will discuss the task pane apps for Outlook. Task panes are user interface panels that are typically docked on one side of a window in a Microsoft Office application. Think of the To-Do Bar in Outlook under the View menu that displays a calendar, tasks and people.)

Custom task panes give you a way to create your own task pane and provide users with a familiar interface to access your solution’s features. For example, the interface can contain controls that run code to modify documents or display data from a data source.

To see how easy it is to build a custom task pane app for Outlook, let’s build an app that shows all the attachments from email items in your inbox. As you know, sometimes it’s very time consuming and frustrating when you are looking for that one file sent by someone and you don’t know what to search for because you forgot the name of the file. While the Outlook search feature is great, it returns all the email items matched with your search criteria instead of showing you the file attachment. To make that task bit easier, this simple add-in will help to list all of the attachments with one click.

To keep it simple, here are the high-level steps to build an app:

Start a new project in Visual Studio and select Office Add-In as the project type. Let’s name it “OutlookDrive.”

Build Microsoft Office Apps

To understand the basic concept and common steps in creating task pane apps, I recommend reading this MSDN article Walkthrough: Displaying Custom Task Panes with E-Mail Messages in Outlook.

Once you have the task pane ribbon set up, customize it to look something like this:

Build Office Apps_2

To display the toggle button under the View menu, set the OfficeId property of the RibbonTab control to TabView. Similarly, other options are TabHome and TabFolder to display under the Home or Folder menu.

Next, to display a larger toggle button with the label “Outlook Drive” under it, set the ControlSize property to RibbonControlSizeLarge, assign the button icon and set the Label to “Outlook Drive.”

build office apps 3

Once the toggle button icon and label is set, double-click on the button to capture the click event to show/hide task pane.

Screen Shot 2015-04-14 at 8.29.03 PM

Next, we need to design the task pane UserControl interface and add the controls we’ll need.

Build Office Apps 4

As you can see, we used two labels to show the number of email attachments, one drop-down control to sort the attachments by received date, sender name and file name, as well as a FlowLayoutPanel to populate it with custom UserControl that will display the attachment properties.

We are also using the BackgroundWorker component to do the heavy lifting of going through each email item and pulling the attachment file on another thread so we don’t freeze the main UI thread and slow progress. The figure below shows the UserControl interface that displays each item. It has a PictureBox to show the file type icon and three labels showing the file name, sent by and sent date.

buils office apps 5

Once everything is in place, we’ll run the following code in the BackgroundWorker’s “DoWork” event to populate the task pane with email attachments:

Screen Shot 2015-04-14 at 8.32.15 PM

The code is simple and self-explanatory, but I’d like to point out few things. To ignore the embedded images in the email body like signature, etc., you need to check the following property tag:

Screen Shot 2015-04-14 at 8.39.53 PM

If the value is not an empty string, then ignore that attachment.

Another piece of code I like to share is checking the file extension and displaying an icon from local resources like Outlook displays for each attached file. Since the attachment found in the email is not a physical file stored on a local disk, you need to save it in a temp folder to get the correct extension icon:

Screen Shot 2015-04-14 at 8.41.48 PM

In this snippet, the line Icon.ExtractAssociatedIcon(strTempFile) extracts the correct file type icon and returns an ICO file.

If everything works well, the result will be something like this:

Ribbon button under View menu:

build office apps 6

Task pane showing all the attachments:

build office apps 7

As you can see, in a few lines of code we have our task pane app up and running. It’s that easy to customize Office clients in order to enhance features or integrate with other applications.

I hope this blog post provided some helpful tips to get you started with MS Office app development. Also, be sure to take some time to learn more about the newly announced Microsoft Visual Studio 2015 product editions.