OfficeDev/Office-Add-in-JavaScript-WebApiService

Name: Office-Add-in-JavaScript-WebApiService

Owner: Office Developer

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

Created: 2015-08-12 22:41:04.0

Updated: 2018-04-24 22:52:12.0

Pushed: 2017-12-28 21:31:15.0

Homepage:

Size: 925

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

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:

t string MailingAddressFrom = "add-in_name@contoso.com ";
t string MailingAddressTo = "dev_team@contoso.com";
t string SmtpHost = "smtp.contoso.com";
t int SmtpPort = 587;
t bool SmtpEnableSsl = true;
t string SmtpCredentialsUsername = "username";
t 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 opencode@microsoft.com with any additional questions or comments.