最近因为工作需要，研究了下Outlook Add-in 和 Graph API。下面带大家建立一个Hello World 项目

建立Add-in

先前需求：

　　Node.js

　　使用cmd/PowerShell安装最新版本的Yeoman 和Yeoman generator for Office Add-ins

npm install -g yo generator-office

建立项目

使用cmd来访问新文件夹

cd my-outlook-addin

使用Yeoman建立office项目

yo office

使用jQuery模板

选择JavaScript

命名你的项目

选择outlook为创建项目

经过漫长的等待之后CMD里面显示项目已经创建好了。

通过cmd 来访问office add-in 文件夹（注意：这步是必须的，不然等下编译的时候会报manifest文件丢失的错误）

打开visual studio code

在index.html 里面，用下面的代码来代替<body>里面的<header> 和 <main>

<div class="ms-Fabric content-main">

    <h1 class="ms-font-xxl">Message properties</h1>

    <table class="ms-Table ms-Table--selectable">

        <thead>

            <tr>

                <th>Property</th>

                <th>Value</th>

            </tr>

        </thead>

        <tbody class="prop-table"/>

    </table>

</div>

打开src/index.js, 用以下代码来代替index.js

以下代码有这些功能：

1.  初始化Office

2.  加载当前outlook里面已经选择邮件

3.  在table里面添加当前email的 properties

'use strict';

(function () {

  // The initialize function must be run each time a new page is loaded

  Office.initialize = function (reason) {

    $(document).ready(function () {

      loadItemProps(Office.context.mailbox.item);

    });

  };

  function loadItemProps(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", item.from.displayName + " &lt;" +

      item.from.emailAddress + "&gt;"));

  }

  function makeTableRow(name, value) {

    return $("<tr><td><strong>" + name +

      "</strong></td><td class=\"prop-val\"><code>" +

      value + "</code></td></tr>");

  }

})();

为了让我们的table更好看一下， 我们添加一些css到 app.css里面

html,

body {

    width: 100%;

    height: 100%;

    margin:;

    padding:;

}

td.prop-val {

    word-break: break-all;

}

.content-main {

    margin: 10px;

}

在我们编译之前，我们还需要设置下manifest.xml文档

最重要的属性是SupportUrl。这是我们debug的地址。

接下来是sideload 我们的 manifest 到Outlook里面。

请跟随这篇文章来部署add-ins

开始编译调试我们的outlook add-in

在terminal里面输入以下cmd

npm install

在编译成功之后，我们可以打开outlook了

注意，需要用admin来打开outlook。 打开outlook之后，选中sideload相同的邮箱，add-in 已经自动加载了。

如果没有自动加载， 请打开Store来手动添加

源代码已经上传到GitHub

