Office Store development – the new “Apps for Office” model

Article
11/12/2013

I’m taking a break from talking about Windows apps to talk about…Office apps!

In seriousness, I had a customer ask me about Office development at one of my events last week. I’ve never done VBA, but I did do a little VSTO back in the day. But it’s been a while since I looked at Office dev. I took a day and dove into it, and wanted to share what I learned.

The new Office development model is “Apps for Office”.

I already mentioned the progression of Office development. First, there was VBA (Visual Basic for Applications). Then Office development got a little .NET love, and VSTO (Visual Studio Tools for Office) was born. Now, the latest and greatest is “Apps for Office”, which are built with web technologies (so you will be coding in JavaScript).

For those who are wondering which of the three technology choices (apps for Office, managed VSTO add-ins, or VBA macros) are best suited for your scenarios, the team has published a Roadmap for Apps for Office, VSTO, and VBA.

There is an Office Store for publishing “Apps for Office”.

If you build an app for Office, you can publish it to the Office Store and monetize it if you choose.

End users only need a free Microsoft account to download Office apps.

Some useful links:

Office Store for end users: check out the end user experience – search for and download Office apps!

Office Seller Dashboard: the portal for developers to publish and manage their apps for the Office Store

Validation policies for the apps submitted to the Office Store: as developers, here are the criteria to make sure that your apps will be accepted into the Office Store

Publish apps for Office and SharePoint to the Office Store: reference info for developers on how to publish your apps

How to: Publish an app for Office: publishing tutorial

There are three types of “Apps for Office”: task pane apps, content apps, and mail apps.

Task pane apps are available for Word, Excel, PowerPoint, and Project. They run in a sidebar (the Office task pane) that allows you to work with the Office document/spreadsheet/etc.

Content apps are available for Excel. They allow you to embed content directly into a spreadsheet.

Mail apps are available for Outlook. They display next to various Outlook items (email messages, meeting requests, meeting responses, meeting cancellations, or appointments) and can access contextual information from those items to produce rich experiences.

There are screenshots of each type of app at Types of apps for Office.

Some useful links:

Apps for Office: this is a quick getting-started guide

Overview of apps for Office: this is a more detailed walkthrough of how apps for Office work

There are two ways to code “Apps for Office”: using Visual Studio or the Napa development tools in browser.

Option 1: Napa development tools

I took a quick look at the "Napa" Office 365 Development Tools first. This allows you to develop Office apps from within the browser without using Visual Studio. To do this, you can sign up for Office 365 for developers. This customized Office 365 subscription includes all the tools and resources you need to start building and testing apps right now:

Office 365 Developer Site, customized for creating and testing apps
"Napa" Office 365 Development Tools, to create your first apps right within the browser
Office Professional Plus 2013
Exchange Online

I signed up for a free trial here. This site walks you through the steps. First, I signed up for an Office 365 Developer Site (you get a free 30-day trial). (Note: you can also convert an existing Office 365 subscription to an Office 365 developer subscription if it is an enterprise (E3 or E4) subscription; see How to: Provision a Developer Site using your existing Office 365 subscription . ) When you register, you have to create a user ID and subdomain on the site onmicrosoft.com. I chose jennifermarsman@Microsoft126.onmicrosoft.com. I was then redirected to my new Developer Site (it was still provisioning everything when I took this screenshot):

After everything is provisioned, from the admin page (above), click on “Build apps”, then “Build an app”. The site prompted me to add the Napa controls and directed me to the website to download them. After I downloaded them, my site looked like this:

From this page, you can click on the purple Napa tile to launch the Napa development tools:

Now you can build an app for Office from directly within the browser. Here are some tutorials to get you started:

Option 2: Visual Studio

Due to circumstances, the customer and I decided to explore the Visual Studio option as well. This is an alternative to using the Napa tools.

To develop Apps for Office using Visual Studio instead of the Napa tools, you will need EITHER Visual Studio 2013 OR Visual Studio 2012 with this extra download: OfficeDevToolsForVS2012.

I worked through this tutorial: How to: Create your first task pane or content app by using Visual Studio. It walks you through reading and writing data between the spreadsheet and the embedded control (in the case of a content app) or task pane (in the case of a task pane app). You can also bind a specific set of rows/columns and give them a name, and be able to read data specifically from that bound section. An event-based model lets you respond whenever that data is changed, as well. Here is the content app from the tutorial:

