How to: Create your first mail app for Outlook by using a text editor
Learn how to use a text editor to create a simple mail app for Outlook.
Last modified: May 01, 2015
Applies to: apps for Office | Office Add-ins | Outlook
Learn more about supported hosts and other requirements.
The name "apps for Office" is changing to "Office Add-ins". During the transition, the documentation and the UI of some Office host applications and Visual Studio tools might still use the term "apps for Office".
After you create your first mail app by using a text editor, you can learn more about the fundamentals for developing mail apps for Outlook.
Before you begin, make sure that you have access to the following:
A text editor
A computer that is running Exchange Online, Exchange Online as part of Office 365, or an on-premises version of Exchange starting with Exchange Server 2013 Service Pack 1 (SP1)
A web server that your Exchange server can access
To create a mail app
Create a file that contains the following HTML code.
<!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> </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>
The script element must be closed with a </script> tag so that the script block is correctly processed by all browsers.
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.
document.getElementById("senderDisplayName").innerText = mailbox.item.sender.displayName; document.getElementById("senderEmailAddress").innerText = mailbox.item.sender.emailAddress; document.getElementById("recipientDisplayName").innerText = mailbox.item.to.displayName; document.getElementById("recipientEmailAddress").innerText = mailbox.item.to.emailAddress;
Save the file as default.htm.
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.1" 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." /> <Requirements> <Sets DefaultMinVersion="1.1"> <Set Name="Mailbox" /> </Sets> </Requirements> <FormSettings> <Form xsi:type="ItemRead"> <DesktopSettings> <!-- Specify your web server and path in place of 'webserver'. --> <SourceLocation DefaultValue="https://webserver/default.htm" /> <RequestedHeight>250</RequestedHeight> </DesktopSettings> </Form> </FormSettings> <Permissions>ReadItem</Permissions> <Rule xsi:type="ItemIs" FormType="Read" ItemType="Message" /> </OfficeApp>
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.
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:
manifest.xml — The XML manifest file that describes your 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:
Log on to the Exchange server by using a valid user name and password.
Choose Manage apps to open the mail app manager.
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.