AlertThis post is over a year old, some of this information may be out of date.
Create a compose form mail add-in for Outlook with the Office Developer Tools update 2
post
A couple of weeks ago the Office Developer Tools received its second update. These tools include the latest Office add-in project template that help you create add-ins for Excel, Word, Outlook, …
With the help of these tools, you should get up and running with Office Add-in development in no time. In fact, it was quicker in the previous version. There are a couple of things that got changed in this update. First of all, when you are going to create a new project, you will be asked which type of add-in you are going to create:
Show imagePrevious version of the Office templates
This is a good change, but let’s say if you want to create an Outlook add-in. Before you had the option to specify which type of add-in you wanted to create:
This wizard is not there anymore. The moment you create the project from the new Outlook Add-in template. It will automatically create a project with a read form add-in. You do not get the option to choose which type of add-in(s) you want to create. In my opinion, this makes things a bit tougher when you were used to what the previous version provided.
So in case, if you want to create a compose form add-in, you have to do some manual configuration to make it work.
Setting up the required files for your compose form add-in
Start by creating a new **ComposeForm **folder in your project for the compose form. This is not required, but it is cleaner to separate the forms.
<!DOCTYPE html><html><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=Edge"/><title></title><scriptsrc="Scripts/jquery-1.9.1.js"type="text/javascript"></script><!-- For the JavaScript APIs for Office, go to http://aka.ms/officejs-overview to learn more. --><scriptsrc="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"type="text/javascript"></script><!-- To enable offline debugging using a local reference to Office.js, use: --><!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> --><!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> --><scriptsrc="Form.js"type="text/javascript"></script><!-- For the Office UI Fabric, go to http://aka.ms/office-ui-fabric to learn more. --><linkrel="stylesheet"href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.min.css"/><linkrel="stylesheet"href="https://appsforoffice.microsoft.com/fabric/2.1.0/fabric.components.min.css"/><!-- To enable the offline use of Office UI Fabric, use: --><!-- link rel="stylesheet" href="Content/fabric.min.css" --><!-- link rel="stylesheet" href="Content/fabric.components.min.css" --><linkrel="stylesheet"href="Form.css"/></head><bodyclass="ms-font-m"><h1>Your compose form</h1></body></html>
Form.js
Add the following code to your JS file:
1
2
3
4
5
6
7
8
9
10
(function () {
"use strict";
// The Office initialize function must be run each time a new page is loaded.
Office.initialize = function (reason) {
$(document).ready(function () {
// Write some code
});
};
})();
Configuring the compose form
Now that all the required files are in place, it is time to configure the compose form to the manifest XML file.
Info: If you do not want to show the read form. You can change the FormType to Edit instead.
At this point, you configured the compose form for Outlook Online and Outlook 2013. If you want to use the add-in in Outlook 2016 you will have to do a bit more configuration in order to get it working.
Outlook 2016 configuration - add-in commands
For Outlook 2016 you will have to configure an additional add-in command in order to load the task pane. The configuration for this need to be done in the same manifest file as where you did the previous changes.
Find the ExtensionPoint element in the manifest file. This is the add-in command which is defined for the read form.
Info: If you do not need the read form in your add-in, you best remove the ExtensionPoint for the MessageReadCommandSurface type.
The last thing to do is creating the label variable and task pane URL. Add the following highlighted lines of code to your Resources element manifest file: lines 10, 17, 18, 22.
<Resources><bt:Images><bt:Imageid="icon16"DefaultValue="~remoteAppUrl/Images/icon16.png"/><bt:Imageid="icon32"DefaultValue="~remoteAppUrl/Images/icon32.png"/><bt:Imageid="icon80"DefaultValue="~remoteAppUrl/Images/icon80.png"/></bt:Images><bt:Urls><bt:Urlid="functionFile"DefaultValue="~remoteAppUrl/Functions/FunctionFile.html"/><bt:Urlid="messageReadTaskPaneUrl"DefaultValue="~remoteAppUrl/MessageRead.html"/><bt:Urlid="messageComposeTaskPaneUrl"DefaultValue="~remoteAppUrl/ComposeForm/form.html"/></bt:Urls><bt:ShortStrings><bt:Stringid="groupLabel"DefaultValue="My Add-in Group"/><bt:Stringid="customTabLabel"DefaultValue="My Add-in Tab"/><bt:Stringid="paneReadButtonLabel"DefaultValue="Display all properties"/><bt:Stringid="paneReadSuperTipTitle"DefaultValue="Get all properties"/><bt:Stringid="paneComposeButtonLabel"DefaultValue="Compose command"/><bt:Stringid="paneComposeSuperTipTitle"DefaultValue="Compose command super tip"/></bt:ShortStrings><bt:LongStrings><bt:Stringid="paneReadSuperTipDescription"DefaultValue="Opens a pane displaying all available properties. This is an example of a button that opens a task pane."/><bt:Stringid="paneComposeSuperTipDescription"DefaultValue="Compose command super tip description."/></bt:LongStrings></Resources>
Once this is in place, you can debug the application and you will get an add-in action that opens the compose form task pane in the Outlook 2016 client.