Here is the JavaScript that drives each of the buttons:

 function writeData() {
    Office.context.document.setSelectedDataAsync([["red"], ["green"], ["blue"]], function (asyncResult) {
        if (asyncResult.status === "failed") {
            writeToPage('Error: ' + asyncResult.error.message);
        }
    });
}

function writeToPage(text) {
    document.getElementById('results').innerText = text;
}

function readData() {
    Office.context.document.getSelectedDataAsync("matrix", function (asyncResult) {
        if (asyncResult.status === "failed") {
            writeToPage('Error: ' + asyncResult.error.message);
        }
        else {
            writeToPage('Selected data: ' + asyncResult.value);
        }
    });
}

function bindData() {
    Office.context.document.bindings.addFromSelectionAsync("matrix", { id: 'myBinding' },
        function (asyncResult) {
            if (asyncResult.status === "failed") {
                writeToPage('Error: ' + asyncResult.error.message);
            } else {
                writeToPage('Added binding with type: ' + asyncResult.value.type + ' and id: ' +
                    asyncResult.value.id);
            }
        });
}

function readBoundData() {
    Office.select("bindings#myBinding").getDataAsync({ coercionType: "matrix" },
        function (asyncResult) {
            if (asyncResult.status === "failed") {
                writeToPage('Error: ' + asyncResult.error.message);
            } else {
                writeToPage('Selected data: ' + asyncResult.value);
            }
        });
}

function addEvent() {
    Office.select("bindings#myBinding").addHandlerAsync("bindingDataChanged", myHandler, function (asyncResult) {
        if (asyncResult.status === "failed") {
            writeToPage('Error: ' + asyncResult.error.message);
        } else {
            writeToPage('Added event handler');
        }
    });
}

function myHandler(eventArgs) {
    eventArgs.binding.getDataAsync({ coerciontype: "matrix" }, function (asyncResult) {

        if (asyncResult.status === "failed") {
            writeToPage('Error: ' + asyncResult.error.message);
        } else {
            writeToPage('Bound data: ' + asyncResult.value);
        }
    });
}

Here is the same app as a task pane app:

It was very easy to switch from a Word to an Excel task pane app, and from an Excel task pane app to an Excel content app. (Content apps are only available for Excel at this time.) To switch from a Word to an Excel task pane app, change the Start Action in the project properties.

To switch from an Excel task pane app to an Excel content app, you need to modify your OfficeApp.xml file. (You can see mine selected in the Solution Explorer below.) Namely, you need to:

Change your xsi:type from "TaskPaneApp" to “ContentApp”.
Remove the "Presentation", "Project", and "Document" Capability elements (leaving only the “Workbook” one for Excel).
Add and set values for the RequestedWidth and RequestedHeight elements. (I used a RequestedWidth of 200 and a RequestedHeight of 300.)

The next thing we wanted to figure out was how to save changes to an Excel file. In a customer scenario, you could launch an Excel spreadsheet, make changes to it, and then want to save it so that those changes are available the next time you open it. In the Visual Studio debug experience, it launches a new instance of Excel each time by default. I found this article on how to get an entire document or presentation in Word or PowerPoint, but I didn’t see how to do this in Excel…essentially I wanted to associate my app with a specific Excel spreadsheet as opposed to the Excel program in general. It turns out that this is pretty easy! In Visual Studio, you can set the Start Action in the project properties to the path to the .xlsx file that you want to associate the app with, instead of selecting “Microsoft Excel” like we did above. Then, it will launch that spreadsheet for debugging, as opposed to a new spreadsheet in Excel.

For real deployment instructions after development/test in Visual Studio, see this great post by Donovan.

Finally, here is a really cool example of an Office app. Open Excel 2013 and type “bing finance” in the search bar to search online for the “My financial portfolio” template.

Then click on the template and choose Create. When the document loads, take whatever steps necessary to enable the app and you’ll see that the app is essentially pre-loaded in association with the document and can interact with the document by updating stock data even without some user interaction.

If you search for a stock in the task pane app that is not in the pre-loaded table in the spreadsheet, you can add it to the table by clicking the “Add to Table” button in the task pane. Notice that it adds it to the bottom of the table without you needing to pre-select a location to add the row. This is because the app “knows” locations in the document that it can interact with.

Reference

Here are some other random links that might help you.

Office Dev Center

Start building apps for Office and SharePoint

Core concepts and tasks for apps for Office

Soma's blog post announcement of Office Developer Tools for VS2012

Apps for Office code samples