最近因为工作需要，研究了下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. 虚拟机中扩展linux系统存储空间

    reference: https://blog.csdn.net/greenapple_shan/article/details/52799631 https://blog.csdn.net/lyd1 ...

  2. debug fortran

    exmple: gfortran -g -fcheck=all -Wall segf.f90

  3. vue2+webpack 开发环境配置

    前提条件: 1.安装node.js https://nodejs.org/en/ 下载安装合适的平台 2.安装npm 第一步:初始化项目 新建文件夹 E:\app 推荐vue项目目录结构: confi ...

  4. html 相对路径 问题

    在jsp跳转servlet和servlet跳转jsp过程中,因为servlet和jsp在不同的目录下,所以直接跳转失败.下面是查阅网上的资料,简单的总结下相对路径的问题. 这种情况下index.jsp ...

  5. Vue中 v-html 与 v-text 的区别

    解析的效果:

  6. python redis操作数据库方法

    Redis redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorte ...

  7. java中高级

    面试问题: 一.Java基础方面: 1.Java面相对象的思想的理解(主要是多态): http://blog.csdn.net/zhaojw_420/article/details/70477636 ...

  8. chrome插件 － Manifest文件中的 background

    在Manifest中指定background域可以使扩展常驻后台. background可以包含三种属性,分别是scripts.page和persistent. 如果指定了scripts属性,则Chr ...

  9. SQL注入之Sqli-labs系列第一关

    在开始接触渗透测试开始,最初玩的最多的就是Sql注入,注入神器阿D.明小子.穿山甲等一切工具风靡至今.当初都是以日站为乐趣,从安全法实施后在没有任何授权的情况下,要想练手只能本地环境进行练手,对于sq ...

  10. HDU1548- A strange lift （BFS入门）

    题目传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1548 A Strrange lift Time Limit: 2000/1000 MS (Java/ ...