Служба HTML позволяет обслуживать веб-страницы, которые могут взаимодействовать с серверными функциями сценариев приложений. Это особенно полезно для создания веб-приложений или добавления пользовательских интерфейсов в Google Docs, Sheets и Forms. Вы даже можете использовать его для создания тела электронного письма.
Создание 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 Docs, Sheets, Slides или Forms, если ваш сценарий привязан к контейнеру файла. (В 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()
вручную в редакторе сценариев , либо перезагрузить окно редактора документов, таблиц или форм (что закроет редактор сценариев). После этого пользовательское меню должно появляться в течение нескольких секунд каждый раз, когда вы открываете файл. Выберите «Диалог» > «Открыть» , чтобы увидеть интерфейс.