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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Служба HTML позволяет обслуживать веб-страницы, которые могут взаимодействовать с серверными функциями сценариев приложений. Это особенно полезно для создания веб-приложений или добавления пользовательских интерфейсов в 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 методам Ui showModalDialog()) или showSidebar() объекта пользовательского интерфейса для активного документа, формы или электронной таблицы.

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