首页
视频
资源
登录
原
Outlook WebAddin初探
1776
人阅读
2023/9/11 18:31
总访问:
2993330
评论:
0
收藏:
0
手机
分类:
.net后台框架
![](https://img.tnblog.net/arcimg/hb/202a141f29e64a16b5e8ee16c56dd5e7.png) >#Outlook WebAddin初探 [TOC] 安装前提 ------------ tn2>首先,确保你的计算机上已安装Node.js和npm。 你可以在[官方网站](https://nodejs.org/)下载并安装它们。 ![](https://img.tnblog.net/arcimg/hb/f471c91139e64e3f8bd0b7e0481517ab.png) ### VS Code安装Teams Toolkit tn2>在vscode扩展组件中安装Teams Toolkit组件。 ![](https://img.tnblog.net/arcimg/hb/cf5181c068d14bd48d3cb79e82f5a341.png) 创建项目 ------------ tn2>首先点开Teams这个图标点击。 ![](https://img.tnblog.net/arcimg/hb/6541d5458a03462b813aecd87b93b8f7.png) tn2>点击`Create a New App`进行创建一个新的项目。 ![](https://img.tnblog.net/arcimg/hb/f97eda3860c7477598d186710cfa0c3e.png) tn2>然后选择`Outlook Add-in`-->`Taskpane`-->选择项目保存的地址-->输入项目名,就创建好了。 ![](https://img.tnblog.net/arcimg/hb/428c024487ae412dbb61643e25b809e0.png) ![](https://img.tnblog.net/arcimg/hb/427c84ae80424e60bf3b7d6b50890542.png) ![](https://img.tnblog.net/arcimg/hb/728d70520cee42449a2327932b0d4f56.png) tn2>项目创建完成后,我们需要安装依赖包。 在项目目录打开一个控制窗口,执行`npm install`进行安装相关依赖包。 ![](https://img.tnblog.net/arcimg/hb/5c009666eacd46898d2d4e6d9f467ece.png) ![](https://img.tnblog.net/arcimg/hb/17f1b4fe6d004a07acb27c2fd564ff9c.png) tn2>然后我们还需要确认,登录Microsoft 365,点开Teams图标点击Microsoft 365,我这里已经登录好了可以看到。 ![](https://img.tnblog.net/arcimg/hb/63bfdcf5a5494d95aa1a75fa80981ffe.png) 运行项目 ------------ tn2>在VSCode中直接按`F5`就可以了,它会自动执行如下两个命令。 ```bash npm install npm run start ``` ![](https://img.tnblog.net/arcimg/hb/0f1ae1591a564a039e84206f52f7b6b5.png) ![](https://img.tnblog.net/arcimg/hb/fd69d6e8d1e64725b35dd6ff6bd06a82.png) tn>注意:中途可能会弹出需要你安装开发者证书,点击Yes就行了。 在运行前请关闭Outlook。 tn2>项目启动后,对外开放的端口为`3000`,并且会自动打开outlook添加好插件。 ![](https://img.tnblog.net/arcimg/hb/247bb61b5a2a40f499c08ed158a1dbeb.png) tn2>随后我们点开有个邮件,再点我们的按钮就会弹出如下内容: ![](https://img.tnblog.net/arcimg/hb/3acf7eff16e04e978d6764fec578811f.png) 向功能区添加自定义按钮 ------------ tn2>将自定义按钮添加到功能区,用于将文本插入到邮件正文中。 在代码编辑器中,打开文件 `./src/command/command.ts`,并将以下代码添加到文件末尾。 此函数将 `insertHelloWorld` 插入到邮件正文中的光标点。 ```javascript 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); ``` tn2>当我们需要写入邮件时,需要提高加载项的权限。 将`authorization.permissions.resourceSpecific[0].name`属性值更改为`MailboxItem.ReadWrite.User`。 ```javascript "authorization": { "permissions": { "resourceSpecific": [ { "name": "MailboxItem.ReadWrite.User", "type": "Delegated" } ] } }, ``` tn2>当外接程序命令运行代码而不是打开任务窗格时,它必须在运行时中运行代码,该运行时独立于任务窗格代码运行的嵌入式 Web 视图。 因此,清单必须指定其他运行时。 我们在 `extension.runtimes` 下添加对象到 `runtimes` 数组。<br/> `actions[0].id` 属性的值必须与添加到 `commands.ts` 文件的函数名称完全相同,在此情况中为 `insertHelloWorld`。 在后面的步骤中,将按此 ID 引用项目。 ```javascript { "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" } ] } ``` tn2>由于我们需要修改邮件内容,所以在`ribbons`下的`contexts`中应该设置为`mailCompose`而不是`mailRead`,这样就在输入邮件时显示我们的软件。当然如果你希望二者并存可以这样。 ```javascript "contexts": [ "mailCompose", "mailRead" ], ``` tn2>然后添加上我们的按钮。 ```javascript { "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" } ``` tn2>最后运行一下,打开一个新的邮件,输入内容后选中所选的内容再点击我们新添加的按钮`Insert text`,它将会进行改变为`Hello World`。 ![](https://img.tnblog.net/arcimg/hb/f0b86c2656c14511b119e70a7c8366ab.png) ![](https://img.tnblog.net/arcimg/hb/0e9803281bde40a0bf972c9b31bc20be.png) 调用API ------------ ### 修改分组栏的名字 tn2>在`manifest.json`中找到以下节点,对label标签进行更改。 我将`label`这里改成了`Oerlikon`,分组框就编程了`Oerlikon`,大家随意更改。 然后我们F5查看一下。 ```json "extensions": [ { "ribbons": [ { "tabs": [ { "builtInTabId": "TabDefault", "groups": [ { "id": "msgReadGroup", "label": "Oerlikon", ``` ![](https://img.tnblog.net/arcimg/hb/72f05d740a034d28ac545304b6e515c0.png) ### 更换图标 tn2>我在阿里云矢量图标库上找到`16x16`、`32x32`、`64x64`、`80x80`、`128x128`的图片进行下载,并放到的`assets`目录下。 并对所有的icons进行修改(这里我举例一部分)。 ![](https://img.tnblog.net/arcimg/hb/f683c9072c9f44909fd691b07be069e7.png) ```json "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" } ], ``` ![](https://img.tnblog.net/arcimg/hb/89459e0ee9404615ae86e0838fc2f3f0.png) ### 函数列表 | 函数名 | 描述 | | ------------ | ------------ | | `Office.context.mailbox.item.body.setSelectedDataAsync` | 可以将修改的文本内容进行替换。 | | `Office.context.mailbox.item.notificationMessages.replaceAsync` | 可以弹出对邮件处理的消息。(按照官方示例点击第二个按钮像这样![](https://img.tnblog.net/arcimg/hb/61f816878dfb42d8adcc5af83547ff84.png) ) |
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
尘叶心繁
这一世以无限游戏为使命!
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net后台框架
178篇
linux
18篇
linux中cve
1篇
windows中cve
0篇
资源分享
10篇
Win32
3篇
前端
28篇
传说中的c
5篇
Xamarin
9篇
docker
15篇
容器编排
101篇
grpc
4篇
Go
15篇
yaml模板
1篇
理论
2篇
更多
Sqlserver
4篇
云产品
39篇
git
3篇
Unity
1篇
考证
2篇
RabbitMq
23篇
Harbor
1篇
Ansible
8篇
Jenkins
17篇
Vue
1篇
Ids4
18篇
istio
1篇
架构
2篇
网络
7篇
windbg
4篇
AI
19篇
threejs
2篇
人物
1篇
嵌入式
20篇
python
20篇
HuggingFace
8篇
pytorch
10篇
opencv
6篇
Halcon
5篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术