23 out of 33 rated this helpful - Rate this topic

How to: Create your first mail app for Outlook by using "Napa" Office 365 Development Tools

apps for Office

Published: February 26, 2013

How to

Learn how to create a mail app for Outlook by using "Napa" Office 365 Development Tools

Note
We can also show you how to build a mail app by using Visual Studio or a text editor. If you’re not quite sure which tool to use, make sure to read our Development basics.

In this article
Prerequisites
Overview
Create a basic mail app for Outlook
Change the properties of the app
Extract addresses from Outlook items
Show the history of property values for a selected address
Debug your mail app in Windows Internet Explorer 9
Additional resources

Prerequisites

You need the following components to complete this walkthrough:

Office 365 account
The "Napa" Office 365 Development Tools app

For more information, see Sign up for an Office 365 Developer Site.

Overview

By reviewing this walkthrough, you can learn how to create a simple mail app for Outlook by using "Napa" Office 365 Development Tools. The app that you’ll create enables users to view the history of property values for all of the addresses that appear in the body of the currently open email message.

This example is simple, but demonstrates how to get information from an open item. In your app, you might use an address to get information from a service such as a map or more detailed information about the value of a property, sales history, or real estate taxes.

For more information about "Napa" Office 365 Development Tools see Create apps for Office and SharePoint by using "Napa" Office 365 Development Tools.

Create a basic mail app for Outlook

In this procedure, you will create a basic mail app for Outlook.

To create a basic mail app for Outlook

Choose the Add New Project button.

Note
The Add New Project button appears only if you have created other projects. If this is your first project, skip to the next step.

Figure 1. New project tile

Choose the Mail app for Office tile, name the project MyFirstMailApp, and then choose the Create button.

Figure 2. Mail app project tile

The code editor opens and shows the default webpage (named Home.html), which already contains some sample code that you can run without doing anything else.

In the Home.html file, replace the opening and closing <body> tags with the following code.

HTML

<body>
<!-- Page content -->
<div id="content-main">
<div class="padding">
<p><strong>Select an address to view the property value history:</strong></p>
  <form name= "addressForm"" id="addresses">
                    <table>
<tr>
                            <td>
                                <table id="addressOptions"></table>
                            </td>
    </tr>
                     </table>
                 </form>
 <div id="valueWidget"></div>
</div>
</div>
<div id="content-footer">
<div class="padding">
</div>
</div>
</body>

This code adds a table that will contain a list of addresses and a section that will contain the history of property values.

Change the properties of the app

In this procedure, you will specify a name and description for your app. Then, you will apply activation rules to the app so that your mail app appears only next to mail items that have addresses in them.

To change the properties of the app

At the bottom of the page, choose the properties () button.

The properties of the mail app appear.
Set the Name, and Description properties to these values:

Figure 6. The General tab of the Properties page

The Name and Description properties help users understand the purpose of the app for Office when it appears in a list of available apps for an Office application.
Choose the Activation Rules tab.
Select the Subject or body of the item contains a known entity check box.
In the Subject or body of the item contains a known entity list, choose Address.

These rules ensure that your app appears only next to mail items that have addresses in them.

Figure 7. The activation rules that ensure that your mail app appears only next to mails that contain addresses

Choose the X button in the upper-right corner of the Properties dialog box.

The property values are saved, and the properties page closes.

Note
The Properties editor shows the most common settings of a mail app. It does not show all of the possible settings of a mail app. If your scenario requires you to modify settings that do not appear in the Properties editor, you can create your app by using Visual Studio or a text editor.

Extract addresses from Outlook items

Your mail app can identify and obtain certain strings in the subject and body of the current Outlook item, including addresses, contacts, email addresses, meeting suggestions, phone numbers, task suggestions, and URLs. In this procedure, you will get an array of addresses from the body of the current Outlook item and show those addresses in the mail app.

To view examples of obtaining other types of strings, see How to: Extract entity strings from an item in a mail app for Outlook.

To extract addresses from Outlook items

On the side of the page, choose Home.js.

In the code editor, open the Home.js file, and replace the contents of this file with the following code.

JavaScript

/// <reference path="../App.js" />
/*global app*/

(function () {
'use strict';

// The Office initialize function must be run each time a new page is loaded
Office.initialize = function (reason) {
$(document).ready(function () {
app.initialize();
       $('#addresses').click(getSelectedAddress);
   getAddresses();
   
});
};
})();

