Valorem Consulting

| Tags: Abhilash Ashok, Office 365

Because we are living in an app-centric world with an increased need for streamlined productivity, this post will discuss developing applications for Office 365 (O365) - a robust platform on which developers can build contextual solutions that span Office 365 from web, mobile applications and Microsoft Office. The key message of this post is what you, as a developer, can do with the JavaScript API for Office in mail applications with a simple example.


What are O365 Applications?

O365 Apps are the new approach to bring productivity and extensibility to the Microsoft Office Suite using industry open standards like HTML, CSS3, and JavaScript, along with REST, ODATA and OAuth for secure access to data and services. They are the solution that delivers a light footprint because they don’t actually install on a computer running the host application, instead they run from the browser control in a secure app runtime environment which can be easily maintained and updated.


Where can I install O365 apps?

Similar to the Windows Phone and Windows 8 apps stores, Microsoft has a dedicated app store for Office. You can install applications for all Office products from there.


Why Apps and why not Add-ins?

Add-ins are the old ways of extending Office Suite in order to bring additional functionality and productivity. However, they are limited by their own form. Let’s say that you want to save a document as a PDF, we’ll usually install an add-in to bring that additional functionality in your toolbar as a new toolbar item. The add-in may not be available across devices and is restricted to the installed device.

O365 Apps are built on top of web-standard (HTML5/JavaScript), which can be easily installed from the Office store and can be accessed across many form factors; which is not the case with add-ins. The same application can run on desktop, tablet and smartphones.



Pre-loaded applications

One very familiar Office application which you may have noticed while using Outlook 2013 is the Bing Maps app, which renders a Bing map inside your email message if it contains an address. To verify this, send an email to your account with the following message body – “This is my new office address: One Microsoft Way, Redmond, WA” and open it. You can see the Bing Maps (a Mail app) enabled below your message header, as below:


Selecting Bing Maps will expand the UI, plot and highlight the address as below, all without leaving your inbox.


Cool, isn't it?

Now, let’s create a mail app that detects Vimeo video URL embedded in an email message and allows us to playback the video without leaving the email. Let’s begin by composing and sending an email to your O365 developer account with a Vimeo video link embedded in the body of the message.


Setup Development Environment

  1. Sign up for Office 365 Developer Site
  2. Install Visual Studio 2013
  3. Install Office 365 API Tools for Visual Studio

Getting Started

Once your development environment is ready, fire up your Visual Studio 2013.

Create new Apps for Office project from File -> New -> Project -> Templates -> Office/SharePoint -> Apps -> Apps for Office.


Hit OK.


Select the app type - Mail and hit Next.


Select where you want the app to appear – while reading/composing email or in appointment. In our case, we’ll select Read Form which means the app will be available while you are reading an email. If you select Compose Form, the app will be displayed while composing new email (which is beyond the scope of this post).

Now hit Finish, your project is created and Solution Explorer looks as below:


You can see two projects – one is the manifest where you can add apps information like display name, version number, provider name, etc. The second project is a web project which hosts your app itself. The file Home.html inside directory Vimeo0365AppWeb\AppRead\Home is the file which will be rendered when you select your app in Read Form (same as the Bing map rendered when we selected Bing Maps app).

Open the manifest file and change the Display name to ‘Play Vimeo’ under the General tab; that’s your app name.


Now, switch to the Read Form tab and add an activation rule - Item matches a regular expression, for activating our app when regular expression matches a Vimeo video URL (example:


Now, select Property name as Body as HTML (for reading embedded URL), add regular expression for identifying Vimeo video URL and provider a regular expression name (for accessing from our code).


Open Home.html and replace the body contents with below code.


Open Home.js and replace the content with below code.


Hit F5 (Debug), which prompts you to connect to your email account.


Enter email address and password and hit Connect. This will take you through series of screens as shown below until you are logged in to your mail account.


Now open the mail containing Vimeo video link which you have send earlier.

You can see your app name – Play Vimeo, below the mail header.


Select the Play Vimeo app which expands, loads and renders Vimeo video within your email.


Note: the contents loaded here are from the Home.html file. You can play the video from here without leaving your mailbox.


Publishing of O365 apps is beyond the scope of this post. More information about publishing Office 365 apps can be found here.

Source code

Source code for the Vimeo sample can be downloaded from our GitHub.


2018 IdentityMine, Inc. Privacy Policy