Web Add-ins: Developer IDE

As you’ve seen from the discussions about JavaScript and creating the “Hello World” Web Add-in sample, working with non-proprietary programming languages, such as JavaScript, does have at least one advantage: You’re not locked into any particular software to write your code. In order to create VBA code you need the VBA editor, running in an Office application. JavaScript, HTML and CSS can be typed anywhere.

On the other hand, an editor with Intellisense and automatic formatting can save wear-and-tear on your fingers and your nerves! So this post will show you how to write Web Add-ins in a free version of Visual Studio.

The current version of Visual Studio has just been released: 2015. For quite a few versions, there’s been a free “express” edition that’s had limited capabilities (language and/or type of project available). Starting with VS 2013 Microsoft offers a “Community” edition that has the capability of the “Professional” edition. Of course, there are licensing retrictions attached which you can read about in this FAQ. But as long as you’re not using it for enterprise development, you’re fine :-)

Office has been integrated in Visual Studio since 2003 with VSTO. Over time, it’s branched out and the Web Add-ins are included in the “Office Tools”. These have also been made available to the “Community” edition, in the form of a separate package. Both VS 2015 and the Office tools can be downloaded from this site.

Once everything is installed, start up Visual Studio. This can take a while… Once it’s loaded, click the New Project link. Navigate to Visual Basic\Office/SharePoint\Apps and select “App for Office” (still uses the old terminology!). At the bottom of the dialog box you can change the proposed name and path for the project. Click OK.
In the dialog box that follows you specify the type of Web Add-in. Since this is a Word blog you have only one choice: Task Pane. (Remember the discussion about the XML Manifest? This is taking care of writing the type attribute for the OfficeApp element.) Click Next.

The next step is to specify in which Office applications the Web Add-in may be loaded. Since the next part of the Office APIs we’ll be looking at has to do with Coercion types that are only supported in Word, make sure that only Word is checked. (And again, this is configuring the XML Manifest: this time, the Host entry.) Click Finish.

Once the project has been created the first thing you’ll probably notice is that there are a lot more files than the “Hello World” sample used. Don’t worry about this, for the moment, as the focus is learning how to program Web Add-ins. The Visual Studio approach is “full force” – which is more than we need at present. Start by considering this as a useful tool with automatic code formatting, Intellisense and debugging capabilities and don’t worry about the rest. If you end up not needing/wanting all the “bells and whistles” you can extract the html, css and js files and, with a bit of pruning in the html, use them just like those created in Notepad.

On the right, by default, are the “Solution Explorer” and the “Properties” panes; in VBA they’re on the left, by default. In the code pane you should be seeing Home.html. Look in the head element to see what files it references. You can double-click these in Solution Explorer to view their content (but no need to worry about what it all means).
The Visual Studio template for a task pane Web Add-in is fully functional and contains sample code you can build on / learn from. In order to see ithis sample in Word, press F5. The first time you’ll get two messages about certificates. Confirm both of them.
To test the app, type something in the Word document, select it, then click Get data from selection in the Add-in’s task pane. The text will appear at the bottom of the pane.
When you’re finished trying it out, simply exit Word. Visual Studio has run Word in a new instance and in debug mode, which won’t change your configuration. If you start Word as you normally would the Web Add-in will not be available in the Insert/Add-ins interface.

The functionality included in the Visual Studio template is similar to the ReadData function of the “Hello World” example. Look at Home.js and see if you can follow the code. I don’t want to go into any great detail, here, but in general terms:

  • When the add-in has loaded app.initialize is called. This is located in app.js. It uses jQuery to access the web page in the task pane and intialize the area where the selected text is displayed at the bottom of the task pane when the button is clicked.
  • Also, the click event for the button is assigned to the function getDataFromSelection.
  • This function is similar to ReadData, but differs in a very important way: the coercion type is Text. This returns a “plain” string, in contrast to the matrix coercion type in the other example.

Familiarize yourself with it, play with it. Try changing some of the HTML and the JavaScript to get a feel for Intellisense. The next post will expand on working with coercion types and also look a bit closer at the IDE.

Leave a Reply