Pieter van der Westhuizen

Creating Apps for Microsoft Outlook

In the last couple of weeks we’ve explored many aspects of both Google and Microsoft’s online offerings when it comes to Office productivity.

Gmail provides us with two options to add our own custom functionality in the form of sidebar and contextual gadgets.

Microsoft offers the JavaScript API for Office to developers which allows you to create Apps for Outlook using HTML, CSS and JavaScript. As we’ve discussed in earlier articles, the API does not perform the same level of customization options as the COM based object model, but we are seeing Microsoft investing heavily in the online space so we might get some mayor improvements and enhancements in the future.

In today’s article we’ll build a similar app for Outlook for the gadget we’ve build in my last post. Our app will use the subject line of an e-mail to check for search results on the Add-in Express forums and blogs besides we’ll also provide our user with the option to perform a manual search.

The following image is what we have in mind for the end result:

Custom Outlook app

Creating the Office App project

To create the Mail App for Office, head over to https://www.napacloudapp.com/ and add a new project:

Add a new project.

When prompted to select the kind of app you would like to build, select the “Mail app for Office” item and click on the “Create” button.

Create a Mail app for Outlook

The boilerplate project layout is automatically created for you and loaded inside the online development environment.

The boilerplate project layout is automatically created.

You will notice, that we have two distinctive folders named, AppCompose and AppRead. Each contains a Home folder. This is because the Mail Apps for Office allows developers to show their app content when the user is reading or editing a mail item.

It is important to keep in mind that only certain properties are accessible when the user is composing or reading an e-mail message. For example, when the user opens an e-mail in read mode, we’re not able to access the body or Bcc field of the e-mail. We’ll only focus on the read mode of the e-mail and will thus build our user interface inside the AppRead folder.

Creating the App user interface

Our app’s main user interface will consist of a navigation bar that contains the name of our app, a hyperlink to the Add-in Express website and a search box and button to perform a search. I am a fan of the Bootstrap library, so we’ll use it to make creating the UI easier. An added benefit is that the Bootstrap library is responsive, so will adapt nicely to smaller screens.

We’ll use a customized version of the bootstrap.css file, which will use the blue colors of Outlook to provide a unified look. To add the bootstrap.css file, right-click on the Home folder that is inside the AppRead folder and select “Add new item” as illustrated below:

To add the bootstrap.css file, right-click on the <b>Home</b> folder and select Add new item.

Select Style Sheet and type a name for the file, in this case bootstrap.css.

Select Style Sheet and type a name for the file.

Paste your custom css inside the newly created css file and navigate to the Home.html file next. The boilerplate project has already created a basic HTML layout, so we’ll only need to add a reference to the new .css file we’ve added previously and add our UI inside the <body> tag. Add the following line inside the <head> tag of the Home.html file:

<link href="bootstrap.css" rel="stylesheet" type="text/css" />

In order for the Bootstrap menu to work, we need to add a reference to the Bootstrap JavaScript library. Do this by adding the following line inside the <head> tag:

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Next, add the following HTML to the <body> tag:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">ADX Answers <span class="badge" id="numresults"></span></a>
        </div>
        <div id="mainnav" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="https://www.add-in-express.com/" target="_blank">Add-in Express Website</a></li>
            </ul>
            <form class="navbar-form navbar-right" role="form" id="searchform">
                <div class="row">
                    <div class="input-group col-xs-3" style="margin-left: 15px;">
                        <input type="text" id="query" placeholder="Search" class="form-control input-sm">
                        <span class="input-group-addon"><a href="#" onclick="$('#searchform').submit()">GO</a></span>
                    </div>
                    <div class="input-group col-xs-9">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
 
<div class="container">
    <div id="queryresults" class="list-group">
    </div>
</div>

The HTML above, created a navigation bar with a link to the Add-in Express website and a search box with a button. We also added another <div> element which will contain the results of the search.

Retrieving search results

Next, we need to add code that will submit the search query and load the results into our UI. Open the Home.js file and add the following code to it:

/// <reference path="../App.js" />
/*global app*/
 
(function () {
    'use strict';
    Office.initialize = function (reason) {
        $(document).ready(function () {
            app.initialize();
            var item = Office.context.mailbox.item;
            var subjectText = encodeURIComponent(item.subject);
            $.getJSON('https://www.add-in-express.com/search-addin-json.php?q=' + subjectText + '&callback=?', function (data) {
                showResults(data.result);
            });
 
            $("#searchform").submit(function (event) {
                $('#mainnav').removeClass('in');
                $("#queryresults").empty();
                var searchFor = encodeURIComponent($('#query').val());
                $.getJSON('https://www.add-in-express.com/search-addin-json.php?q=' + searchFor + '&callback=?', function (data) {
                    showResults(data.result);
                });
                event.preventDefault();
            });
 
            function showResults(jsondata) {
                $('#numresults').html(jsondata.length);
                for (var i = 0; i < jsondata.length; i++) {
                    var item = jsondata[i];
                    $("#queryresults").append('<a href="' + item.link + '" target="_blank" class="list-group-item"><h5 class="list-group-item-heading">' + item.title + '</h5><p class="list-group-item-text">' + item.body + '</p></a>');
                }
            }
        });
    };
})();

In the code above, we’ll receive a reference to the current open e-mail message and save its subject to a variable. We’ll then submit this value to the Add-in Express search service. After we received a response from the search service, we’ll pass the search results to the showResults function. The showResults function loops through the returned results and adds it as list items <li> to the queryresults <div> element.

We also added a handler to intercept the form submit when the user clicks on the “GO” button and saves the search term the user entered inside the search box to a variable. This variable is then sent to the Add-in Express search service and the results are then passed to the showResults function.

Note. The office.js API does not provide a function to allow you to make requests to third-party websites and as a result you will receive error messages in your browser console that cross-domain results are blocked. I got around this by asking our webmaster extraordinaire Victor to return the search results in JSONP format. You can read more about the same-origin policy on MSDN.

With everything in place, you should see the search result shown inside the app when you initiated a search, as illustrated below:

The Outlook mail app shows the search result when you have initiated a search.

Thank you for reading. Until next time, keep coding!

Available downloads:

Sample Outlook Mail app

You may also be interested in:

Post a comment

Have any questions? Ask us right now!