Создание первой надстройки 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 с помощью генератора Yeoman для надстроек Office или Visual Studio.You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. Генератор Yeoman создает проект Node.js, которым можно управлять с помощью Visual Studio Code или любого другого редактора, а Visual Studio создает решение Visual Studio.The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. Выберите вкладку с нужным вариантом и следуйте инструкциям, чтобы создать надстройку и протестировать ее локально.Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.

Необходимые условияPrerequisites

  • Node.js (версия 8.0.0 или более поздняя)Node.js (version 8.0.0 or later)

  • Последняя версия Yeoman и генератора Yeoman для надстроек Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    npm install -g yo generator-office
    

    Примечание

    Даже если вы уже установили генератор Yeoman, рекомендуем обновить пакет до последней версии из npm.Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

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

  1. Выполните следующую команду, чтобы создать проект надстройки с помощью генератора Yeoman:Run the following command to create an add-in project using the Yeoman generator:

    yo office
    

    Примечание

    При выполнении команды yo office может появиться запрос о политиках сбора данных генератора Yeoman и средств CLI надстройки Office.When you run the yo office command, you may receive prompts about the data collection policies of Yeoman and the Office Add-in CLI tools. Используйте предоставленные сведения, чтобы ответить на запросы подходящим образом.Use the information that's provided to respond to the prompts as you see fit.

    При появлении запроса предоставьте следующую информацию для создания проекта надстройки:When prompted, provide the following information to create your add-in project:

    • Выберите тип проекта - Office Add-in Task Pane projectChoose a project type - Office Add-in Task Pane project

    • Выберите тип сценария - JavascriptChoose a script type - Javascript

    • Как вы хотите назвать надстройку?What do you want to name your add-in? - My Office Add-in

    • Какое клиентское приложение Office должно поддерживаться?Which Office client application would you like to support? - Outlook

    Снимок экрана с вопросами и ответами в генераторе Yeoman

    После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты Node.After you complete the wizard, the generator will create the project and install supporting Node components.

    Совет

    Вы можете игнорировать инструкции по дальнейшим действиям, предоставляемые генератором Yeoman после создания проекта надстройки.You can ignore the next steps guidance that the Yeoman generator provides after the add-in project's been created. Пошаговые инструкции этой статьи содержат все сведения, необходимые для завершения этого учебного курса.The step-by-step instructions within this article provide all of the guidance you'll need to complete this tutorial.

  2. Перейдите в корневую папку проекта веб-приложения.Navigate to the root folder of the web application project.

    cd "My Office Add-in"
    

Знакомство с проектомExplore the project

Проект надстройки, который вы создали с помощью генератора Yeoman, содержит образец кода для простейшей надстройки области задач.The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in.

  • Файл ./manifest.xml в корневом каталоге проекта определяет настройки и возможности надстройки.The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • Файл ./src/taskpane/taskpane.html содержит разметку HTML для области задач.The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • Файл ./src/taskpane/taskpane.css содержит код CSS, который применяется к содержимому области задач.The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • Файл ./src/taskpane/taskpane.js содержит код API JavaScript для Office, который упрощает взаимодействие между областью задачи и Outlook.The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and Outlook.

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

  1. Откройте в редакторе кода файл ./src/taskpane/taskpane.html и замените весь элемент <main> (внутри элемента <body>) приведенной ниже разметкой.In your code editor, open the file ./src/taskpane/taskpane.html and replace the entire <main> element (within the <body> element) with the following markup. Эта новая разметка добавляет метку в том месте, где скрипт ./src/taskpane/taskpane.js запишет данные.This new markup adds a label where the script in ./src/taskpane/taskpane.js will write data.

    <main id="app-body" class="ms-welcome__main" style="display: none;">
        <h2 class="ms-font-xl"> Discover what Office Add-ins can do for you today! </h2>
        <p><label id="item-subject"></label></p>
        <div role="button" id="run" class="ms-welcome__action ms-Button ms-Button--hero ms-font-xl">
            <span class="ms-Button-label">Run</span>
        </div>
    </main>
    
  2. Откройте файл ./src/taskpane/taskpane.js в редакторе кода и добавьте приведенный ниже код в пределах функции run.In your code editor, open the file ./src/taskpane/taskpane.js and add the following code within the run function. В этом коде используется API JavaScript для Office для получения ссылки на текущее сообщение и записи его свойства subject в область задач.This code uses the Office JavaScript API to get a reference to the current message and write its subject property value to the task pane.

    // Get a reference to the current message
    var item = Office.context.mailbox.item;
    
    // Write message property value to the task pane
    document.getElementById("item-subject").innerHTML = "<b>Subject:</b> <br/>" + item.subject;
    

ПроверкаTry it out

Примечание

Надстройки Office должны использовать HTTPS, а не HTTP, даже в случае разработки.Office Add-ins should use HTTPS, not HTTP, even when you are developing. Если вам будет предложено установить сертификат после того, как вы запустите одну из указанных ниже команд, примите предложение установить сертификат, предоставленный генератором Yeoman.If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

Совет

Если вы тестируете надстройку на компьютере Mac, перед продолжением выполните указанную ниже команду.If you're testing your add-in on Mac, run the following command before proceeding. После выполнения этой команды запустится локальный веб-сервер.When you run this command, the local web server will start.

npm run dev-server
  1. Выполните следующую команду в корневом каталоге своего проекта.Run the following command in the root directory of your project. После выполнения этой команды запустится локальный веб-сервер (если он еще не запущен).When you run this command, the local web server will start.

    npm start
    
  2. Чтобы загрузить неопубликованную надстройку в Outlook, следуйте инструкциями из статьи Загрузка неопубликованных надстроек Outlook для тестирования.Follow the instructions in Sideload Outlook add-ins for testing to sideload the add-in in Outlook.

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

  4. Выберите вкладку Главная (или вкладку Сообщения, если вы открыли сообщение в новом окне), а затем нажмите кнопку Показать область задач на ленте, чтобы открыть область задач надстройки.Choose the Home tab (or the Message tab if you opened the message in a new window), and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

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

  5. Прокрутите область задачи в самый низ и перейдите по ссылке Выполнить, чтобы написать тему сообщения в области задач.Scroll to the bottom of the task pane and choose the Run link to write the message subject to the task pane.

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

Дальнейшие действия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.