Starting with the App for Office Project Template
The first step to getting started with an App for Office project is to create a new project and select the App for Office project template (see Figure 22.17).
Unlike the add-in projects that are broken out by specific applications such as Excel or Word, there is only a single App for Office project template. After you select the project template and create the new project, a two-page wizard will launch. The first page will capture the type of the extension (see Figure 22.18).
There are three different extension types offered. All should look familiar because they represent the same types of extension functionality covered earlier in this chapter:
Task pane—The app will be hosted within the Office application’s task pane.
Content—The app will be attached to, and hosted within, an Office document (a Word document file, an Excel worksheet, and so on)
Mail—The app will be hosted within the body of an email message (or an appointment).
Based on your selection here, the second page will capture a second level of detail around the type of app you are trying to create. For example, for a Mail app the wizard will allow you to fine-tune the exact email or appointment scenario you want to target and allow you to select if you want your app available as part of a read form or a compose form. For a content app, you can customize the type of Office client app you want to target as well as whether you want to have the wizard generate some “starter code” for you.
Let’s walk through the process of creating a task pane app. Select Task pane on the first page of the wizard (refer to Figure 22.18). On the second screen, we’ll constrain our solution down to Excel (see Figure 22.19).
After clicking Finish on the wizard, the project will load. The first thing you will notice is that two projects have been created: a “manifest” project and a web project (see Figure 22.20).
The manifest project holds a single XML file that is our project’s manifest. This is nothing more than a set of directives that allow the app to be correctly provisioned and include information such as the display name for the app, the publisher, and the URL to the web page. If you double-click the manifest file, the manifest editor will load allowing you to inspect and change the various properties.
The web project implements the code we want to use within our task pane; from that point of view, development with an “App for Office” is no different from the other add-in projects we discussed earlier. The one thing that has changed here is the technology: we will write our code using HTML, JavaScript, and Cascading Style Sheets (CSS) instead of using C#. Anything that can be implemented in a web page—calling into a web service to retrieve values, calling a JScript function to compute a value, and so on—is possible to implement within our task pane.
To continue with our purchase order motif, perhaps it would be useful to offer a way to quickly convert between currencies while Excel is open. In the example shown in Figure 22.21, we have embedded a simple iframe element within our project’s Home.html page. This embeds a currency conversion calculator hosted by themoneyconverter.com.
<body>
<div id="content-header">
<div class="padding">
<h1>Currency Converter</h1>
</div>
</div>
<div id="content-main">
<div class="padding">
<iframe id="tmcmini" src="http://themoneyconverter.com/MoneyConverter.aspx?from=USD&to=EUR" marginwidth="0" marginheight="0" scrolling="no" style="border: currentColor; border-image: none; width: 175px; height: 202px; background-color: rgb(255, 255, 255);"></iframe>
</div>
</div>
</body>
