officedev/office-add-in-fabric-ui-sample

[ARCHIVED]

[ARCHIVED] Office Add-in Fabric UI Sample

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 is a Word task pane add-in sample that uses Office UI Fabric. It inserts citations into the body of the document using the Office.js APIs.

For general information about using Fabric, see Using Office UI Fabric in Office Add-Ins.

Try it out

Get web application running

1. Open command prompt and navigate to project directory
2. Run 'npm install' in root directory
3. Run 'gulp serve-static' to run the node web server

Deploy add-in manifest

The simplest way to deploy and test your add-in is to copy the files to a network share.

1. Create a folder on a network share (for example, \\MyShare\addins) and copy all the files in the Code Editor folder.

2. Edit the element of the manifest file so that it points to the share location from step 1.

3. Copy the manifest (manifest.xml) to a network share (for example, \\MyShare\addins).

4. Add the share location that contains the manifest as a trusted app catalog in Excel.

   a. Launch Excel and open a blank spreadsheet.

   b. Choose the File tab, and then choose Options.

   c. Choose Trust Center, and then choose the Trust Center Settings button.

   d. Choose Trusted Add-in Catalogs.

   e. In the Catalog Url box, enter the path to the network share you created in step 3, and then choose Add Catalog.

f. Select the Show in Menu check box, and then choose OK. A message appears to inform you that your settings will be applied the next time you start Office.

Test add-in in Word

a.  In the **Insert tab** in Excel 2016, choose **My Add-ins**. 

b.  In the **Office Add-ins** dialog box, choose **Shared Folder**.

c.  Choose **Citations Sample**>**Insert**. The add-in opens in a task pane and shows the add-in. 

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.

office-add-in-fabric-ui-sample's Issues

ms-Panel-headerText looks terrible when line the wraps

The line height is pretty bad if the header text happens to wrap

Please add some lines to "Try it Out section" on main page

I'm here just to know little bit about UI Fabric. This sample is exactly what I need. Thank you for create one. But please help me to try it:

1. what mean "npm install"? This is on my local computer? He just confirmed that he don't known this command.
2. The same relate to "Run 'gulp serve-static' to run the node web server". Please give link to some resource to understand these pre-requisites.
3. Little bit more about "copy all the files in the Code Editor folder". Where this folder?
   Excuse me if all other readers understand these points. I'm just start to learn this technology.

TypeError: window.external.GetContext is not a function

TypeError: window.external.GetContext is not a function
https://appsforoffice.microsoft.com/lib/1.1/hosted/o15apptofilemappingtable.js(line 11,col 117878)
my browser is Firefox 39.0

Couldn't setup this demo

Could you provide a solution file for Visual Studio? I had a lot of trouble trying make this work.

First, it cites "Get web application running", but later it says to copy all the files in a shared network folder.
Should I use the npm/gulp commands in the shared folder or it doesn't matter?

"Edit the element of the manifest file so that it points to the share location from step 1."
Well, I'm not sure which elements they are.

Dropdown

The Dropdown opens at the top-right corner of the taskpane. How can I make it open right below the dropdown text box.

Environment: Mac Capitan, Office Word 2016 build number 15.23.2