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

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

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

Можно создать надстройку Office с помощью генератора Yeoman для надстроек Office или Visual Studio. Генератор Yeoman создает проект Node.js, которым можно управлять с помощью Visual Studio Code или любого другого редактора, а Visual Studio создает решение Visual Studio. Выберите вкладку с нужным вариантом и следуйте инструкциям, чтобы создать надстройку и протестировать ее локально.

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

Примечание

Если вы не знакомы с Node.js или NPM, начните с настройки среды разработки.

  • Node.js (последняя версия LTS)

  • Последняя версия Yeoman и генератора Yeoman для надстроек Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.

    npm install -g yo generator-office
    

    Примечание

    Даже если вы уже установили генератор Yeoman, рекомендуем обновить пакет до последней версии из npm.

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

  1. Выполните следующую команду, чтобы создать проект надстройки с помощью генератора Yeoman.

    yo office
    

    Примечание

    При выполнении команды yo office может появиться запрос о политиках сбора данных генератора Yeoman и средств CLI надстройки Office. Используйте предоставленные сведения, чтобы ответить на запросы подходящим образом.

    При появлении запроса предоставьте следующую информацию для создания проекта надстройки.

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

    • Выберите тип сценария - JavaScript

    • Как вы хотите назвать надстройку? - My Office Add-in

    • Какое клиентское приложение Office должно поддерживаться? - Outlook

    Снимок экрана: запросы и ответы для генератора Yeoman в интерфейсе командной строки.

    После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты Node.

    Совет

    Вы можете игнорировать инструкции по дальнейшим действиям, предоставляемые генератором Yeoman после создания проекта надстройки. Пошаговые инструкции этой статьи содержат все сведения, необходимые для завершения этого учебного курса.

  2. Перейдите в корневую папку проекта веб-приложения.

    cd "My Office Add-in"
    

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

Проект надстройки, который вы создали с помощью генератора Yeoman, содержит образец кода для простейшей надстройки области задач.

  • Файл ./manifest.xml в корневом каталоге проекта определяет настройки и возможности надстройки.
  • Файл ./src/taskpane/taskpane.html содержит разметку HTML для области задач.
  • Файл ./src/taskpane/taskpane.css содержит код CSS, который применяется к содержимому области задач.
  • Файл ./src/taskpane/taskpane.js содержит код API JavaScript для Office, который упрощает взаимодействие между областью задачи и Outlook.

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

  1. Откройте в редакторе кода файл ./src/taskpane/taskpane.html и замените весь элемент <main> (внутри элемента <body>) приведенной ниже разметкой. Эта новая разметка добавляет метку в том месте, где скрипт ./src/taskpane/taskpane.js запишет данные.

    <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. В этом коде используется API JavaScript для Office для получения ссылки на текущее сообщение и записи его свойства subject в область задач.

    // 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;
    

Проверка

Примечание

Надстройки Office должны использовать HTTPS, а не HTTP, даже в случае разработки. Если вам будет предложено установить сертификат после того, как вы запустите указанную ниже команду, примите предложение установить сертификат, предоставленный генератором Yeoman. Кроме того, вам может потребоваться запустить командную строку или терминал с правами администратора, чтобы внести изменения.

  1. Выполните следующую команду в корневом каталоге своего проекта. После выполнения этой команды запустится локальный веб-сервер (если он еще не запущен) и будет загружена ваша неопубликованная надстройка.

    npm start
    
  2. Чтобы загрузить неопубликованную надстройку в Outlook, следуйте инструкциями из статьи Загрузка неопубликованных надстроек Outlook для тестирования.

  3. В Outlook просмотрите сообщение в области чтения или откройте сообщение в отдельном окне.

  4. Выберите вкладку Главная (или вкладку Сообщения, если вы открыли сообщение в новом окне), а затем нажмите кнопку Показать область задач на ленте, чтобы открыть область задач надстройки.

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

    Примечание

    Если сообщение об ошибке "Не удается открыть эту надстройку с localhost" появляется в области задач, выполните действия, описанные в статье по устранению неполадок.

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

    Снимок экрана: область задач надстройки с выделенной ссылкой "Выполнить".

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

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

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