創建你第一個 Outlook Add-in

時間 2019-11-18

原文原文鏈接

最近由於工做須要，研究了下Outlook Add-in 和 Graph API。下面帶你們創建一個Hello World 項目css

創建Add-inhtml

先前需求：git

　　Node.jsgithub

　　使用cmd/PowerShell安裝最新版本的Yeoman 和Yeoman generator for Office Add-ins npm

npm install -g yo generator-office

創建項目app

使用cmd來訪問新文件夾ide

cd my-outlook-addin

使用Yeoman創建office項目spa

yo office

使用jQuery模板debug

選擇JavaScript3d

命名你的項目

選擇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 loaded
  Office.initialize = function (reason) {
    $(document).ready(function () {
      loadItemProps(Office.context.mailbox.item);
    });
  };

  function loadItemProps(item) {
    // Get the table body element
    var tbody = $('.prop-table');

    // Add a row to the table for each message property
    tbody.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;
}