Создание автономной надстройки Office на основе кода Script Lab

Статья
11/14/2023

Если вы создали фрагмент кода в Script Lab, его может потребоваться превратить в автономную надстройку. Вы можете скопировать код из Script Lab в проект, созданный генератором Yeoman для надстроек Office (другое название — "Yo Office"). Затем вы можете продолжить разработку кода в качестве надстройки, которую в конечном итоге можно развернуть для других пользователей.

Действия в этой статье относятся к Visual Studio Code, но вы можете использовать любой другой редактор кода.

Создание проекта Yo Office

Необходимо создать автономный проект надстройки, который будет новым расположением разработки для вашего фрагмента кода.

Запустите команду yo office --projectType taskpane --ts true --host <host> --name "my-add-in", где <host> имеет одно из следующих значений.

excel
outlook
powerpoint
word

Важно!

Значение аргумента --name должно быть указано в двойных кавычках, даже если оно не содержит пробелов.

Предыдущая команда создает папку проекта с именем my-add-in. Он настроен для запуска в указанном вами узле и использует TypeScript. Script Lab использует TypeScript по умолчанию, но большинство фрагментов кода используют JavaScript. При желании вы можете создать проект Yo Office JavaScript. Нужно лишь убедиться, что любой копируемый код является кодом JavaScript.

Открытие фрагмента кода в Script Lab

Используйте существующий фрагмент кода в Script Lab, чтобы узнать, как скопировать фрагмент кода в проект, созданный Yo Office.

Откройте Office (Word, Excel, PowerPoint или Outlook), а затем — Script Lab.
Выберите Script Lab>Код. Если вы работаете в Outlook, откройте сообщение электронной почты, чтобы увидеть Script Lab на ленте.
Откройте фрагмент кода в Script Lab. Если вы хотите начать с существующего примера, перейдите в область задач Script Lab и выберите Примеры.

Копирование фрагмента кода в Visual Studio Code

Теперь вы можете скопировать код из фрагмента в проект Yo Office в VS Code.

В VS Code откройте проект my-add-in .

На следующих шагах вы скопируете код с нескольких вкладок в Script Lab.

Вкладки в Script Lab.

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

В VS Code откройте файл /src/taskpane/taskpane.ts. Если вы используете проект JavaScript, имя файла будетtaskpane.js.
В Script Lab выберите вкладку Скрипт.
Скопируйте весь код на вкладке Скрипт в буфер обмена. Замените все содержимое taskpane.ts (или taskpane.js для JavaScript) скопированным кодом.

Копирование HTML-кода области задач

В VS Code откройте файл /src/taskpane/taskpane.html.
В Script Lab выберите вкладку HTML.
Скопируйте весь HTML-код на вкладке HTML в буфер обмена. Замените весь HTML-код внутри тега <body> скопированным HTML-кодом.

Копирование CSS области задач

В VS Code откройте файл /src/taskpane/taskpane.css.
В Script Lab выберите вкладку CSS.
Скопируйте весь код CSS на вкладке CSS в буфер обмена. Замените все содержимое taskpane.css скопированным кодом CSS.
Сохраните все изменения в файлах, обновленных на предыдущих шагах.

Добавление поддержки jQuery

Script Lab использует jQuery во фрагментах кода. Чтобы успешно выполнить код, необходимо добавить эту зависимость в проект Yo Office.

Откройте файл taskpane.html и добавьте в раздел <head> следующий тег скрипта.
```
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>
```
Примечание.

Конкретная версия jQuery может отличаться. Вы можете определить, какую версию использует Script Lab, выбрав вкладку Библиотеки.
Откройте терминал в VS Code и введите следующие команды.
```
npm install --save-dev jquery@3.1.1
npm install --save-dev @types/jquery@3.3.1
```

Если вы создали фрагмент кода с дополнительными зависимостями библиотеки, обязательно добавьте их в проект Yo Office. Найдите список всех зависимостей библиотеки на вкладке Библиотеки в Script Lab.

Обработка инициализации

Script Lab автоматически обрабатывает инициализацию Office.onReady. Измените код, чтобы предоставить собственный обработчик Office.onReady.

Откройте файл taskpane.ts (или taskpane.js для JavaScript).

Для Excel, PowerPoint или Word замените:

$("#run").on("click", () => tryCatch(run));

на:

Office.onReady(function () {
  // Office is ready.
  $(document).ready(function () {
    // The document is ready.
    $("#run").on("click", () => tryCatch(run));
  });
});

Для Outlook замените:

$("#get").on("click", get);
$("#set").on("click", set);
$("#save").on("click", save);

на:

Office.onReady(function () {
  // Office is ready
  $(document).ready(function () {
    // The document is ready
    $("#get").on("click", get);
    $("#set").on("click", set);
    $("#save").on("click", save);
  });
});

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

Настраиваемые функции

Если в вашем фрагменте кода используются настраиваемые функции, необходимо использовать шаблон настраиваемых функций Yo Office. Чтобы превратить настраиваемые функции в автономную надстройку, выполните следующие действия.

Выполните команду yo office --projectType excel-functions --ts true --name "my-functions".

Важно!

Значение аргумента --name должно быть указано в двойных кавычках, даже если оно не содержит пробелов.
Откройте Excel, а затем — Script Lab.
Выберите Script Lab>Код.
Откройте фрагмент кода в Script Lab. Если вы хотите начать с существующего примера, перейдите в область задач Script Lab, выберите Примеры и выполните поиск в разделе Пользовательские функции.
Откройте файл /src/functions/functions.ts. Если вы используете проект JavaScript, именем файла будет functions.js.
В Script Lab выберите вкладку Скрипт.
Скопируйте весь код на вкладке Скрипт в буфер обмена. Вставьте код в начало файла functions.ts (или functions.js для JavaScript) с скопированным кодом.
Сохраните файл.

Тестирование автономной надстройки

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

npm start

Запустится Office, и вы сможете открыть область задач своей надстройки на ленте. Поздравляем! Теперь вы можете продолжить создание надстройки в качестве автономного проекта.

Ведение журнала консоли

Многие фрагменты кода в Script Lab записывают выходные данные в раздел консоли в нижней части области задач. У проекта Yo Office нет раздела консоли. Все инструкции console.log* будут записываться в консоль отладки по умолчанию (например, в средства разработчика в браузере). Если вы хотите, чтобы выходные данные отправлялись в вашу область задач, обновите код.