Develop and debug Mail add-in

Develop and debug mail add-in (Mail app for Outlook) preparation

If your mailbox is built on Exchange Server, you can create a mail application (mail add-in) to extend the functionality of Office itself, and Mail add-in developed with Office add-in Model can run in the Outlook rich Outlook Web App and on OWA for a variety of devices, such as IOS. Before you develop, you need a valid email account and password (such as your work email within the company).

Create a Mail add-in project Step 1

In Visual Studio (such as), click file >> new >> project , in the pop-up window, expand the project template on the left, click Visual C # > > Office/sharepoint >> Apps >> App for Office.

Note: The VS version number used in this article is Visual Studio Ultimate version 12.0.30723.00 Update 3, and the "Office add-ins" you see in the project template refers to the creation of OFFI based on VSTO technology The project template for the CE extension application. In the latest office Developer Tools for Visual Studio naming, office add-ins has been replaced by Office VSTO Add-ins, and as appropriate, Apps has been installed by Office We b AddIn is replaced (see Https://msdn.microsoft.com/en-us/library/fp161507.aspx#bk_newname for details).

Also, if Office/sharepoint is not found under the project template, download the corresponding vs version of Office Developer Tools for Visual Studio (https://www.visualstudio.com/ en-us/features/office-tools-vs.aspx), for Visual Studio 2013, such as Office Developer tools for Visual Studio. (:/HTTP/ aka.ms/officedevtoolsforvs2013).

Step 2

Select the type of add-in you want to create and selectMail. You can see what types of office add-in are available through the Office Apps type and platform support.

Step 3

Select Mail add-in in which states of the message (read-only, edit) appear, and here we only want add-in to appear when the user reads the message or the appointment.

Step 4

In the project, locate home.html (Office Developer Tools for Visual Studio 2013 that contains this page in the project that is generated by Mail add-in, and is the first page of add-in, and if you do not find it, you can root According to the following manifest's introduction to find the main page and then continue, paste the code below to overwrite the original content.

<! DOCTYPE html>Step 5
Locate and modify the home.js file (similar to step 4, if you do not have it in your project, you can find the Add-in home page, then create the home.js under the same path on the homepage, and then continue), paste the following code to overwrite the original content
    The Office initialize function must be run each time a new page is loaded    office.initialize = function (reason) {
   $ (document). Ready (function () {            displayitemdetails ();        });    };    Displays the ' Subject ' and ' from ' fields, based on the current mail item    function displayitemdetails () {        var it EM = Office.cast.item.toItemRead (Office.context.mailbox.item);        $ (' #subject '). Text (item.subject);        var from;        if (Item.itemtype = = = Office.MailboxEnums.ItemType.Message) {from            = Office.cast.item.toMessageRead (item).        } else if (Item.itemtype = = = Office.MailboxEnums.ItemType.Appointment) {from            = Office.cast.item.toAppointmentRead (item). Organizer;        }        if (from) {            $ (' #from '). Text ("DisplayName:" + From.displayname + ", Email Address:" + from.emailaddress);        }    }
Step 6
Click the green arrow button to launch and select the browser, VS will pop up a webpage with that browser (similar to the following page, do not care about it too much)
Step 7
At this point, when you open any of the messages on the Outlook client or Web page on this development machine, you will find a link to Zanapp: 
After clicking Zanapp, Add-in starts to run as follows, at which point the subject and sender of this message will be displayed in Add-in.
Debugging AddIn Code Project file Introduction
At this point, you'll see two items in Visual Studio like this: the first project is the configuration file for managing the Add-in, and the second project is the add-in implementation (that is, the Web site).
When we click on the green arrow button to start the project, VS will ask you to enter your mailbox user name and password, and then it completes the deployment for debugging using the following steps:
 
1. Upload the current add-in manifest (add-in configuration file) to the Exchange server that the current developer is logged on to.
You can modify the Add-in home page and other basic information by modifying the configuration file in the first project. Here is an example of a Manifest that you can use to recognize which properties of add-in can be customized. More detailed official document information in Office add-ins XML manifest.
<?xml version= "1.0" encoding= "UTF-8"?><!--created:cb85b80c-f585-40ff-8bfc-12ff4d0e34a9-->< OfficeApp xmlns= "http://schemas.microsoft.com/office/appforoffice/1.0" xmlns:xsi= "http://www.w3.org/2001/ Xmlschema-instance "xsi:type=" Mailapp "> <Id>c425abba-72d8-4343-a960-0e30291217d0</Id> <version >1.0.0.0</Version> <providername>[provider name]</providername> <defaultlocale>en-us </DefaultLocale> <displayname defaultvalue= "Zanapp"/> <description defaultvalue= "Zanapp"/> < Appdomains> <AppDomain>https://login.microsoftonline.com/common/oauth2/authorize</AppDomain> < !--when add-in pages need to redirect any other domain, you need to add the domain name to AppDomains--</AppDomains> <Capabilities> < Capability name= "Mailbox"/> </Capabilities> <DesktopSettings> <sourcelocation defaultvalue= "https ://localhost:44306/addin/appread/home/home.html "/> <!-add-in when loading home--<reqUestedheight>300</requestedheight> <!-add-in The height of the message--</DesktopSettings> <permissions    >ReadItem</Permissions> <!-current add-in requires mailbox permissions--<rule xsi:type= "rulecollection" mode= "Or" > <rule xsi:type= "Itemis" itemtype= "Message"/> <rule xsi:type= "Itemis" itemtype= "Appointment"/> </Rule&  Gt <DisableEntityHighlighting>false</DisableEntityHighlighting></OfficeApp>
2. The implementation of the current add-in (actually a website) with iisexpress host up. (Note that the mail application requires host under the HTTPS-enabled URL, the apps for Office platform requires, "All source files is hosted on secure (HTTP S) sites. For details, please refer to tips to develop a great mail app for Office)
This allows us to access the home page in the add-in, such as https://localhost:44304/appread/home/home.html.
At this point, if you open any of the messages in the mail client on the current machine, you can see the Add-in Portal link. (Other users cannot see the add-in in the debug phase)
Debugging--How to debug the Add-in code implementation
Add-in needs to run on mail clients (such as Outlook), so even if we're developing add-in with JavaScript code, we can't debug with the browser F12 developer tools (unless you're using Web-based mailbox OWA to open). Next we will show you how to use Visual Studio to debug the add-in code in the "hosted and run in" Outlook interface (in the IFRAME), such as JavaScript.
First, it is necessary to mention that Add-in is actually running in an iframe embedded in the Outlook read mail interface, so it will eventually be parsed and run by the browser (IE). If you want to debug the code, we need to find the browser process number that runs the code.
 
1. Use fiddler query to run Add-in's browser process number
Open any e-mail, click the add-in Portal link, add-in display similar to the following interface:
Open fiddler, you can see a green box in the section, click the left mouse button and move it to the add-in display area, Fiddler will find and display the browser process number running the add-in.
2. Use VS Attach to the process
Open another Visual Studio 2013 program without opening any projects
Click debug>> Attach to process, as shown, find the corresponding browser process, click Attach.
3. Start debugging
Next, files that run in the browser process, such as JS, are displayed in the Solution Explorer, and you can double-click to open the file and add a breakpoint to it. The breakpoint can then be triggered by the necessary means (such as Reload add-in page or by clicking the button in add-in) to debug.
 
This debugging method is also useful for developing task panel add-in and content add-in on Word, Excel, ppt.
Resources
 
 

  
  
 
   
What's new in Office Developer Tools for Visual Studio--https://msdn.microsoft.com/en-us/library/office/jj220049.a Spx
 
   
Office Developer Tools--https://www.visualstudio.com/en-us/features/office-tools-vs.aspx
 
   
Office add-ins XML Manifest--https://msdn.microsoft.com/en-us/library/office/fp161044.aspx
 
   
Office Apps types and platform support--http://simpeng.net/oai/oai-chapter-1/ Office-addin-types-and-current-platoform-supporting.html?s=oai-chapter-1-section-3
 
   
Tips to develop a great mail apps for Office--http://blogs.msdn.com/b/officeapps/archive/2013/10/16/ Tips-to-develop-a-great-mail-app-for-office.aspx
 
   
Use Visual Studio to create your first mail application for Outlook--https://msdn.microsoft.com/zh-SG/library/fp142159
 
  
 
 
 Developing and debugging Mail add-in