[ARCHIVED] Word add-in: Loading data into custom XML parts bound to content controls in a Word document

Note: This repo is archived and no longer actively maintained. Security vulnerabilities may exist in the project, or its dependencies. If you plan to reuse or run any code from this repo, be sure to perform appropriate security checks on the code or dependencies first. Do not use this project as the starting point of a production Office Add-in. Always start your production code by using the Office/SharePoint development workload in Visual Studio, or the Yeoman generator for Office Add-ins, and follow security best practices as you develop the add-in.

Table of contents

• Summary
• Prerequisites
• Key components of the sample
• Description of the code
• Build and debug
• Troubleshooting
• Questions and comments
• Contributing
• Additional resources

Summary

In this sample we show you how to use the JavaScript API for Office to write data to a set of custom XML parts that are bound to content controls within a Word document. The following is a picture of the scenario in question.

We are creating packing slips from customer order data. The packing slip document is shown on the left of the preceding screen shot, with our Office Add-in on the right as a task pane app. When you select an order using the order id drop-down in the task pane on the right and then click the Populate button, the packing slip document is populated with data from that order. The sample uses the Javascript API for Office to interact with the Word document by populating custom XML parts defined in the document with order data. These custom XML parts are bound to content controls that define the UI or the document. To simplify this sample, the order data is stored in the same JavaScript file that creates the add-in. However, in a real application, that data could come from a data source anywhere on the web.

Prerequisites

This sample requires the following:

• Visual Studio 2013 with Update 5 or Visual Studio 2015.
• Word 2013 or later
• Internet Explorer 9 or later, which must be installed but doesn't have to be the default browser. To support Office Add-ins, the Office client that acts as host uses browser components that are part of Internet Explorer 9 or later.
• One of the following as the default browser: Internet Explorer 9, Safari 5.0.6, Firefox 5, Chrome 13, or a later version of one of these browsers.
• Familiarity with JavaScript programming and web services.

Key components

This solution was created in Visual Studio. It consists of two projects - InvoiceManager and InvoiceManagerWeb. Here's a list of the key files within those projects.

InvoiceManager project

• InvoiceManager.xml The manifest file for the Word add-in.
• PackingSlip.docx The example packing slip Word document used in this sample.

InvoiceManagerWeb project

• Home.html The HTML user interface for the Word add-in.
• Home.js The JavaScript code used by Home.html to interact with Word using the JavaScript for Office API.

Description of the code

For a detailed description of this sample, see Exploring the JavaScript API for Office: Data Binding and Custom XML Parts

Build and debug

1. Open the InvoiceManager.sln file in Visual Studio.
2. Press F5 to build and deploy the sample add-in and open it in Word.
3. On the Home ribbon, find the Invoice Manager group and press the Open button.
4. In the app task pane, select an order in the Order ID drop-down list.
5. Choose Populate to populate the packing slip in the Word document with information from the selected order.

You can view a list of the custom XML parts in a document by opening the XML Mapping pane in Word (Developer tab).

Troubleshooting

• If the add-in starts with a blank document, ensure that the Start Document property of the InvoiceManager project is set to PackingSlip.docx and not just to Word.
• If the add-in does not appear in the task pane, Choose Insert > My Add-ins > InvoiceManagerSample.

Questions and comments

• If you have any trouble running this sample, please log an issue.
• Questions about Office Add-ins development in general should be posted to Stack Overflow. Make sure that your questions or comments are tagged with [office-addins].

Contributing

We encourage you to contribute to our samples. For guidelines on how to proceed, see our contribution guide

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Additional resources

• More Add-in samples
• Office Add-ins
• Anatomy of an Add-in
• Bindings object (JavaScript API for Office)
• Binding to regions in a document or spreadsheet
• Creating an Office add-in with Visual Studio

Copyright

Copyright (c) 2015 Microsoft. All rights reserved.