Outlook 插件开发分步指南

最新推荐文章于 2024-03-12 13:21:49 发布

心兰相随引导者

最新推荐文章于 2024-03-12 13:21:49 发布

阅读量1.2k

点赞数 2

分类专栏：杂文文章标签： outlook flask python

原文链接：https://www.noupe.com/development/outlook-add-in-development.html

版权

杂文专栏收录该内容

36 篇文章 1 订阅

订阅专栏

您可能想知道 Microsoft Outlook 在全球拥有超过 4 亿活跃用户，使其成为最常用的电子邮件通信平台。大多数企业，甚至科技巨头更喜欢使用 Outlook 加载项开发来简化业务沟通并更快地产生潜在客户。

在本博客中，我们将了解自定义 Outlook 插件及其开发、设置和安装的分步过程。让我们开始吧。

Outlook 加载项到底是什么？

Outlook 加载项是一个与 Microsoft Outlook 配合使用的小软件。当用户查看或撰写电子邮件时，通常会使用 Outlook 加载项来提供一组有限但有用的功能。

开发人员可以为所有 Microsoft 主要 Office 程序创建加载项。Word 加载项可能允许您将特定内容（例如，文本或图像库中的内容）插入到文档中。

Outlook 加载项有哪些功能？

Outlook 加载项可能有助于搜索特定客户或案例编号的打开电子邮件的内容，从而允许您向他们显示主系统中的相关信息。
它允许用户轻松地将电子邮件复制并粘贴到您的CRM 系统中。或者，它可以扫描打开电子邮件的正文以查找特定的客户或案例编号，从而允许您向他们显示主系统中的相关信息。

Outlook插件开发难吗？

Outlook 加载项确实是Microsoft Office 365 加载项家族中最先进的成员。他们经常需要冗长的平台功能确定、Graph API（或者在某些情况下，EWS API）的使用、将 Outlook 令牌交换为 Graph API 令牌等等。

如何设置 Outlook 加载项？

用户安装您的 Outlook 加载项（单独安装或为其整个关联安装）。某些加载项可通过应用程序源（Microsoft 的商业软件商店）获得，而其他加载项则可以由您的客户使用 Outlook 或其 Azure Active Directory 租户直接安装。
安装插件后打开电子邮件时，插件的图标应出现在功能区上（位置因平台而异）。当用户单击您的加载项图标时，您的加载项就会出现，通常出现在电子邮件右侧的窗口中。
该加载项的工作方式与 Outlook 中应用程序的工作方式相同。加载项的操作通常会从电子邮件中读取一些信息，并将其提供给您的主程序。
对于更复杂的加载项，可能需要访问提供电子邮件的电子邮件服务器。例如，这些加载项需要访问附件或线程。为了获取关键信息，Microsoft 向这些加载项公开了 Graph API 等 API。

先决条件

安装 create-react-app

npm install -g create-react-app

安装 Yeoman

npm install -g yo

安装 Office 加载项项目创建器

>npm install -g yo generator-office

如何使用 React 创建 Outlook 插件？

创建加载项

Office 外接程序可以使用 Visual Studio 或 Yeoman Office 外接程序生成器来制作。Yeoman 创建了一个可以使用 Visual Studio Code 或任何其他编辑器进行维护的 Node.js 项目，与此相反，Visual Studio 创建了一个 Visual Studio 解决方案。要在本地创建并测试您的加载项，请进行适当的选择，然后按照屏幕上的说明进行操作。

创建加载项项目

转到 Visual Studio 菜单栏，然后选择 “文件” > “新建” > “项目”。
在Visual C# 或 Visual Basic下的项目类型列表中，展开 Office/SharePoint，选择 加载项，然后选择 Outlook Web 加载项 作为项目类型。
为项目命名，然后选择 “确定”。
Visual Studio 生成解决方案后，解决方案资源管理器会显示解决方案中的两个项目。消息读取的.HTML 文件在 Visual Studio 中打开。

<span style="color:#555555"><span style="background-color:#ffffff"><span style="background-color:#eeeeee"><code><body class="ms-font">
    <div class=”content-main">
        <h1>prop</h1>
        <table class="ms-Table">
            <thead>
                <tr>
                    <th>Prop</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><strong>Id</strong></td>
                    <td class="val"><code><label id="id"></label></code></td>
                </tr>
                <tr>
                    <td><strong>class</strong></td>
                    <td class="val"><code><label id="class"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Message</strong></td>
                    <td class="val"><code><label id="Msg_Id"></label></code></td>
                </tr>
                <tr>
                    <td><strong>From</strong></td>
                    <td class="val"><code><label id="from"></label></code></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
'use strict';


(function () {


    Office.on Ready(function () {
        $(document).ready(function () {
            loadItemProps(Office.context.mailbox.item);
        });
    });


    function loadItemProps(item) {
        $('#id').text(itemId);
        $('#class').text(class);
        $('#Msg_Id').text(Msg_Id);
        $('#from').html(from.displayName + " &lt;" + from.emailAddress + "&gt;");
    }
})();
HTML,
body {
    width: 100%;
    height: 100%; 
    margin: 0;
    padding: 0;
}


td. val {
    word-break: break-all;
}


.content-main {
    margin: 10px;
}
</code></span></span></span>

});

我可以使用生成器进行 Office 加载项开发吗？

是的你可以。你可以使用纯 HTML、Angular、React 任何你喜欢的东西！

使用 TypeScript for Office Add-in 好吗？

