This sample demonstrates mail add-in for Outlook which extracts data from a mail message and retrieves data from Office 365 APIs. Node.js is used for server side code, AngularJS for front-end and for authentication purposes Adal.js + Azure AD. Additionaly(not required to run) there is .NET WebApi project to show how we can retrive data from custom REST APIs. (projectUrl)
- Outlook on Office 365 (outlook.office365.com) - Google Chrome
- Office 365 Developer Subscription. See Sign up for an Office 365 Developer Subscription and set up your tools and environment
- Must have an Office 365 developer site. See How to: Create a Developer Site within your existing Office 365 subscription
- Node.js environment (locally for development, Azure can be used for production)
- Azure accout is required - you will need to configure Azure Active Directory for this sample. See Step 2: Register the sample with your Azure Active Directory tenant
- Optionaly: you will run .NET WebApi project to show additional sample data (seen on picture as Reports, Employees) as an example how we can consume external REST APIs. Use this agile9.outlook.context.db - Code First Entity Framework 6.0 Sample Project With Data
| Solution | Author(s) | |
|---|---|---|
| Context | Matej Vodopivc (Agile9.net) | @matejvodopivc |
| Version | Date | Comments |
|---|---|---|
| 1.0 | Aug 29rd 2015 | Initial release |
THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
This code sample demonstrates the use of an add-in for Outlook for showing additional data to user from Office 365 APIs and custom REST APIs.
Video of the working sample: YouTube - Mail Addin for Outlook - Office 365, Adal.js, AngularJS, Node.js
More images of this sample: blog.agile9.net
This sample consists of 3 primary components:
- Node.js server side code - running locally (can be hosted anywhere, Azure for example fully supports Node.js arhitecture)
- Addin for Office Manifest - defines how our add-in is activated within Outlook
- Front-end code - HTML markup and AngularJS Javascript for interacting with the server-side API
This is already well documented. See Step 2: Register the sample with your Azure Active Directory tenant
Note:
- Make sure you create Key
- make changes to Manifest file (Download, oauth2AllowImplicitFlow: true, Upload back)
- give an app required permissions (Exchange, Sharepoint Online)
- Open project location in Explorer. Open src/app.routes.js
- Change tenant name (replace "agile9" with your Office 365 tenant name)
- Open source location on local computer using Explorer.
- Open Command Prompt in this folder (Hold SHIFT + Right click -> Open Command Windows here)
- Run: npm install bower
- Run: npm install
- Navigate to portal.office.com
- Select Admin
- In the left side menu select ADMIN -> Exchange
- On Exchange admin center page select "add-ins" under "organization" group
- Select Add from File and upload manifest
- Follow steps in 1.2 to navigate to right location using CMD
- Run: npm start
- Open in Chrome browser: https://localhost:8443/#/
- Accept SSL warning (certificate is not verifed by know authority)
- Open https://outlook.office365.com and see the result
- You will need to replace server.js with content from server-production.js.
- For the rest you should follow this article Build and deploy a Node.js web app in Azure App Service