Office 2013 App development: mail, task pane and content apps

One cannot help but think, after reading the marketing write-ups and reviews of Office 2013, that Microsoft wants developers to retire their classic Office Add-ins and focus their development efforts on the new Apps for Office, previously known as Agave. Unfortunately, things are not always as they seem.

Personally, I love the idea of creating my own web-based Office 2013 Apps. Office Web Apps are one of the most exciting things to happen to Office since VBA. The new Office Store will give us a great new way to monetize our add-ins and enable us to deploy to both the desktop and web based versions of Microsoft Office.

In case you are curious on how the Office Apps fit together architecturally, here is an architectural diagram with compliments from Microsoft:

However, as with most technology things, there is a catch when you develop Office 2013 apps. After spending a number of days researching, testing, playing and working with Office 2013 and the new App model, I found that there are a number of limitations with Apps for Office that we do not have with COM bases add-ins.

In this article I’ll highlight some of the great new features of apps for Office 2013 and then take a sane look at some of the limitations:

• Mail apps for Outlook 2013
• Task Pane apps for Excel and Word 2013
• Content apps for Excel 2013

Outlook 2013 mail apps

Microsoft Outlook is by far the most customized application in the Office suite and also my favourite Office application to customize, especially when using COM.

Using the Napa Development tools you can create a Mail app for Office 2013 via the browser.

From there, the Napa tools give you an IDE right in your browser to start developing your Office 2013 App.

You can also edit the project in Visual Studio by clicking the “Open in Visual Studio” button, but for this example we’ll keep things in the browser.

You’ll notice the project layout is pretty straight forward. We have a Content folder that contains the style sheet for Office (Office.css) and an App.css file which you can use to add your own CSS elements. The Page folder contains a Default.html page which will be the start up page for your project (you can specify another start page in the projects’ properties) and finally we have a Scripts folder that contains an App.js file, which can be used to store all your JavaScript logic.

Default.html

If you look at the source for the Default.html file, you’ll notice it looks like a standard HTML page. It references both the Office.css and App.css style sheets:

<link rel="stylesheet" type="text/css" href="../Content/Office.css" />
 
<!-- Add your CSS styles to the following file -->
<link rel="stylesheet" type="text/css" href="../Content/App.css" />

It also has a reference to jQuery and the Office.js files, which are hosted on Microsoft’s content delivery network (CDN) as well as a reference to the App.js file

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
<script src="https://az88874.vo.msecnd.net/api/1.0/office.js"></script>
 
<!-- Add your JavaScript to the following file -->
<script src="../Scripts/App.js"></script>

The good news is, that if you are already comfortable with the jQuery library, you can simply transfer your existing skills without any fuss.

A completely new and foreign object for Office developers would be the introduction of the JavaScript API for Office contained in the Office.js file. This library provides a host of objects, properties, methods and events for developers to use in their apps for Office 2013.

App.js

You’ll use App.js to store all your JavaScript that interacts with Office. When you open it, you’ll notice that a handler for the initialize event of the Office object has already been created for you. This event is very important as it occurs as soon as the environment is loaded and you can start interacting with Office.

Office.initialize = function () {
    $(document).ready(function () {
        var item = Office.context.mailbox.item;
        $('#subject').text(item.normalizedSubject);
        $('#from').text(item.from.displayName);
        $('#to').text(item.to[0].displayName);
    });
};

The reason we have to wait for the environment to load, is that Apps for Office 2013 runs in a browser window inside the application. Think of it as an IFrame inside the application or document. In order for us to start working with Office we have to be sure that the DOM is loaded and ready.

In the example above, the app will only show the current open mail items’ subject as well as From and To addresses.

Project properties

To access the projects’ properties click on the Properties button at the bottom-left of the browser IDE.

On the first tab you can specify the name, description and start age of your app as well as the initial height of the app in pixels.

On the Permissions tab you can set the permissions your Mail app for Outlook needs in order to run.

The Activation Rules tab is used to specify the activation rules for your Mail app.

These rules are very important as they specify when your Mail app for Outlook should be shown. In the screenshot above the Mail app will only be visible on mail messages because you specified ItemType=”Message”.

Deploying Outlook 2013 mail app

To deploy your Mail app for Outlook, all you need to do is click on the “Run Project” button.

Your project will be uploaded to your SharePoint server and it will then be visible in both the web and desktop versions of Outlook.

Things to keep in mind with Outlook 2013 mail apps

Creating a new Mail app is very easy and gives you a whole new opportunity to provide your users with a whole new range of productivity enhancements in Office. However, there are a few draw-backs you have to keep in mind if you decide to develop for Office using the new web extensibility model.

• Mail apps require Exchange 2013 – Mail apps are simply not available to users without an Exchange 2013 account. It will also not work if your user uses a POP3 or IMAP account.
• Apps that require read/write permission cannot be installed by the end user – If your app requires the read and write mailbox permission it must be installed by a system administrator.
• No Task Pane apps – Unlike Word and Excel, there are no options to create a task pane style app for Outlook. A shame really, I hope to see it in future.
• No global events – Unlike the traditional COM add-ins you do not have access to events such as ExplorerSelectionChange or ExplorerFolderSwitch.

Task Pane apps for Office 2013 Excel and Word

Task Pane apps add functionality to Excel 2013 and Word 2013 in a task pane next to the document. It is similar to the task panes we already know from our COM add-ins.

You can create an Office 2013 Task Pane app, using the Napa development tools, in a similar fashion as the Mail app directly in your browser.

For this example, we’ll open the project in Visual Studio by clicking the “Open in Visual Studio” button in the Napa development tools browser IDE.

This will download an executable project launcher file, which when run will open the Task Pane app project in Visual Studio 2012.

The project layout in the Visual Studio Solution Explorer will resemble the following image:

The project layout is similar to the Outlook Mail app, except that we now have an Images folder that contains the application icon. To change the properties of the app double-click on the My Task Pane.xml file in the Solution Explorer.

In the properties window you can specify whether your Office 2013 Task Pane app should be shown in Microsoft Word 2013(Document), Microsoft Excel 2013 (Workbook) or Microsoft Project 2013 (Project Plan) and which permissions your app require in order to run correctly.

Press F5 to run your app. You should see the task pane in Excel 2013 ith two buttons. One button will set the value of the selected cell in Excel to the value specified in the textbox and the other button will
do the reverse.

Content apps for Office Excel 2013

The final app type you can create is an Excel 2013 content app. This app type is only available for Excel and allows you to show web-based features as content in line with the document.

You can use the Napa development tools to create an Excel 2013 content app or, like we’ll do in this example, you can also use Visual Studio 2012.

To create the Office 2013 content app for Excel in Visual Studio 2012, create a new “App for Office 2013” project.

Select Content app in Excel and click Finish.

The project layout is the same as the Task pane app, when you hit F5 to run the app, you will see a “floating image” of your app in Excel. Users will be able to drag the app around, similar to an Excel chart, within the workbook.

Conclusion

The new Apps for Office were designed to offer a more unified web-based extensibility platform for Office 2013 application development. It also gave developers a great way to offer customers who use the web-based versions of Microsoft Office, the option to use a certain amount of customization.

It was not designed to replace or supersede the existing COM-based object models, and there will always be a need for pure desktop-only COM add-ins. Another bright prospect for the future of Office customization is the possibility of providing customizations for Office for Mac users, something which was impossible with previous versions.

I can only imagine that Microsoft will continue to improve the web extensibility model for Microsoft Office and provide us with even more ways to write awesome Office add-ins!

Thank you for reading. Until next time, keep coding!