建立你第一个 Outlook Add-in

最近因为工作需要，研究了下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 loadedOffice.initialize = function (reason) {$(document).ready(function () {loadItemProps(Office.context.mailbox.item);});};function loadItemProps(item) {// Get the table body elementvar tbody = $('.prop-table');// Add a row to the table for each message propertytbody.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: 0;padding: 0;
}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

转载于:https://www.cnblogs.com/TheMiao/p/9445573.html

建立你第一个 Outlook Add-in相关推荐

04_面向初学者的快速入门、建立图像分类的一个神经网络、训练这个神经网络、评估模型的精确度
翻译自:https://tensorflow.google.cn/tutorials/quickstart/beginner 这是一个的使用Keras做如下事情的简短介绍: 建立图像分类的一个神经网络 ...
实现一个名为Person的类和它的子类Employee,Manager是Employee的子类，设计一个方法add用于涨工资，普通员工一次能涨10%，经理涨20%.
1.实现一个名为Person的类和它的子类Employee,Manager是Employee的子类,设计一个方法add用于涨工资,普通员工一次能涨10%,经理涨20%,具体要求如下: (1)Perso ...
建立和验证一个临床分类系统
文章目录使用网页服务说明建立docker 容器建立和验证一个临床分类系统判断术后是否复发特征工程数据预处理数值化无量纲化标准化区间缩放(对列向量) 归一化二值化 onehot 缺 ...
如何将所有电子邮件地址合并到一个Outlook.com收件箱中
Microsoft's new Outlook.com allows you to see email from all your email accounts in one inbox and se ...
联想、腾讯巨头携手，“极速计划”建立SIoT又一个堡垒？
文|曾响铃来源|科技向令说(xiangling0815) 巨头联合.资源互补已成为互联网科技领域下半程重要玩法,一些大佬已经开始行动. 12月24日,联想与腾讯在北京联想总部召开主题为"极 ...
[Hugo+Netlify]从零开始建立并发布一个网站
现在有越来越多的开发者选择把自己的博客以静态网站的方式托管在 GitHub 上, 这样的方式可以通过诸如 Jekyll, Hexo,Hugo 等等现有的静态博客生成工具, 非常便捷地搭建出一个样式美观 ...
DHTMLX 前端框架建立你的一个应用程序教程(二)--设置布局
Layout控件的演示 Dhtmlx有很多的组建来组织网页的建设, 这篇主要介绍dhtmlxLayout . 下面图片中布局将各个组件(1.Menu 2.Toolbar 3.Grid 4.Form ...
DHTMLX 前端框架建立你的一个应用程序教程(八)-- 添加表单Form
添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...
JPA学习笔记---JPA实体Bean的建立---链接上一个博文:对实体Bean中属性进行操作:保存日期类型,设置字段的长度,名字,是否为空,可以声明枚举字段;可以存放二进制数据,可以存放
3.给上述生成的那个name字段:更改数据库中的字段名,是否为空,字段长度的设定,只需要在Person.java文件中,加上 @Column(length=10,nullable=false,n ...

建立你第一个 Outlook Add-in

建立你第一个 Outlook Add-in相关推荐

最新文章

热门文章