officedev/word-add-in-javascript-invoicemanager

[ARCHIVED] This Word add-in demonstrates how to load data into custom XML parts bound to content controls in a Word document.

[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.

word-add-in-javascript-invoicemanager's Issues

Repeating section not updating

Hi

This example has been a great help, but I have a bit of a bug I cant fix, the bug can easily be recreated with the invoice manager sample:

I updated the xml so the first order only has one item, the second order have two items.

When you select the first order and populate it, it populates the repeating section with the one item but if you search the second order and click populate only the first item displays. You can click on the little plus on the table row and it will create a new row with the missing value. I would like to do this programmatcaly.

If you change this and add five items to the first order and only one in the second order, when you now select the second order after populating the first, it will display the second orders items and the first orders items.

Do you know how to refresh / update the repeating section?

Or do you have a fix for this?

Regards,
Dieter

Word-Add-in-JavaScript-InvoiceManager control binding and table fillin problem

I'm having a problem following the OfficeDev/Word-Add-in-JavaScript-InvoiceManager found in github. can somebody please direct me to a forum or dev center office where I can ask questions.

the specific problems I'm having are:

1. how to bind the controls in the word document to a SharePoint list.
2. how to create a dynamic table control collections so it can be filled from list items.

these are critical as I have a customer waiting for a solution and I have not been able to find anything on the subject anywhere!

Thanks for your help

Nice example but could be more generic

I noticed that the 3 invoices in the example all have 6 items each. I moved some items from the 1st invoice to the 2nd. When I ran the program, the detail section does not grow or shrink according to number of items in the invoice. In the real world, we cannot expect invoices always have the same numbers of items. Can you make this example more generic?

Images for README

This issue is being used to post images used in the README.md of this project. By loading images in this manner, they do not have to accompany the project files.

How to alter/add/delete the actual word xml parts

This example is missing a HUGE!!!! part for a person to be able to understand.

How does one edit/create/update the xml parts in the word document, and ensure they wire up correctly with the add-in data?

I went into word, enabled the Developer tab, I see nothing useful.
I went to quick parts, I see nothing useful

Why do you guys produce such half ass tutorials so often. The amount of times
I try to follow along only to find stuff missing, Its so freaking aggravating.

Table doesn't grow/shrink to accommodate lists of items with variable sizes

The table population only works because all orders contain exactly 6 items. Try changing the number of items of the sample orders. You will see that the table doesn't adapt to accommodate the items.

PackingSlip.docx not display on online word

I have uploaded menifest file and widgets render properly but not display packingslip default document its show blank document

need help identifying the control types on the PackingSlip.docx document

I need help identifying the control types on the PackingSlip.docx document included in the example.

Here's an image of the word document...

the controls on the top table are of a different color than the controls on the table at the bottom.
How are these controls created as they are different from the control created in word 2016 and what ribbon option houses these controls. Unfortunately as you can see, the designer/properties does not show any identifying properties for these controls.