Introduction to Outlook Add-ins development based on web technology

Introduction to Outlook Add-ins development based on web technology

I was just in touch with the development of Outlook Add-ins, the level is limited; if there are errors in the article, please light up the bricks!

0. About Outlook add-ins

There are more than one type of Outlook plug-in, earlier with COM-based, VSTO-based (Visual Studio Tools for Office), and the web-based implementation approach described here. Microsoft's official website calls it: Outlook add-ins. This plug-in benefits:

(1) Cross-platform. Developed once and may be used for Outlook windows, Mac, Mobile, and web (Office 365 and Outlook.com) editions.

(2) Easy and flexible installation. You can install it locally or from the Office store with one click. Note: Microsoft is now engaged in an office store, and this market may become an outlet in the future. Tuyere, Tuyere , Tuyere ; it's important to say it three times.

(3) Development relative (COM plugin) simple. The project is composed of Manifest.xml, JavaScript, CSS, HTML, in other words, this plug-in is b/s structure, so the official release of the plug-in, must have a Web server and the front-end collaboration. The following picture basically illustrates the structure of this plug-in:

It is important to note that:

[1] This plug-in is not installed locally and is present in the cloud.

[2] Not all clients support the latest features at the same time. Outlook 2013 and later, Outlook for Mac, Outlook Web App (Exchange 2013), and Outlook Web Edition (Office 365 and Outlook.com) are currently supported Add-ins.

First, Outlook add-ins Preliminary study

The following is the Office store URL, you can install a few to see, most of the current plug-ins are free, not much charge.

Https://appsource.microsoft.com/zh-cn/marketplace/apps?product=outlook&page=1&src=office

I see a few more interesting plugins:

[1] Security scanning of messages:

Https://appsource.microsoft.com/en-us/product/office/WA104381359?src=office&tab=Overview

[2] Translation of the Mail:

Https://appsource.microsoft.com/en-us/product/office/WA104124372?src=office

[3] Booking of Starbucks venues:

Https://appsource.microsoft.com/en-us/product/office/WA104380233?src=office&tab=Overview

The corresponding icon appears on the Mail toolbar when you are finished installing it. The use of plug-ins is very simple: after you open a message, click an icon, the right side will automatically pop up a window to display the relevant content. Here, for example, an anti-virus plug-in, first open the suspicious mail, and then click the icon to scan, a few seconds after the return of the message in the security of the URL.

The small window on the right is the plugin's workspace, where you can display content related to the plug-in, such as waiting for animations, results, and so on. More to say, this anti-virus plugin seems to be a bit of use, the interface is pretty, you can avoid random URL in the Strokes, is this "TrendMicro" did not listen to, is estimated to be a startup company; if the big manufacturers out of the more reassuring!

Ii. Examples of development

To develop an Outlook plugin you need to know JavaScript & JQuery & Html & XML. This example comes from Microsoft's official website, and I have added my own understanding after practice. The simple function of this example is to get information about a message, such as the sender, ID, and so on.

3.1 Development environment Construction

L Install node. js, will not be installed self-Baidu

L Install yeoman:npm install-g yo generator-office

3.2 Development process

First step: Create a folder and open cmd with administrator privileges to enter the directory

Step Two: Create an Outlook add-in project using the Yeoman Builder

Note: The cmd shell must have Administrator privileges! The following are all the contents of cmd:

