最近因为工作需要，研究了下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. js正则学习

    一直对正则很纠结也很畏惧,以前感觉花时间理解一个个奇奇怪怪的符号,还不如直接百度谷歌之. 但知其然不知其所以然也是种痛苦,所以花了两天稍微学了一下,虽然没学很深入彻底,但也比之前进步不少,特此笔记. ...

  2. Linux关闭防火墙步骤

    1   先查询防火墙状态 [root@old-09 ~]# /etc/init.d/iptables status Table: filter Chain INPUT (policy ACCEPT) ...

  3. JavaScript+CSS+DIV实现表格变色示例

    <!DOCTYPE html> <html> <head> <title>colortable.html</title> <scrip ...

  4. ubuntu 实用命令收集

    dig 查看域名解析 最下面server为DNS解析地址 dig google.com sudo -s 转为root方式 curl ip.gs 获取本机外网的ip地理地址 开启ipv4转发功能 /et ...

  5. 缓存一致性协议 mesi

    m : modified e : exlusive s : shared i : invalid 四种状态的转换略过,现在讨论为什么有了这个协议,i++在多线程上还不是安全的. 两个cpu A B同时 ...

  6. shell脚本-实战防dos攻击

    根据web日志或者或者网络连接数,监控当某个IP并发连接数或者短时内PV达到100,即调用防火墙命令封掉对应的IP,监控频率每隔3分钟.防火墙命令为:iptables -I INPUT -s 10.0 ...

  7. [转]Introduction to Learning to Trade with Reinforcement Learning

    Introduction to Learning to Trade with Reinforcement Learning http://www.wildml.com/2018/02/introduc ...

  8. LINUX添加磁盘

    博客网站原因,图片不能很好插入,望谅解 第一步:设置加载硬盘.由于是虚拟硬盘大小,不会一开始直接占用全部空间,使用多少占用多少,为了避免后期磁盘满前期设计大容量 第二步加载查看磁盘: 再执行fdisk ...

  9. eclipse 大小写转换

    大写:Ctrl+Shift+X 小写:Ctrl+Shift+Y

  10. .net core consul grpc--系统服务RPC实现通信(一)

    .net core grpc 系统服务实现通信(一) 现在系统都服务化,.net core 实现服务化的方式有很多,我们通过grpc实现客户端.服务端通信. grpc(https://grpc.io/ ...