Служба HTML позволяет обслуживать веб-страницы, которые могут взаимодействовать с функциями скриптов приложений на стороне сервера. Это особенно полезно для создания веб-приложений или добавления пользовательских интерфейсов в Документы, Таблицы и Формы Google. Вы даже можете использовать его для создания тела электронного письма.
Создание HTML-файлов
Чтобы добавить HTML-файл в проект Apps Script, выполните следующие действия:
- Откройте редактор сценариев приложений.
- Слева нажмите файл > HTML .
В файле HTML вы можете написать большинство стандартных HTML, CSS и клиентского JavaScript. Страница будет отображаться в формате HTML5, хотя некоторые расширенные функции HTML5 недоступны, как описано в разделе «Ограничения» .
Ваш файл также может включать скриптлеты шаблонов, которые обрабатываются на сервере перед отправкой страницы пользователю — аналогично PHP — как описано в разделе о шаблонном HTML .
Использование HTML как веб-приложения
Чтобы создать веб-приложение с помощью службы HTML, ваш код должен включать функцию doGet()
, которая сообщает сценарию, как обслуживать страницу. Функция должна возвращать объект HtmlOutput
, как показано в этом примере.
Код.gs
function doGet() { return HtmlService.createHtmlOutputFromFile('Index'); }
Индекс.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! </body> </html>
Как только эта базовая структура будет создана, все, что вам нужно сделать, это сохранить версию вашего скрипта , а затем развернуть его как веб-приложение .
После развертывания сценария как веб-приложения его также можно встроить на сайт Google .
Используйте HTML в качестве пользовательского интерфейса Google Docs, Sheets, Slides или Forms.
Служба HTML может отображать диалоговое окно или боковую панель в документах, таблицах, слайдах или формах Google, если ваш скрипт привязан к контейнеру файла. (В Google Forms пользовательские интерфейсы видны только редактору, который открывает форму, чтобы изменить ее, а не пользователю, который открывает форму, чтобы ответить.)
В отличие от веб-приложения, сценарий, создающий пользовательский интерфейс для документа, электронной таблицы или формы, не нуждается в специальной функции doGet()
, и вам не нужно сохранять версию вашего сценария или развертывать ее. Вместо этого функция, открывающая пользовательский интерфейс, должна передать ваш HTML-файл в качестве объекта HtmlOutput
методам showModalDialog())
или showSidebar()
объекта Ui
для активного документа, формы или электронной таблицы.
Эти примеры включают несколько дополнительных функций для удобства: функция onOpen()
создает пользовательское меню , которое упрощает открытие интерфейса, а кнопка в файле HTML вызывает специальный метод close()
API google.script.host
чтобы закрыть интерфейс.
Код.gs
// Use this code for Google Docs, Slides, Forms, or Sheets. function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Dialog') .addItem('Open', 'openDialog') .addToUi(); } function openDialog() { var html = HtmlService.createHtmlOutputFromFile('Index'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'Dialog title'); }
Индекс.html
<!DOCTYPE html> <html> <head> <base target="_top"> </head> <body> Hello, World! <input type="button" value="Close" onclick="google.script.host.close()" /> </body> </html>
Обратите внимание: когда вы впервые хотите отобразить этот пользовательский интерфейс, вам необходимо либо запустить функцию onOpen()
вручную в редакторе сценариев , либо перезагрузить окно редактора документов, таблиц или форм (при этом редактор сценариев закроется). После этого пользовательское меню должно появляться в течение нескольких секунд каждый раз, когда вы открываете файл. Выберите «Диалог» > «Открыть» , чтобы увидеть интерфейс.