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

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

Создавайте HTML-файлы

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

  1. Откройте редактор Apps Script.
  2. Слева нажмите « файл» > «HTML» .

В HTML-файле можно писать большинство стандартных HTML-кодов, CSS и клиентский JavaScript. Страница отображается как HTML5, хотя некоторые расширенные возможности HTML5 недоступны, как объяснено в разделе «Ограничения» .

В ваш файл также можно включить шаблонные скрипты, которые обрабатываются на сервере перед отправкой страницы пользователю — аналогично PHP — как объяснено в разделе о шаблонном HTML .

Отображение HTML в качестве веб-приложения

Для создания веб-приложения с использованием HTML-сервиса ваш код должен включать функцию doGet , которая указывает скрипту, как отображать страницу. Функция должна возвращать объект HtmlOutput , как показано в этом примере.

Code.gs 

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index');
}

Index.html 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    Hello, World!
  </body>
</html>

После того, как базовая структура будет создана, вам останется только сохранить версию вашего скрипта , а затем развернуть его в качестве веб-приложения .

После развертывания скрипта в качестве веб-приложения его также можно встроить в сайт Google .

Используйте HTML в качестве пользовательского интерфейса для Google Docs, Sheets, Google Slides или Forms.

HTML-сервис может отображать диалоговое окно или боковую панель в Google Docs, Sheets, Slides или Forms, если ваш скрипт привязан к файлу через контейнер . В Google Forms пользовательские интерфейсы видны только редактору, который открывает форму для ее изменения, а не пользователю, который открывает форму для ответа.

В отличие от веб-приложения, скрипт, создающий пользовательский интерфейс для документа, электронной таблицы или формы, не требует отдельной функции doGet , и вам не нужно сохранять версию скрипта или развертывать его. Вместо этого функция, открывающая пользовательский интерфейс, должна передавать ваш HTML-файл в виде объекта HtmlOutput методам showModalDialog или showSidebar объекта Ui для активного документа, формы или электронной таблицы.

В этих примерах для удобства добавлены несколько дополнительных функций: функция onOpen создает пользовательское меню , которое помогает открыть интерфейс, а кнопка в HTML-файле вызывает google.script.host.close для закрытия интерфейса.

Code.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');
}

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