Поделиться через

Создание первой надстройки Outlook с помощью Visual Studio

  • Статья

В этой статье описан процесс создания надстройки области задач Outlook в Visual Studio, которая отображает по крайней мере одно свойство выбранного сообщения.

Предварительные условия

  • Visual Studio 2019 или более поздней версии с установленной рабочей нагрузкой разработки Office/SharePoint

    Примечание.

    Если вы ранее установили Visual Studio 2019 или более поздней версии, используйте Visual Studio Installer, чтобы убедиться, что установлена рабочая нагрузка разработки Office/SharePoint.

  • Пакет Office, подключенный к подписке Microsoft 365 (включая Office в Интернете).

Создание проекта надстройки

  1. В строке меню Visual Studio выберите Файл>Создать>Проект.

  2. В списке типов проекта разверните узел Visual C# или Visual Basic, разверните Office/SharePoint, затем выберите Надстройки > Веб-надстройка Outlook.

  3. Укажите имя проекта и нажмите кнопку ОК.

  4. Visual Studio создаст решение, и два соответствующих проекта появятся в обозревателе решений. Файл MessageRead.html откроется в Visual Studio.

Обзор решения Visual Studio

После завершения работы мастера Visual Studio создает решение, которое содержит два проекта.

Project Описание
Проект надстройки Содержит файл манифеста только надстройки, содержащий все параметры, описывающие надстройку. Эти параметры помогают приложению Office определить условия активации и место отображения надстройки. Visual Studio создает этот файл автоматически, чтобы вы могли сразу запускать проект и использовать надстройку. Вы можете изменить эти параметры в любой момент, отредактировав XML-файл.
Проект веб-приложения Содержит страницы контента надстройки, включающие все файлы и ссылки на файлы, необходимые для разработки страниц HTML и JavaScript с поддержкой Office. Во время разработки надстройки Visual Studio размещает веб-приложение на локальном сервере СЛУЖБ IIS. Для публикации надстройки этот проект веб-приложения нужно развернуть на веб-сервере.

Обновление кода

  1. Файл MessageRead.html содержит HTML-контент, который будет отображаться в области задач надстройки. В MessageRead.htmlзамените <элемент body> следующей разметкой и сохраните файл.

    <body class="ms-font-m ms-welcome">
    <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>
                <tr>
                    <td><strong>Id</strong></td>
                    <td class="prop-val"><code><label id="item-id"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Subject</strong></td>
                    <td class="prop-val"><code><label id="item-subject"></label></code></td>
                </tr>
                <tr>
                    <td><strong>Message Id</strong></td>
                    <td class="prop-val"><code><label id="item-internetMessageId"></label></code></td>
                </tr>
                <tr>
                    <td><strong>From</strong></td>
                    <td class="prop-val"><code><label id="item-from"></label></code></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

  2. Откройте файл MessageRead.js в корневой папке проекта веб-приложения. Этот файл содержит скрипт надстройки. Замените все его содержимое указанным ниже кодом и сохраните файл.

    'use strict';

(function () {

    Office.onReady(function () {
        // Office is ready
        $(document).ready(function () {
            // The document is ready
            loadItemProps(Office.context.mailbox.item);
        });
    });

    function loadItemProps(item) {
        // Write message property values to the task pane
        $('#item-id').text(item.itemId);
        $('#item-subject').text(item.subject);
        $('#item-internetMessageId').text(item.internetMessageId);
        $('#item-from').html(item.from.displayName + " &lt;" + item.from.emailAddress + "&gt;");
    }
})();

  3. Откройте файл MessageRead.css в корневой папке проекта веб-приложения. Этот файл определяет специальные стили надстройки. Замените все его содержимое указанным ниже кодом и сохраните файл.

    html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

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

.content-main {
    margin: 10px;
}

Обновление манифеста

  1. Откройте файл манифеста в проекте надстройки. Этот файл определяет параметры и возможности надстройки.

  2. Элемент <ProviderName> имеет значение заполнителя. Замените его на свое имя.

  3. Атрибут <DefaultValue элемента DisplayName> имеет заполнитель. Замените его на текст My Office Add-in.

  4. Атрибут <DefaultValue элемента Description> имеет заполнитель. Замените его на текст My First Outlook add-in.

  5. Сохраните файл.

    ...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="My First Outlook add-in"/>
...

Проверка

  1. С помощью Visual Studio протестируйте созданную надстройку Outlook, нажав клавишу F5 или нажав кнопку Пуск . Надстройка будет размещена на локальном сервере IIS.

  2. В диалоговом окне Подключение к учетной записи электронной почты Exchange введите адрес электронной почты и пароль для учетной записи Майкрософт, а затем нажмите кнопку Подключиться. Когда в браузере откроется страница входа в Outlook.com, войдите в свою учетную запись электронной почты с теми же учетными данными, которые были введены ранее.

    Примечание.

    Если диалоговое окно Подключение к учетной записи электронной почты Exchange неоднократно предлагает выполнить вход или вы получите сообщение об ошибке о несанкционированном доступе, обычная проверка подлинности для учетных записей в клиенте Microsoft 365 может быть отключена. Чтобы протестировать эту надстройку, повторите вход после установки свойства Использовать многофакторную проверку подлинностизначение True в разделе Развертывание диалогового окна свойств проекта веб-надстройки или войдите с помощью учетной записи Майкрософт .

  3. Почтовый ящик откроется в Outlook в Интернете. Выберите или откройте сообщение.

    Совет

    Вы также можете протестировать надстройку в классическом Outlook в Windows, если запущен сервер IIS.

  4. В сообщении перейдите на панель действий, а затем выберите Приложения.

    Окно сообщения в Outlook в Интернете с выбранным параметром Приложения.

  5. В списке надстроек выберите Моя надстройка Office, а затем — Показать область задач.

    Окно сообщения в Outlook в Интернете с выбранным параметром

  6. Просмотрите свойства выбранного сообщения из открывающейся области задач.

    Область задач надстройки в Outlook в Интернете со свойствами сообщения.

    Примечание.

    Если область задач не загружается, проверьте ее, открыв в браузере на том же компьютере.

Дальнейшие действия

Поздравляем! Вы успешно создали свою первую надстройку для области задач Outlook! Теперь изучите дополнительные сведения о разработке надстроек Office с помощью Visual Studio.

Устранение неполадок

  • Если надстройка отображает ошибку (например, "Не удалось запустить эту надстройку. Закройте это диалоговое окно, чтобы игнорировать проблему, или нажмите кнопку "Перезапустить", чтобы повторить попытку.") При нажатии клавиши F5 или нажатии кнопки Отладка>Начать отладку в Visual Studio см . раздел Отладка надстроек Office в Visual Studio для других параметров отладки.
  • Если сообщение об ошибке "Не удается открыть эту надстройку с localhost" появляется в области задач, выполните действия, описанные в статье по устранению неполадок.

Примеры кода

См. также