H:\>CD H:\myWorkProj\test\my-outlook-addin H:\myworkproj\test\my-outlook-addin> H:\myworkproj\test\my-outlook-addin>yo Office _-----_╭──────────────────────────╮ |    | │welcome to the Office│ |--(o)--| │add-in Generator, by│ '---------′│ @OfficeDev! Let ' s create│ (_′u ' _) │a project together! │ /___a___\/╰──────────────────────────╯ | ~  | __‘.___.‘ __ ' |°′y ' ? Would to create a new subfolder for your project? No ? What does want to name your add-in? My Office add-in ? Which Office client application would do I? Outlook ? Would to create a new add-in? Yes, I need to create a new Web app. and manifest file for My add-in. ? Would do I use TypeScript? No ? Choose a Framework:jquery For more information and resources on your next steps, we had created a resource.html file in your project. ? Would to open it now while we finish creating your project? Yes ---------------------------------------------------------------------------------- Creating My Office add-in add-in using JS and jquery ---------------------------------------------------------------------------------- Create Package.json Create My-office-add-in-manifest.xml Create App.css Create Assets\icon-16.png Create Assets\icon-32.png Create Assets\icon-80.png Create Assets\logo-filled.png Create Bsconfig.json Create function-file\function-file.html Create Function-file\function-file.js Create App.js Create index.html Create resource.html I ' m all done. Running NPM Install for your to install the required dependencies. If this fails, try running the command yourself. NPM WARN deprecated [email protected]: Express 2.x series is deprecated NPM WARN deprecated [email protected]: Connect 1.x series is deprecated NPM notice created a lockfile as Package-lock.json. You should commit the this file. NPM WARN [email protected] No description NPM WARN [email protected] No repository field. NPM WARN [email protected] No license field. NPM WARN Optional Skipping optional DEPENDENCY: [email protected] (node_modules\fsevents): NPM WARN notsup skipping OPTIONAL dependency:unsupported platform for [e-mail protected]: wanted {"OS": "Darwin", "Arch": "An Y "} (current: {" OS ":" Win32 "," Arch ":" x64 "}) Added 438 packages in 66.034s

Step Three: Modify the default code and configuration

[1] In the code editor (such as notepad++), open the index.htmlin the project root directory. Index.html determines the contents of the right window of Outlook. Replace

<div class= "Ms-fabric content-main" > <H1 class= "MS-FONT-XXL" >message properties <table class= "Ms-table ms-table--selectable" > <thead> <tr> <th>Property</th> <th>Value</th> </tr> </thead> <tbody class= "Prop-table"/> </table> </div>

[2] Locate the app.js edit in the root directory of the project, replace the entire content with the following code, and then save the file.

' Use strict ';   ({   The Initialize function must be run each time a new page is loaded {     $(Document).ready({       loadItemProps(Office.context.mailbox.item);     });   };   { Get the table BODY element var tbody = $( '. Prop-table ');   Add a row to the table for each message property     tbody.append(makeTableRow("Id", item.itemId));     tbody.append(makeTableRow("Subject", item.subject));     tbody.append(makeTableRow("Message Id", item.internetMessageId));     tbody.append(makeTableRow("From" "&lt;" + "&gt;"));   }   { return $( "<tr><td><strong>"       "</strong></td><td class=\" prop-val\ "><code>" + "</code></td></tr>");   }   })();

[3] in the root directory of the project, open app.css, replace the entire content with the following code, and then save the file.

Html, Body { Width 100%; Height 100%; Margin 0; Padding 0; }   Td.prop-val { Word-break: break-all; }   . content-main { Margin 10px; }

[4] Modifying manifest.xml

1. Open the my-office-add-in-manifest.xml file.
2. The ProviderName element has a placeholder value. Replace it with your name.
3. The DefaultValue property of the Description element has a placeholder. Replace it with My first Outlook add-in.
4. The DefaultValue property of the SupportUrl element has a placeholder. Replace it with https://localhost:3000.

... <ProviderName> Jason Johnston </ProviderName> <DefaultLocale> en-US </DefaultLocale> <!--the display name of your add-in. Used on the store and various places of the Office UI such as the Add-ins dialog. - <displayname defaultvalue= "My Office add-in"/> <description defaultvalue= "My first Outlook add-in"/>   <!--Icon for your add-in used on installation screens and the Add-ins dialog. - <iconurl defaultvalue= "Https://localhost:3000/assets/icon-32.png"/>   <!--If you plan to submit this add-in to the Office Store, uncomment the SupportUrl element below--> <supporturl defaultvalue= "https://localhost:3000"/> ...

Third, install the test plug-in

1. In the command prompt/line, make sure that you are in the root directory of the project and enter NPM start. This action launches the Web server (address https://localhost:3000) and opens the address in the default browser to ensure that Web server is started correctly.

2. Outlook installs the plugin. I am using Outlook 2016, which is installed in the following manner:

　　

After jumping to the browser, click "+" to select Load from the file, and the browser loads the my-office-add-in-manifest.xml file after loading the add-in page without any certificate errors.

After selecting Manifest.xml, follow the prompts to install

An icon appears above the Outlook toolbar after the installation is successful.

3. When using, open a message in Outlook and click on the plugin icon.

There is a problem with the self-signed certificate generated by the Microsoft Office Project Builder, which causes the browser to report that the add-in site is unsafe and prevents the plug-in from loading in the Outlook client. To see this page, click "Refresh the page" to continue.

Next click on "Continue to this website ...":

4. The task pane on the right is then automatically displayed, and we can see the information for the current message:

This is the end!

Introduction to Outlook Add-ins development based on web technology