lindalu-msft / office-add-in-javascript-webapiservice

Shows how to create and query an ASP.NET Web API service from an Office Add-in.

Office Add-in: Create a web service for an Office Add-in using the ASP.NET Web API

Table of contents

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

##Summary This sample demonstrates how to create and query an ASP.NET Web API service from an Office Add-in. The sample is comprised of a "Send Feedback" page, which lets a user submit feedback, and uses a Web API service to send it to the developer team.

Prerequisites

This sample requires the following:

• Excel 2013, Word 2013, PowerPoint 2013, or Project 2013.
• Visual Studio 2013 (Update 5) or Visual Studio 2015, with Microsoft Office Developer Tools.
• Any browser that supports ECMAScript 5.1, HTML5, and CSS3, such as Internet Explorer 9, Chrome 13, Firefox 5, Safari 5.0.6, or a later version of these browsers.
• Familiarity with JavaScript programming and web services.

Key components of the sample

The sample solution contains the following key files:

WebApi Sample project

• WebApi Sample.xml: The manifest file for the Office Add-in.

WebApi SampleWeb project

• App\Home\Home.html: The HTML user interface for the add-in.
• App\Home\Home.js: The logic that builds and sends the feedback request to the web service.
• App_Start\WebApiConfig.cs: Binds the default routing for the Web API service.
• Controllers\SendFeedbackController.cs: The business logic for the sample Web API service.

##Description of the code The Office Add-in makes an AJAX request to the web service, passing in data from the client-side JavaScript code. The Web API controller receives the data, performs an action, and returns the results back to the caller. The AJAX call then completes, displaying the results or showing an error message.

Build and debug

The sample will run right out of the box, but it won't be able to send feedback unless you configure appropriate credentials. To configure the credentials, open SendFeedbackController.cs (in the Controllers folder of the web project) and update the following constants with actual values:

const string MailingAddressFrom = "[email protected] ";
const string MailingAddressTo = "[email protected]";
const string SmtpHost = "smtp.contoso.com";
const int SmtpPort = 587;
const bool SmtpEnableSsl = true;
const string SmtpCredentialsUsername = "username";
const string SmtpCredentialsPassword = "password";

1. Open the solution in Visual Studio.
2. Press F5 to build and deploy the sample add-in to the client that's specified as the start document (by default, Excel). To change this setting, click the WebApi Sample project in Solution Explorer and select your preferred Office application.
3. On the Home ribbon, click the Open button in the Web API group.
4. In the add-in, choose a rating in the drop-down list, enter some feedback, and click Send it! A toast notification opens to tell you whether your feedback was successfully sent.

##Troubleshooting

• If the add-in fails to send feedback (shows a notification message with "Sorry, your feedback could not be sent"), check that you configured an appropriate email address in SendFeedbackController.cs. Alternatively, you can remove the mail-sending code, and/or replace it with a different form of sending feedback (e.g., logging to a database).

##Questions and comments##

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

Additional resources

• Office Add-ins documentation on MSDN
• Web API: The Official Microsoft ASP.NET Site
• Walkthrough: Create a web service for an app for Office using the ASP.NET Web API (applies to an earlier version of this sample)
• More Add-in samples

Copyright

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.