HTML-сервис позволяет обслуживать веб-страницы, взаимодействующие с серверными функциями Apps Script. Он особенно полезен для создания веб-приложений или добавления пользовательских интерфейсов в 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() в редакторе скриптов , либо перезагрузить окно редактора документов, таблиц или форм (что закроет редактор скриптов). После этого пользовательское меню должно появляться в течение нескольких секунд при каждом открытии файла. Чтобы увидеть интерфейс, выберите «Диалог» > «Открыть» .