Pieter van der Westhuizen

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:

Office Apps architectural diagram

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:

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.

Creating a Mail App for Office using the Napa Development tools

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

Developing your App for Office right in your browser

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.

To access the projects' properties click on the Properties button

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.

Specify the name, description and start age of your app

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

Set the permissions of your Mail app for Outlook

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

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.

To deploy your Mail app for Outlook, 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.

The newly created Mail app in Office 365

Your custom Mail app in Outlook 2013

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.

Creating a Task Pane app using the Napa development tools

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.

Opening the Task Pane app project in Visual Studio

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 in the Visual Studio Solution Explorer

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.

To change the properties of the app double-click on the My Task Pane.xml file

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.

A custom Task Pane app in Excel 201

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.

Creating a Content app for Excel with Napa development tools

Creating a Content app for Excel in 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.

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.

The newly created Content app in Excel 2013

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!

6 Comments

  • XL-Dennis says:

    Pieter,
    Thanks for compiling this article! I would like to see a comparison between Apps for Office and COM add-ins.

    Personally I will not jump on the JavaScript/HTML5/CSS wagon mainly because it is version 1.0 But also due to the fact that the COM add-in model works still so well.

    I recently started out to explore VS 2012. What I’m surprised to learn is that VS 2012 is not shipped with a Shared Add-in Template. Or have I missed it?

    Thanks,
    Dennis

  • Pieter van der Westhuizen says:

    Hi Dennis,

    I agree with you, one has to be careful before jumping on any technology band wagon.

    Whilst I do not believe that the new web extensibility model for MS Office is a bad thing, it is (for now at least) still only usable for a very limited number of development scenarios. I would however love to see what the future holds for this approach and what different types of apps developers come up with.

    Yes, it appears MS has removed the Shared Add-in project template from VS 2012. I could not find any reason why they did it, but I can speculate it’s a way
    to nudge developers into only creating Apps for Office…

    Thanks for your comment!

  • Ou8 says:

    Currently, there is no way that anyone developing for this new environment could recover their development costs given the lack of an installed user base and the very real concern over data integrity and privacy issues. Not to mention that the add-ins are document-centric, making them all but useless except if you want to write yet another pretty mortage payment calculator.

    This must be a sick joke, or the result of Microsoft, panicked by the popularity of Facebook and iPhones, listening to too many “social media experts” (a.k.a. Facebook / Twitter junkies who know nothing at all about computing)

  • Pieter van der Westhuizen says:

    Hi There!

    I hear what you are saying and I understand where you are coming from. The desktop Office platform is very mature, whereas Apps for Office are very new, and it does feel unfinished in places. One has to remember that we still have only seen the preview version and when it finally launches it’ll only be version 1 of Apps for Office.

    As I’ve mentioned, Apps for Office is not meant to replace the VBA/VSTO/COM Add-ins, at least not yet. See it as just another way to customize Office. I’m sure MS has already thrown a lot of time, resources and money into this new technology and will only invest more in the future, so we should hopefully see further enhancement to the web platform.

    Thanks for your comment.

  • arpit dhuriya says:

    sir please illustrate the procedure how to submit an office to Microsoft. I am student and I have completed an task pane app for office 2013 for Microsoft student partner. please help.

  • Pieter van der Westhuizen says:

    Hi Arpit,

    I’ve never submitted an Office app to MS, but have a look at this article: https://msdn.microsoft.com/en-us/library/office/jj220033.aspx

    Good luck!

Post a comment

Have any questions? Ask us right now!