Служба HTML: создание и обслуживание HTML

HTML-сервис позволяет обслуживать веб-страницы, взаимодействующие с серверными функциями Apps Script. Он особенно полезен для создания веб-приложений или добавления пользовательских интерфейсов в Google Docs, Sheets и Forms. Вы даже можете использовать его для создания текста электронного письма.

Создание HTML-файлов

Чтобы добавить HTML-файл в проект Apps Script, выполните следующие действия:

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