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.
This Word add-in will show you how to:
- Load a list of docx files from a service and populate a drop down box control with the file names as options.
- Load a docx file from the service and insert it into the Word document.
- Load the content control collection and create input boxes based on the content controls.
- Update the text value of the content control collection based on the values in the input boxes.
- Use Office UI Fabric to create a seamless Word user experience.
Note: A giggle is a side effect of running this sample.
To use the Silly stories Word add-in sample, the following are required.
- node.js to serve up the docx files.
- npm to install the dependencies.
- JQuery, for the Office UI Fabric dropdown component.
- Word 2016, or any client that supports the Word Javascript API. This sample does a requirement check to see if it is running in a supported host.
- Install project dependencies with Node's package manager (npm) by running
npm install
in the project's root directory on the command line. - Start the development server by running
node server.js
in the project's root directory. The add-in will be running at 127.0.0.1:8080.
- Create a folder called “wef” in Users/Library/Containers/com.microsoft.word/Data/Documents/
- Put the manifest in the wef folder (Users/Library/Containers/com.microsoft.word/Data/Documents/wef)
- Open Word 2016 on the Mac and click on the Insert tab > My Add-ins drop down. You should see the add-in listed in the drop down. Select it and it will load the add-in.
- Create a network share, or share a folder to the network and place the word-add-in-sillystories.xml manifest file in it. You've deployed your add-in at this point. Now you need to let Word know where to find the add-in.
- Launch Word and open a document.
- Choose the File tab, and then choose Options.
- Choose Trust Center, and then choose the Trust Center Settings button.
- Choose Trusted Add-ins Catalogs.
- In the Catalog Url box, enter the network path to the folder share that contains word-add-in-sillystories.xml and then choose Add Catalog.
- Select the Show in Menu check box, and then choose OK.
- A message is displayed to inform you that your settings will be applied the next time you start Office. Close and restart Word.
Now you are ready to run it in Word.
- Open a Word document.
- On the Insert tab in Word 2016, choose My Add-ins.
- Select the Shared folder tab.
- Choose Silly stories add-in, and then select Insert.
- A new group called Word Add-in will appear on the Home tab. The group has a button named Silly Stories. (These are not seen in the screen shot.) Click this button to open the add-in task pane.
- Select a story, to have boilerplate text entered into the Word document.
Figure 1. The Silly stories add-in loaded in Word
We'd love to get your feedback about the Silly stories Word add-in sample. You can send your questions and suggestions to us in the Issues section of this repository.
Questions about add-in development in general should be posted to Stack Overflow. Make sure that your questions or comments are tagged with [office-js], [word], and [API].
Here are more resources to help you create Word Javascript API based add-ins:
- Sideload an Office Add-in on iPad and Mac
- Office Add-ins platform overview
- Word add-ins
- Word add-ins programming overview
- Snippet Explorer for Word
- Word add-ins JavaScript API Reference
Copyright (c) 2015 Microsoft. All rights reserved.
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.