建立你第一个 Outlook Add-in的更多相关文章

  1. 实现一个名为Person的类和它的子类Employee，Manager是Employee的子类，设计一个方法add用于涨工资，普通员工一次能涨10％，经理能涨20％。

    1.实现一个名为Person的类和它的子类Employee,Manager是Employee的子类,设计一个方法add用于涨工资,普通员工一次能涨10%,经理能涨20%.具体要求如下:(1)Perso ...

  2. 在包a中新建一个类A，在类A中有一个int add(int m)方法，用来求1+2+…+m 的和。在包b中新建一个类B，在类B中有一个int cheng(int n)方法，用来求n! 的结果。在包c中新建一个主类C，调用A、B中的方法输出1+2+…+30的和， 以及5！的计算结果。

    package a; public class A { public void add(int m) { int sum=0; for (int i = 1; i <=m; i++) { sum ...

  3. DHTMLX 前端框架 建立你的一个应用程序 教程(十一)--添加/删除表格中的记录

    添加/删除表格中的记录 我们的最终功能是在表格中添加删除 我们通过单机工具栏上的按钮来实现添加删除 当我们单击添加按钮的时候, 表单中 第一行默认填写New contact 光标自动聚焦 当用户点击删 ...

  4. DHTMLX 前端框架 建立你的一个应用程序 教程(十)--保存表单中的数据

    保存表单中的数据 现在我们所要做的是 当用户点击提交按钮的时候  我们将表单中的数据进行保存操作. 我们可以使用dhtmlxDataProcessor. 来进行操作.它是一个数据组件,可以提供与服务器 ...

  5. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  6. DHTMLX 前端框架 建立你的一个应用程序 教程(七)-- 添加筛选功能

    表格的过滤筛选 我们在每列第一行添加一个文本,用做数据的条件筛选. 我们还提供服务端的筛选 ,当有大量数据时 , 我们可以使用dhtmlxConnector 进行后台数据的筛选. 添加过滤器到表格列中 ...

  7. DHTMLX 前端框架 建立你的一个应用程序 教程(六)-- 表格加载数据

    从数据库加载数据 这篇我们介绍从MySQL数据库中加载数据到表格 我们使用 MySql的数据库dhtmlx_tutorial 和表contacts 示例使用的是PHP平台和dhtmlxConnecto ...

  8. DHTMLX 前端框架 建立你的一个应用程序教程(三)--添加一个菜单

    菜单的介绍 这篇我们介绍将菜单组建添加到上节中的布局中: 我们不对菜单做任何处理  只是在这里填充作为界面的一部分. 这里我们介绍的是dhtmlxMenu 组件. 这个组件的数据我们可以从XML或者J ...

  9. DHTMLX 前端框架 建立你的一个应用程序教程(二)--设置布局

    Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中 布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...

随机推荐

  1. 你真的会使用Github吗？

    快捷键 r 快速引用 你可以选中别人的评论文字,然后按r,这些内容会以引用的形式被复制在文本框中: t:搜索文件 s:光标定位到搜索窗口 w:选择分支 g n Go to Notifications ...

  2. <Java><类与对象><OOP>

    Overview 类 封装(encapsulation): 也称为数据隐藏.从形式上看,是将数据与行为组合起来,并对对象的使用者隐藏了数据的实现方式.封装给对象赋予了黑盒特征,提高重用性和可靠性. 继 ...

  3. 20165326 java第二周学习笔记

    学习笔记 一.理论学习 基本数据类型与数组 标识符的第一个字符不能是数字:标识符不能为关键字. 基本数据类型多数与c语言相同.重点如下: 1.逻辑类型boolean赋值true/false 2.浮点数 ...

  4. nginx的相关配置记录和总结

    前言 本文旨在对nginx的各项配置文件和参数做一个记录和总结. 原因是在配置框架和虚拟目录,web语言解析的nginx环境的时候遇到各种问题和参数,有时百度可以解决,有时直接复制粘贴,大都当时有些记 ...

  5. mail命令入门及进阶

    mail是linux shell中的邮件工具,与crontab配合使用,可以实现定期发送邮件.本文主要介绍mail工具使用方法及注意事项. 1.mail命令一般用法: mail –s "邮件 ...

  6. xshell 评估过期

    手头拮据的朋友可以通过下面方法绕过: https://www.netsarang.com/download/down_form.html?code=522 删除XShell. 到英文官网下载页找到XS ...

  7. SpringMvc使用FastJson做为json的转换器（注解方式）

    在使用XML方式配置项目,使用fastjson做为Json转换器时通常的在XML内添加如下的配置: <mvc:message-converters register-defaults=" ...

  8. 【Python】xpath-1

    1.coverage包实现代码覆盖率 (1)pip install coverage (2)coverage run XX.py(测试脚本文件) (3)coverage report -m 在控制台打 ...

  9. prototype和_proto_

    __proto__(隐式原型)与prototype(显式原型) 显式原型 explicit prototype property:用来实现基于原型的继承与属性的共享. 每一个函数在创建之后都会拥有一个 ...

  10. PHP安全之webshell和后门检测（转）

    基于PHP的应用面临着各种各样的攻击: XSS:对PHP的Web应用而言,跨站脚本是一个易受攻击的点.攻击者可以利用它盗取用户信息.你可以配置Apache,或是写更安全的PHP代码(验证所有用户输入) ...