function getAddresses() {
    var item = Office.context.mailbox.item;
    var entities = item.getEntities();
    var addressesArray = entities.addresses;
    
    for (var i = 0; i < addressesArray.length; i++) {
    var src = "<tr><td><Input type='radio' name='address' value='" + addressesArray[i] +
                  "'></td><td>" + addressesArray[i] + "</td></tr>";
  
        $('#addressOptions').append($(src));

      }
}

Show the history of property values for a selected address

In this procedure, you’ll add code that runs when the user chooses an address in the app. The code will use the address that the user chose to show a line chart of property values over the past year.

To show the history of property values for the selected address

On the side of the page, choose Home.js.

In the code editor, open the Home.js file, and add the following functions.

JavaScript

function ShowPropertyValues(address) {

    var encodedAddress = encodeURIComponent(address);

    var src = "<iframe height='300' width='300' " +
              "src='https://www.zillow.com/widgets/zestimate/ZestimateLargeWidget.htm?" +
              "did=zillow-shv-large-iframe-widget&type=iframe&address=" +
               encodedAddress + "&searchbox=no&skinnyWidget=true&tc=566276&bgc=e2e7eb'></iframe>";

    $('#valueWidget').empty();
    $('#valueWidget').append($(src));
}

function getSelectedAddress() {

    var selectedItem = "";

    for (i = 0; i < document.addressForm.address.length; i++) {

        if (document.addressForm.address[i].checked) {
            selectedItem = document.addressForm.address[i].value;
        }
    }
    if (selectedItem === "") {
        selectedItem = document.addressForm.address.defaultValue;
    }
ShowPropertyValues(selectedItem);
}

Run it!

Now you can run the app.

To run the app

On the side of the page, choose the run () button.

A dialog box appears that prompts you to provide your email address and password.
Provide the email address and password for a server that is running Exchange Server 2013, and then choose Continue.
In Outlook, send yourself an email message that contains one or more addresses.
After the message appears in the Inbox folder, open the message.
At the top of the message, choose MyFirstMailApp.

The MyFirstMailApp app opens. The addresses appear as options in the app.
Choose an address from the list.

The history of property values associated with that address appears in a chart.
Close Outlook.

Debug your mail app in Windows Internet Explorer 9

If you use Windows Internet Explorer 9, you can use F12 developer tools to debug the JavaScript, HTML, and Cascading Style Sheets (CSS) of your mail app. For more information, see How to: use F12 Developer Tools to Debug your Webpages.

If you use a browser other than Windows Internet Explorer 9, consult the documentation for that browser.

The following procedure shows you how to open F12 tools, start the debugger, and cause execution to stop on a line of code in your Home.js file.

To get started debugging your mail app in Windows Internet Explorer 9

At the bottom of the page, choose the run () button.

A dialog box appears that prompts you to provide your email address and password.
Provide the email address and password for a server that is running Exchange Server 2013, and then choose Continue.
Open the message that contains the address.
At the top of the message, choose MyFirstMailApp.

The MyFirstMailApp app opens.
Press the F12 key on your keyboard.

The F12 tools open in a separate window.
In the F12 tools window, choose the Script tab, and then choose the Start debugging button.
From the drop-down list next to the Stop debugging button, select Home.js.

The contents of the MyAppPage file appears in the left pane of the window.
Set a breakpoint next to the getSelectedAddress method.

For more information about how to set a breakpoint in the F12 tool window, see Breaking Code Execution.
In shortcut menu for the mail app, choose Refresh
Choose an address from the list.

In the F12 tools window, execution stops on the getSelectedAddress method.

For more information, see How to: use F12 Developer Tools to Debug your Webpages.

Next Steps

Now that you’ve created a basic mail app, consider exploring the following paths:

Share your project with someone else by choosing the Share Project (). "Napa" Office 365 Development Tools creates a copy of your project and provides you with a public link that you can give to anyone you want.
Publish your app by choosing the Publish button ().

For more information, see How to: Publish an app for Office.
Open your project in Visual Studio by choosing the Open in Visual Studio () button. "Napa" Office 365 Development Tools automatically installs the necessary tools and opens your project in Visual Studio 2012.

You can also download and install these tools directly by visiting the Downloads page of the Apps for Office and SharePoint Dev Center. For more information, see Downloads.
Create a mail app by using Visual Studio. For more information, see How to: Create your first mail app for Outlook by using Visual Studio.

Additional resources

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Additions

ADD