是的，VS Code 对 TypeScript 有很好的支持

如何安装 Outlook 加载项？

打开 Visual Studio，单击菜单栏并选择“文件”>“新建”>“项目”。
在 Visual C# 或 Visual Basic 下的项目类型列表中，展开 Office/SharePoint，选择加载项，然后选择 Outlook Web 加载项作为项目类型。
为项目命名，然后选择“确定”。
在这里，您将看到解决方案资源管理器中出现两个项目。MessageRead .html 文件在 Visual Studio 中打开。
导航到管理中心的“设置”>“集成应用程序”>“加载项”页面。
选择一个选项，然后按照步骤操作。
如果您选择从 Office 商店添加加载项，请进行加载项选择。
您可以将可用的加载项分为三类：为您推荐、评级和名称。Office 商店仅提供免费加载项。目前不支持付费加载项。选择加载项后接受条款和条件以继续。
要指定加载项的部署对象，请在下一个屏幕上选择“每个人”、“特定用户/组”或“仅我”。要查找某些用户或组，请使用搜索框。

选择部署。
激活加载项后，会显示一个绿色勾号。要测试该加载项，请按照网站上的说明进行操作。
完成后，单击“下一步”。如果您只为自己部署，则可以更改有权访问该加载项的人员以添加更多用户。

使用 React.js 开发 Outlook 插件的分步过程

下面给出了使用 React.js 开发 Outlook 插件的分步过程。

第1步：创建开发环境

首先，确保您的计算机上安装了 Node.js 和 NPM（节点包管理器）。安装和管理依赖项需要这些工具。为您的项目创建一个新目录，然后从其中启动终端或命令提示符。

第 2 步：开发一个新的 React.js 应用程序。

要构建新的 React.js 应用程序，请在终端中输入以下命令：

npx create-react-app outlook-addin

此命令将生成一个名为“Outlook-addin”的新目录，其中包含基本的 React.js 项目结构。

步骤 3：安装 Outlook 加载项要求

cd outlook-addin

安装以下依赖项以使用 React.js 开发 Outlook 加载项：

npm install @microsoft/office-js-helpers office-ui-fabric-react

步骤 4：设置 Office.js Helper 和 Office UI Fabric。

打开项目的 src/index.js 文件并在顶部添加以下导入语句：

import { initializeIcons } from '@uifabric/icons';

import { initialize } from '@microsoft/office-js-helpers';

然后，在渲染React应用程序之前，执行initialize Icons()和initialize()例程。这可以保证正确设置所需的 Office.js Helper 和 Office UI Fabric 配置：

initializeIcons();
initialize();


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

步骤 5：创建 Outlook 加载项组件

在 src 目录中创建一个名为 OutlookAddin.js 的新文件。Outlook 加载项的核心组件将包含在此文件中。将以下代码添加到文件中：

import React from 'react';


function OutlookAddin() {
  return (
    <div>
      <h1>Welcome to Outlook Add-in Development!</h1>
      {/* Add your Outlook Add-in UI components here */}
    </div>
  );
}


export default OutlookAddin;

第 6 步：集成插件组件

从 src/App.js 文件中删除旧代码并导入 OutlookAddin 组件。将 OutlookAddin 组件替换为 App 组件：

import React from 'react';
import OutlookAddin from './OutlookAddin';


function App() {
  return (
    <div>
      <OutlookAddin />
    </div>
  );
}


export default App;

第 7 步：创建并测试加载项

要构建 React 应用程序，请在终端中输入以下命令：

npm run build

构建过程完成后，会在您的项目目录中生成一个构建目录。修改public目录下manifest.xml文件中的SourceLocation值，使其指向生成的应用程序：

<span style="color:#555555"><span style="background-color:#ffffff"><span style="background-color:#eeeeee"><code><bt:Urls>
  <bt:Url id="messageReadTaskPaneUrl" DefaultValue="https://localhost:3000" />
</bt:Urls></code></span></span></span>

要启动本地服务器，请保存文件，然后运行以下命令：

<span style="color:#555555"><span style="background-color:#ffffff"><span style="background-color:#eeeeee"><code>npm start</code></span></span></span>

这将打开一个包含 Outlook 插件的新浏览器窗口。

步骤 8：在 Outlook 中安装加载项。

您必须旁加载您的外接程序才能在 Outlook 中对其进行测试。导航到 Outlook 中的“文件”选项卡。选择“选项”，然后单击！

结论

使用 React.js 创建 Outlook 加载项具有许多优点，例如为前端 Web 开发人员提供舒适的工作环境，并支持使用 React 组件模型开发动态、可重用的 UI 组件。我们研究了使用 React.js 创建 Outlook 加载项的分步方法。

在本博客中，我们探讨了 Outlook 加载项的体系结构、Outlook 加载项的结构和要求以及加载项如何与 Outlook 交互。

心兰相随引导者

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Outlook 插件开发分步指南

您可能想知道 Microsoft Outlook 在全球拥有超过 4 亿活跃用户，使其成为最常用的电子邮件通信平台。大多数企业，甚至科技巨头更喜欢使用 Outlook 加载项开发来简化业务沟通并更快地产生潜在客户。在本博客中，我们将了解自定义 Outlook 插件及其开发、设置和安装的分步过程。让我们开始吧。Outlook 加载项是一个与 Microsoft Outlook 配合使用的小软件。当用户查看或撰写电子邮件时，通常会使用 Outlook 加载项来提供一组有限但有用的功能。
复制链接

扫一扫