Outlook WebAddin初探 - 尘叶心繁的专栏

Outlook WebAddin初探
Outlook WebAddin初探
安装前提
VS Code安装Teams Toolkit
创建项目
运行项目
向功能区添加自定义按钮
调用API
修改分组栏的名字
更换图标
函数列表

安装前提

首先，确保你的计算机上已安装Node.js和npm。
你可以在官方网站下载并安装它们。

VS Code安装Teams Toolkit

在vscode扩展组件中安装Teams Toolkit组件。

创建项目

首先点开Teams这个图标点击。

点击Create a New App进行创建一个新的项目。

然后选择Outlook Add-in—>Taskpane—>选择项目保存的地址—>输入项目名，就创建好了。

项目创建完成后，我们需要安装依赖包。
在项目目录打开一个控制窗口，执行npm install进行安装相关依赖包。

然后我们还需要确认，登录Microsoft 365，点开Teams图标点击Microsoft 365，我这里已经登录好了可以看到。

运行项目

在VSCode中直接按F5就可以了，它会自动执行如下两个命令。

npm install
npm run start

注意：中途可能会弹出需要你安装开发者证书，点击Yes就行了。
在运行前请关闭Outlook。

项目启动后，对外开放的端口为3000，并且会自动打开outlook添加好插件。

随后我们点开有个邮件，再点我们的按钮就会弹出如下内容：

向功能区添加自定义按钮

将自定义按钮添加到功能区，用于将文本插入到邮件正文中。
在代码编辑器中，打开文件 ./src/command/command.ts，并将以下代码添加到文件末尾。
此函数将 insertHelloWorld 插入到邮件正文中的光标点。

function insertHelloWorld(event: Office.AddinCommands.Event) {
  Office.context.mailbox.item.body.setSelectedDataAsync("Hello World", {coercionType: Office.CoercionType.Text});
  // Be sure to indicate when the add-in command function is complete
  // 确保在添加器命令函数完成后发出信号
  event.completed();
}
// Register the function with Office
// 将函数注册到 Office
Office.actions.associate("insertHelloWorld", insertHelloWorld);

当我们需要写入邮件时，需要提高加载项的权限。
将authorization.permissions.resourceSpecific[0].name属性值更改为MailboxItem.ReadWrite.User。

"authorization": {
        "permissions": {
            "resourceSpecific": [
                {
                    "name": "MailboxItem.ReadWrite.User",
                    "type": "Delegated"
                }
            ]
        }
    },

当外接程序命令运行代码而不是打开任务窗格时，它必须在运行时中运行代码，该运行时独立于任务窗格代码运行的嵌入式 Web 视图。因此，清单必须指定其他运行时。
我们在 extension.runtimes 下添加对象到 runtimes 数组。

actions[0].id 属性的值必须与添加到 commands.ts 文件的函数名称完全相同，在此情况中为 insertHelloWorld。
在后面的步骤中，将按此 ID 引用项目。

{
    "id": "ComposeCommandsRuntime",
    "type": "general",
    "code": {
        "page": "https://localhost:3000/commands.html",
        "script": "https://localhost:3000/commands.js"
    },
    "lifetime": "short",
    "actions": [
        {
            "id": "insertHelloWorld",
            "type": "executeFunction",
            "displayName": "insertHelloWorld"
        }
    ]
}

由于我们需要修改邮件内容，所以在ribbons下的contexts中应该设置为mailCompose而不是mailRead，这样就在输入邮件时显示我们的软件。当然如果你希望二者并存可以这样。

"contexts": [
    "mailCompose",
    "mailRead"
],

然后添加上我们的按钮。

{
    "id": "HelloWorldButton",
    "type": "button",
    "label": "Insert text",
    "icons": [
        { "size": 16, "file": "https://localhost:3000/assets/my-icon-16.png" },
        { "size": 32, "file": "https://localhost:3000/assets/my-icon-32.png" },
        { "size": 80, "file": "https://localhost:3000/assets/my-icon-80.png" }
    ],
    "supertip": {
        "title": "Insert text",
        "description": "Inserts some text."
    },
    "actionId": "insertHelloWorld"
}

最后运行一下，打开一个新的邮件，输入内容后选中所选的内容再点击我们新添加的按钮Insert text，它将会进行改变为Hello World。

调用API

修改分组栏的名字

在manifest.json中找到以下节点，对label标签进行更改。
我将label这里改成了Oerlikon,分组框就编程了Oerlikon,大家随意更改。
然后我们F5查看一下。

    "extensions": [
        {
            "ribbons": [
                {
                    "tabs": [
                        {
                            "builtInTabId": "TabDefault",
                            "groups": [
                                {
                                    "id": "msgReadGroup",
                                    "label": "Oerlikon",

更换图标

我在阿里云矢量图标库上找到16x16、32x32、64x64、80x80、128x128的图片进行下载，并放到的assets目录下。
并对所有的icons进行修改（这里我举例一部分）。

"label": "Oerlikon",
"icons": [
    {
        "size": 16,
        "file": "https://localhost:3000/assets/my-icon-16.png"
    },
    {
        "size": 32,
        "file": "https://localhost:3000/assets/my-icon-32.png"
    },
    {
        "size": 80,
        "file": "https://localhost:3000/assets/my-icon-80.png"
    }
],

函数列表

函数名	描述
`Office.context.mailbox.item.body.setSelectedDataAsync`	可以将修改的文本内容进行替换。
`Office.context.mailbox.item.notificationMessages.replaceAsync`	可以弹出对邮件处理的消息。(按照官方示例点击第二个按钮像这样 )