Posted by on Sep 28, 2015 in #Office365Dev, Visual Studio | 0 comments

One of the greatest things about building Office Add-ins is the fact that they will run in Office Online (for instance Word Online, Excel Online and PowerPoint Online). Bringing your Office Add-ins across a large set of operating systems and devices.

Obviously we will need to test and make sure that our Office Add-in works in these different environments. To do that, we can install our Office (task-pane/content) Add-ins into our Office 365 tenant, launch the various Office Online applications and debug using your favorite web developer tools.

If you’re interested in launching your Office Add-in in Excel Online directly from Visual Studio – have a look here:
http://simonjager.com/office-add-ins-launch-in-excel-online/

1. Get yourself an Office 365 tenant
If you don’t already have one, I would advise you to look into the Office 365 Developer Program:
http://dev.office.com/devprogram

2. Create an App Catalog
Head over to your SharePoint Admin Center and find the App Catalog section in the “Apps” tab. Unless you already have an existing App Catalog, you will have to create one – this will be the repository for all of your Office Add-in manifests.

1

Enter the details about the web site address, assign administrators and the storage quota for this App Catalog. Once you have hit OK – it usually takes a couple of minutes to provision your new App Catalog.

2

3. Generate your Office Add-in manifest file
Locate the local URL for where your Office Add-in will be hosted when running on your machine – the idea here is to launch the Office Add-in in Office Online, but calling your local machine for the source. This will enable us to debug the server-side of things.

In my ASP.NET project, I located the SSL URL property for the Office Add-in.

3

Next up we need to create the Office Add-in manifest itself, right-click your manifest project in Visual Studio and choose Publish.

4

In the publishing wizard, create a new publishing profile and hit the “Package the app” button. At this point you will be asked for a URL, which will be used as an entry point for your Office Add-in sources. Enter the local hosting URL of your Office Add-in that you located earlier.

5

Finish the wizard and the Office Add-in manifest will be generated for you.

4. Upload the Office Add-in manifest to your App Catalog
Head over to your App Catalog using the web site address that you specified when creating the App Catalog. Get into the Apps for Office (older term for Office Add-ins) section and upload the manifest file.

6

5. Launch the Office Add-in
Start any desired Office Online application from the App Launcher in the top-left corner. In many of the Office Online applications, you can locate your Office Add-ins in the Insert tab. Your Office Add-ins will appear in the “My Organization” section.

7

Before inserting the Office Add-in, make sure that you’re running (preferably with a debugger attached) the web project of your Office Add-in. In my case, I would rearrange the solution to only start the ASP.NET project (right-click and “Set as Startup project” in Visual Studio).

Now you will be able to use any web developer tools of your choice to debug the client-side.

8

Your Office Add-in is loaded into a separate iframe; for instance in Word Online – your source code would be located in wordeditorframe.aspx.

In order to deploy changes to your Office Add-in, simply restart your web project and reload the Office Online application. Your manifest doesn’t have to be re-uploaded unless you’re making changes to it.

Persist the local URI of your web project and it will make for a smooth experience when applying updates to your web project.

-Simon Jäger

Thanks @richdizz!