我使用JavaScript、Angular和React试过Outlook插件，然后陷入了困境

1 年 ago

新, 韵

2 minutes

首先

因工作需要，我需要尝试使用Outlook的插件。由于尝试了JavaScript、Angular和React这三种编程语言，我将它们分别总结为坑（主要是manifest.xml）以备忘。

环境

Node.js v16.14.2

共同点

我正在使用Yeoman生成器创建项目，所以您需要使用以下命令来安装生成器。

npm install -g yo generator-office

通过输入以下命令可以启动工具。

yo office

请查看这个官方文档以获取详细的使用说明。

JavaScript编程

按照官方文档进行创建。
在Yeoman生成器中选择”Office Add-in Task Pane”项目，并继续进行。
在项目创建过程中并没有遇到太大的困难。
（遇到困难的是在将项目发布到Azure Static Web Apps并进行CI时…）

Angular开发

以前は可以使用Yeoman生成器创建，但是不知何时不再提供该选项。因此，我首先选择了Yeoman生成器的“Office Add-in Task Pane project”项目，然后逐步添加了在Angular中创建所需的设置。

我们已经在这个GitHub链接中参考了相关的内容作为补充。

逐个下载以下的软件包。

“@angular/common”: “^16.1.3”,
“@angular/compiler”: “^16.1.3”,
“@angular/core”: “^16.1.3”,
“@angular/platform-browser”: “^16.1.3”,
“@angular/platform-browser-dynamic”: “^16.1.3”,
“@microsoft/office-js-helpers”: “^1.0.2”,

“@angular/common”: “^16.1.3”,
“@angular/compiler”: “^16.1.3”,
“@angular/core”: “^16.1.3”,
“@angular/platform-browser”: “^16.1.3”,
“@angular/platform-browser-dynamic”: “^16.1.3”,
“@microsoft/office-js-helpers”: “^1.0.2”,

在taskpane文件夹下创建一个名为app的文件夹，并将app.component.ts和app.component.html添加到该文件夹中。

在webpack.config.js的插件部分添加以下代码。

new HtmlWebpackPlugin({
    filename: "app.component.html",
    template: "./src/taskpane/app/app.component.html",
    chunks: ["polyfill", "app.component"],
}),

通过将在 app.component.ts 中定义的 selector 添加到 taskpane.html 中，实现显示 app.component 的内容。

<body class="ms-font-m ms-welcome">
    <h2 id="sideload-msg" className='ms-fontSize-su ms-fontColor-neutralPrimary'>Please sideload your addin to see app body.</h2>
    <app-home></app-home>
</body>

我成功完成了 taskpane.ts。

这些问题也在我们的Issues上提出了。
https://github.com/OfficeDev/Office-Addin-TaskPane-Angular/issues

据说使用innerHTML可以解决双向绑定的问题。

<div [innerText]="message"></div>

双向绑定方面曾经有一个捷径，但这次在Angular上的进一步创作已经放弃了。

React编程

只需在Yeoman生成器的项目选择中选择“使用React框架的Office插件任务窗格项目”，就能轻松创建这个项目。
因为我几乎没有使用过React，所以更容易在React的基本规则中陷入困境。
我希望能够掌握React… ?

共有的沼泽

我对 manifest.xml 文件的设置值理解不足，陷入了困境。
需要仔细阅读官方文档。
这次我想在创建日程时使用插件而不是电子邮件，但它没有显示出来… 最终我发现需要修改以下要素。

规则

在Outlook的哪个功能（邮件或日程）中设置启动插件的部分。

如果要撰写电子邮件的话

<Rule xsi:type="ItemIs" ItemType="Message" FormType="Edit" />

如果需要制作日程安排表

<Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Edit" />

如果只是查看邮件的话

<Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />

查看日程表

<Rule xsi:type="ItemIs" ItemType="Appointment" FormType="Read" />

这篇博客很有参考价值。办公室插件的应用【基本部分二：清单文件】。

扩展点

如果你发现设置了规则，但插件打开的任务面板没有显示在日程表中！那么你需要设置这个选项。

您可以定义公开插件功能的位置。

一直以来都是如下情况。这似乎是在查看邮件时显示任务面板的设置。

<ExtensionPoint xsi:type="MessageReadCommandSurface">

所以，需要对会议创建页面进行修改，以便在任务面板中显示如下。

<ExtensionPoint xsi:type="AppointmentOrganizerCommandSurface">

最后

使用Yeoman生成器可以很容易地创建项目，除了Angular外。这只是我的一个印象，因为我正在进行快速总结和进行中的工作，如果发现新的领域，会进行补充。?

请参考

ExtensionPoint 要素