2 out of 2 rated this helpful - Rate this topic

How to: Create your first mail app for Outlook by using a text editor

apps for SharePoint

Published: February 26, 2013

Learn how to use a text editor to create a simple mail app that creates a table that contains the email address of the sender and the first recipient found in a message.

In this article
Create the mail app for Outlook
Create the manifest file
Deploy the source
Install the mail app

Note
Unless otherwise specified, references to "Outlook" apply to the Outlook 2013 rich client and Outlook Web App for Exchange Server 2013.

Prerequisites for creating your first mail app

Before you create your first mail app, make sure that you have access to the following:

A text editor
Exchange 2013
A web server that your Exchange 2013 server can access

Create the mail app for Outlook

A mail app for Outlook is an HMTL document that includes JavaScript code. The user interface for the mail app is provided by a standard HTML file with JavaScript. Use the following steps to create a simple UI for a mail app.

To create a mail app

Create a file that contains the following HTML code.

HTML


<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
    <!-- The title element is optional and will not be displayed anywhere. -->
    <title>Sender and Recipient</title>
</head>
<body style="margin: 4px">
    <h3>Email Details</h3>
    <table>
       <tr><td>&nbsp;</td><td>Sender</td><td>Recipient</td></tr>
       <tr><td>Display Name</td><td id="senderDisplayName" /><td id="recipientDisplayName" /></tr>
       <tr><td>Email Address</td><td id="senderEmailAddress" /><td id="recipientEmailAddress" /></tr>
    </table> 
</body>
</html>

Add references to the mail app JavaScript API by adding the following code to the head element.

Note
The script element must be closed with a </script> tag so that the script block is correctly processed by all browsers.

JavaScript

<!-- Add these two references to MicrosoftAjax.js and Office.js. -->
    <script src="<local directory>\MicrosoftAjax.js" type="text/javascript"></script>
    <script src="<local directory>\Office.js" type="text/javascript"></script>

Create the initialization function that the client will call to initialize your mail app. In this example, the initialization function creates a table that contains the sender and recipient of the selected message.

In the complete app, the initialization function is included in a script block in the HTML document, but the function can be in a separate JavaScript file that is included in the HTML files.

JavaScript

    <script type="text/javascript">
        /*
        Global variables to hold references to the host application object that provides access to
        the Framework APIs and the settings of your mail app.
        */
        var outlook;
        var settings;

        /*
        When the Framework is ready, the initialize() method will be called.
        This method is the entry point for your code.
        */

        // The initialize function is required for all apps.
        Office.initialize = function () {
        // Checks for the DOM to load using the jQuery ready function.
        $(document).ready(function () {
        // After the DOM is loaded, app-specific code can run.
        mailbox = Office.context.mailbox
        settings = Office.context.roamingSettings;

        /* mail app code goes here */

    });
}





    
</script>

Add the JavaScript code that gets the sender and recipient information for the first recipient in the recipient list and displays it on the mail app pane.

document.getElementById("senderDisplayName").innerText = mailbox.item.sender.displayName;
document.getElementById("senderEmailAddress").innerText = mailbox.item.sender.emailAddress;
document.getElementById("recipientDisplayName").innerText = mailbox.item.to[0].displayName;
document.getElementById("recipientEmailAddress").innerText = mailbox.item.to[0].emailAddress;

Save the file as default.htm.

Create the manifest file

The manifest file provides the location of the mail app HTML file and the location of other information about your app, such as the display name and description. It also defines the set of criteria that must be met in order to activate your mail app and show its UI via Outlook.

Each app has a unique identifier that you have to generate and include in the manifest file. The identifier is a UUID. You can use a standard GUID generation tool, such as guidgen.exe, to generate the identifier. For more information, see Create GUID (guidgen.exe).

This simple manifest file shows your mail app for every email message, meeting request, meeting response, or meeting cancellation that is displayed Outlook.

Update the following with the app identifier and the URL of the source location that contains your mail app HTML, and then save it with the file name manifest.xml.

<?xml version="1.0" encoding="utf-8"?>

<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0" 
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:type="MailApp">
    <!-- Id is a unique UUID for the mail app -->
    <Id>FA22E9EA-5845-4198-B298-F106D123C863</Id>
    <Version>1.0</Version>
    <ProviderName>Contoso</ProviderName>
    <DefaultLocale>en-us</DefaultLocale>
    <DisplayName DefaultValue="First" />
    <Description DefaultValue="A simple first mail app." />

    <Capabilities>
      <Capability Name="Mailbox" />
   </Capabilities>

   <DesktopSettings>
      <!-- Specify your web server and path in place of 'webserver'. -->
      <SourceLocation DefaultValue="https://webserver/default.htm" />
      <RequestedHeight>250</RequestedHeight>
   </DesktopSettings>
   <Permissions>ReadItem</Permissions>

   <Rule xsi:type="ItemIs" ItemType="Message" />
</OfficeApp>

Note
Your web server must have a valid certificate that traces to a trusted root certificate; otherwise, your mail app will fail with authentication errors. For more information about using a self-signed certificate for testing, see Create a Self-Signed Server Certificate in IIS 7.

Deploy the source

The mail app source must be available on a web server to which the Exchange server can create an HTTP connection. You can use any standard method for deploying the required files to your web server. The following files must be stored on your web server:

default.htm — The HTML/JavaScript source files for your mail app.
manifest.xml — The XML manifest file that describes your mail app.

Install the mail app

You can use the Exchange Admin Center (EAC) to install a mail app.

To install a mail app

Open the EAC by using a URL that resembles the following:

https://<exchange server>/ecp/
Log on to the Exchange server by using a valid user name and password.

Choose Manage apps to open the mail app manager.

Note
If you are logged on as the Exchange server administrator, you must first select the user name in the upper-right corner, and then choose My Options to open the account control panel.

Select the plus sign (+) to add a new mail app.
From the drop-down list, select Add from URL.
Enter the fully qualified URL of the manifest file that you deployed earlier to your web server, and then choose Install.
Select the user name in the upper-right corner of the window and select My Mail to switch to your email to test the mail app.

Additional resources

Did you find this helpful? Yes No

Not accurate

Not enough depth

Need more code examples

(1500 characters remaining)

Community Additions

ADD

How to: Create your first mail app for Outlook by using a text editor

To create a mail app

To install a mail app

Community Additions

Getting Started

Samples & Training

References

Connect

Developer Centers

Information for