Создание первой надстройки области задач OneNote

  • Статья

В этой статье вы ознакомитесь с процессом создания надстройки для области задач OneNote.

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

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

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

yo office

Примечание.

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

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

  • Выберите тип проекта:Office Add-in Task Pane project
  • Выберите тип скрипта:Javascript
  • Как вы хотите назвать надстройку?My Office Add-in
  • Какое клиентское приложение Office вы хотите поддерживать?OneNote

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

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

Примечание.

Если вы используете Node.js версии 20.0.0 или более поздней, при запуске установки генератора может появилось предупреждение о том, что у вас неподдерживаемый модуль. Мы работаем над исправлением этого. В то же время предупреждение не влияет на генератор или проект, который вы создаете, поэтому его можно игнорировать.

Совет

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

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

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

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

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

Откройте файл ./src/taskpane/taskpane.js в редакторе кода и добавьте следующий код в функцию run. В этом коде используется API JavaScript для OneNote, чтобы настроить заголовок страницы и добавить контур к тексту страницы.

try {
    await OneNote.run(async (context) => {

        // Get the current page.
        const page = context.application.getActivePage();

        // Queue a command to set the page title.
        page.title = "Hello World";

        // Queue a command to add an outline to the page.
        const html = "<p><ol><li>Item #1</li><li>Item #2</li></ol></p>";
        page.addOutline(40, 90, html);

        // Run the queued commands.
        await context.sync();
    });
} catch (error) {
    console.log("Error: " + error);
}

Проверка

  1. Перейдите к корневой папке проекта.

    cd "My Office Add-in"

  2. Запустите локальный веб-сервер. Выполните следующую команду в корневом каталоге своего проекта.

    npm run dev-server

    Примечание.

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

  3. Откройте записную книжку в OneNote в Интернете и создайте страницу.

  4. Выберите Вставить > надстройки Office , чтобы открыть диалоговое окно Надстройки Office.

    • Если вы вошли с помощью обычной учетной записи, выберите Отправить надстройку на вкладке МОИ НАДСТРОЙКИ.

    • Если вы вошли с помощью рабочей или учебной учетной записи, выберите Отправить надстройку на вкладке МОЯ ОРГАНИЗАЦИЯ.

    На следующем изображении показана вкладка МОИ НАДСТРОЙКИ для обычных записных книжек.

    Диалоговое окно

  5. В диалоговом окне "Отправить надстройку" выберите manifest.xml в папке проекта и нажмите кнопку Отправить.

  6. На вкладке Главная нажмите кнопку Показать область задач на ленте. Область задач надстройки откроется в iFrame рядом со страницей OneNote.

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

    Надстройка, созданная на основе этого пошагового руководства, в которой для открытия области задач в OneNote использовалась кнопка ленты

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

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

Обзор API JavaScript для OneNote

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

См. также