blog.atwork.at

news and know-how about microsoft, technology, cloud and more.

How to develop an Office App in real world

Sometimes, it's the small things that cost (unnecessarily) time. Recently, I wanted to create a quick Office App for an existing Excel file to loop through rows and do some transformation for the values. I was stumbling over some topics when developing in real world. So here's my short How To for working with Visual Studio and Office Apps with helpful tips.

Set the start document

If you are not used to develop Office Apps often, this maybe isn't easy to find: How to set an existing document as start file.

When creating a new Office app in Visual Studio there are two projects involved: The website and the manifest. To change the default behavior from using a new (in my case Excel) file, select the Office App project, (copy the desired file into that folder) and click the "Show All" icon. Now right click the file and select "Include in Project".

image

Then, change the "Start Document" property of the Office App project to your file (which now shows up below [New Excel Workbook]).

image

That's it. When starting the Office App, the selected document will be opened in the Desktop Client.

Show your Office-Add in

You can open the Office App (which is in developing status) in the Insert / Add-ins / My Add-ins (the little arrow down icon) menu. Depending on the app type, the app shows up in the content or in the task pane as shown here.

image

BTW, the app type is defined in the manifest file [projectname].xml:

<?xml version="1.0" encoding="UTF-8"?>
<OfficeApp xmlns=http://schemas.microsoft.com/office/appforoffice/1.1
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp">

Thy type TaskPaneApp or ContentApp is stored here (and can be changed easily).

Ensure you work with the latest Office.js!

See this helpful article to check the latest dependencies and libraries:

Update the version of your JavaScript API for Office and manifest schema files

As first check, update your NuGet packages... I created a new Office App in Visual Studio and had some updates to deploy.

image

The latest version of Office.js is version 1.1 which is referenced in the .html file as here:

<script src=https://appsforoffice.microsoft.com/lib/1/hosted/office.js
type="text/javascript"></script>

Debugging with Console.Log

This leads to the next topics: Debug code to the JavaScript console. Where can I find this here?

In Visual Studio, open the Debug / Attach to Process menu (or press Ctrl+Alt+P) and attach "Script code" to all active "iexplore.exe" instances as in this screenshot. Click Attach after configured.

image

Now every output written to console.log('some text'); will show up in the output window.

Additionally, see eventual warnings here as in this sample.

image

Don't forget to remove unneeded console.log commands before deploying for production...

Trust the Office App in Internet Explorer

The Desktop clients use Internet Explorer (with Windows 10 its version IE 11) to open the website with the app - you have seen that above.

If you run into the same issue as I did (see invalidcert.htm in the JavaScript console above)... When IE opens your app URL and says it's not trusted, then run the Office App, open IE and navigate to the app URL. You will see that your IE system does not know the localhost certificate. Double Click the Certificate Error in the address bar.

image

Install the certificate issued by "localhost".

When reloading, the colored URL will turn to "default" - the certificate then is known by IE.

image

Then, the Office App website should open in your Desktop Client without any burdensome clicking to allow this website (otherwise you need to click Refresh for reloading the app website, click "I trust this website" and add the exception until the app is loaded properly).

Also, now the JavaScript console window is cleaned up without the warnings above.

Build!

I hope these tips save unexperienced Office App developers some time! Concentrate on your business logic, not on the environment.

Tomorrow, I will post some more infos how to access data in an Excel workbook and how to transform them. Stay tuned.

Happy developing Office Apps!

Loading