Создание первой надстройки OutlookBuild your first Outlook add-in

В этой статье вы ознакомитесь с процессом создания надстройки для области задач Outlook, отображающей минимум одно свойство выбранного сообщения.In this article, you'll walk through the process of building an Outlook task pane add-in that displays at least one property of a selected message.

Создание надстройкиCreate the add-in

Можно создать надстройку Office с помощью Visual Studio или любого другого редактора. Выберите вкладку, соответствующую используемому редактору.You can create an Office Add-in by using Visual Studio or any other editor. Tell us what editor you'd like to use by choosing one of the following tabs:

Необходимые компонентыPrerequisites

  • Visual Studio 2017 с установленной рабочей нагрузкой Разработка надстроек для Office и SharePointVisual Studio 2017 with the Office/SharePoint development workload installed

    Примечание

    Если вы уже установили Visual Studio 2017, используйте установщик Visual Studio, чтобы убедиться, что также установлена рабочая нагрузка Разработка надстроек для Office и SharePoint.If you've previously installed Visual Studio 2017, use the Visual Studio Installer to ensure that the Office/SharePoint development workload is installed.

  • Office 365Office 365

    Примечание

    Если у вас нет подписки на Office 365, вы можете получить бесплатную подписку, зарегистрировавшись в программе для разработчиков Office 365.If you do not have an Office 365 subscription, you can get a free one by signing up for the Office 365 developer program.

Создание проекта надстройкиCreate the add-in project

  1. В строке меню Visual Studio выберите Файл > Создать > Проект.On the Visual Studio menu bar, choose File > New > Project.

  2. В списке типов проекта разверните узел Visual C# или Visual Basic, разверните Office/SharePoint, затем выберите Надстройки > Веб-надстройка Outlook.In the list of project types under Visual C# or Visual Basic, expand Office/SharePoint, choose Add-ins, and then choose Outlook Web Add-in as the project type.

  3. Укажите имя проекта и нажмите кнопку ОК.Name the project, and then choose OK.

  4. Visual Studio создаст решение, и два соответствующих проекта появятся в обозревателе решений.Visual Studio creates a solution and its two projects appear in Solution Explorer. Файл MessageRead.html откроется в Visual Studio.The MessageRead.html file opens in Visual Studio.

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

После завершения работы мастера Visual Studio создает решение, которое содержит два проекта.When you've completed the wizard, Visual Studio creates a solution that contains two projects.

ПроектProject ОписаниеDescription
Проект надстройкиAdd-in project Содержит только XML-файл манифеста со всеми параметрами надстройки.Contains only an XML manifest file, which contains all the settings that describe your add-in. Эти параметры помогают ведущему приложению Office определить условия активации и место отображения надстройки.These settings help the Office host determine when your add-in should be activated and where the add-in should appear. Visual Studio создает этот файл автоматически, чтобы вы могли сразу запускать проект и использовать надстройку.Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. Вы можете изменить эти параметры в любой момент, отредактировав XML-файл.You can change these settings any time by modifying the XML file.
Проект веб-приложенияWeb application project Содержит страницы контента надстройки, включающие все файлы и ссылки на файлы, необходимые для разработки страниц HTML и JavaScript с поддержкой Office. При разработке надстройки Visual Studio размещает веб-приложение на локальном сервере IIS. Для публикации надстройки этот проект веб-приложения нужно развернуть на веб-сервере.Contains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

Обновление кодаUpdate the code

  1. Файл MessageRead.html содержит HTML-контент, который будет отображаться в области задач надстройки.MessageRead.html specifies the HTML that will be rendered in the add-in's task pane. Замените элемент <body> в MessageRead.html приведенной ниже частью кода и сохраните файл.In MessageRead.html, replace the <body> element with the following markup and save the file.

    <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 в корневой папке проекта веб-приложения.Open the file MessageRead.js in the root of the web application project. Этот файл содержит скрипт надстройки.This file specifies the script for the add-in. Замените все его содержимое указанным ниже кодом и сохраните файл.Replace the entire contents with the following code and save the file.

    '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 в корневой папке проекта веб-приложения.Open the file MessageRead.css in the root of the web application project. Этот файл определяет специальные стили надстройки.This file specifies the custom styles for the add-in. Замените все его содержимое указанным ниже кодом и сохраните файл.Replace the entire contents with the following code and save the file.

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    td.prop-val {
        word-break: break-all;
    }
    
    .content-main {
        margin: 10px;
    }
    

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

  1. Откройте XML-файл манифеста в проекте надстройки. Этот файл определяет параметры и возможности надстройки.Open the XML manifest file in the Add-in project. This file defines the add-in's settings and capabilities.

  2. Элемент ProviderName содержит заполнитель. Замените его на свое имя.The ProviderName element has a placeholder value. Replace it with your name.

  3. Атрибут DefaultValue элемента DisplayName содержит заполнитель.The DefaultValue attribute of the DisplayName element has a placeholder. Замените его на текст My Office Add-in.Replace it with My Office Add-in.

  4. Атрибут DefaultValue элемента Description содержит заполнитель.The DefaultValue attribute of the Description element has a placeholder. Замените его на текст My First Outlook add-in.Replace it with My First Outlook add-in.

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

    ...
    <ProviderName>Jason Johnston</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"/>
    ...
    

ПроверкаTry it out

  1. Протестируйте созданную в Visual Studio надстройку Outlook, нажав F5 или кнопку Запуск.Using Visual Studio, test the newly created Outlook add-in by pressing F5 or choosing the Start button. Надстройка будет размещена на локальном сервере IIS.The add-in will be hosted locally on IIS.

  2. В диалоговом окне Подключение к учетной записи электронной почты Exchange введите адрес электронной почты и пароль для вашей учетной записи Майкрософт и нажмите кнопку Подключить.In the Connect to Exchange email account dialog box, enter the email address and password for your Microsoft account and then choose Connect. Когда в браузере откроется страница входа в Outlook.com, войдите в свою учетную запись электронной почты с теми же учетными данными, которые были введены ранее.When the Outlook.com login page opens in a browser, login to your email account with the same credentials as you entered previously.

    Примечание

    Если диалоговое окно Подключение к учетной записи электронной почты Exchange повторно предлагает выполнить вход, для учетных записей в вашем клиенте Office 365, возможно, отключена обычная проверка подлинности.If the Connect to Exchange email account dialog box repeatedly prompts you to login, Basic Auth may be disabled for accounts on your Office 365 tenant. Чтобы протестировать эту надстройку, вместо этого выполните вход с помощью учетной записи Майкрософт.To test this add-in, login using a Microsoft account instead.

  3. В Outlook в Интернете выберите или откройте сообщение.In Outlook on the web, select or open a message.

  4. Найдите кнопку надстройки в сообщении.Within the message, locate the add-in's button.

    Снимок экрана с окном сообщения в Outlook в Интернете, где выделена кнопка надстройки

  5. Нажмите кнопку, чтобы открыть область задач надстройки.Click the button to open the add-in's task pane.

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

    Примечание

    Если область задач не загружается, проверьте ее, открыв в браузере на том же компьютере.If the task pane doesn't load, try to verify by opening it in a browser on the same machine.

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

Поздравляем! Вы успешно создали свою первую надстройку для области задач Outlook!Congratulations, you've successfully created your first Outlook task pane add-in! Чтобы узнать больше о возможностях надстроек Outlook и создать более сложную надстройку, воспользуйтесь руководством по надстройкам Outlook.Next, learn more about the capabilities of an Outlook add-in and build a more complex add-in by following along with the Advanced Outlook add-in tutorial.