My discussion of Web Add-ins will center on Word, since that’s “where I live”. The information on the basics is certainly relevant to other Office applications (Excel and PowerPoint) if the Web Add-in is hosted in a Task Pane – the only kind of Web Add-in Word supports.

So, what all is involved in creating a Web Add-in? Unfortunately, it’s not only JavaScript and the Office JavaScript APIs – that’s just the programming language and object model. At least some knowledge of HTML is required and familiarity with CSS is an advantage.

Why HTML and CSS? Because the task pane hosting the Web Add-in contains a web browser control. The user interface for the Add-in is an HTML web page: all the information, controls for user interaction and the code for managing it all, plus working with the Office application is “packaged” in the HTML.

Or, I should better say, could be packaged in the HTML. Actually, multiple files containing the CSS for formatting, images, most of the JavaScript code and any other resources will be linked into the HTML file.

There’s a good example on MSDN to give you a taste of what’s involved. You don’t need anything more than Windows 7 (or later), a text editor and Word 2013 (or later) installed on your machine.

Don’t let the section To specify a trusted location for the manifest throw you off. It talks about saving the files to a “Network Share”. But this can also be a shared folder on your local machine. If you’ve never set up a Share before…

  1. Navigate to the folder location in Windows Explorer. Right-click the folder and choose the command Share with/Specific people.
  2. If Everyone isn’t listed, display the dropdown list and select it, then click Add.
  3. Everyone should have Read/Write permissions. If it doesn’t, click on the dropdown arrow and select that entry.
    ShareFolder
  4. Confirm by clicking the Share button. After a short while the message “Your folder is shared” should appear.
  5. Click on the copy link to get the required path for Step 6 in the instructions on MSDN.
    ShareFolder2
  6. Click Done and proceed with the instructions.

You should be able to figure out most of the HTML and CSS. The JavaScript might make a certain amount of sense, in an abstract sort of way. The XML manifest, however, probably presents a head-scratcher. So the next post will try to explain the XML manifest, with links to the documentation. After that it will be time to start delving into the JavaScript and Office APIs.

2 Responses to “Web Add-ins for (Word) VBA developers – Introduction”
  1. Christophe says:

    Dear Cindy,

    can you maybe provide some further insights on when to use web add-ins versus VSTO? Typically I’m thinking about basic action as saving documents on a specific location, which can easily be achieved using VTSO, but which is – as far as I know – (still) not possible with web add-ins…

    Would you know if something like a ‘this can be done now’, ‘this can be done in the near future’ overview exists, allowing people to take decisions like ‘Will we do this now in VSTO or wait a few months and make use of the web add-in model’?

    Thanks,
    Christophe

    • WordMeister says:

      Hi Christophe

      Good question :-) If you need to create new documents or save documents to specific locations then you need to stick with VSTO (or the Open XML SDK if you don’t need to interact with the user inside the Word application) for now. I’ve heard rumors that, eventually, something like this might become possible using REST technology (as in, technically it should work). But no idea when that could become current (if ever).

      If you really, really wanted to do something like this in environments where VSTO can’t run, if we’re talking Word, there is a possibility using Open XML. The Word API supports retrieving content in Word Open XML format (instead of plain text or HTML). This brings across pretty much the entire document in the OPC flat file format – IOW as plain text with XML markup. This could be written to a file server-side or to a database or handed to a web service…

  2.  
Leave a Reply