Вернуться к списку статей

Простой пример использования HTML в Google Apps Script на примере GoogleSheet

А вы знали, что в Google Apps Script можно использовать HTML страницы со скриптами (javascript) и даже JQuery(с небольшими ограничениями) - совсем как сайты? Сейчас мы покажем простой пример этого!

Итак приступим. Для примера создадим новую таблицу в GoogleSheet. В ней создадим 2 вкладки: test и problems.

На вкладке test сделаем кнопку (для удобства), по которой будет вызваться наш скрипт:

Google Docs

На вкладке problems сделаем таблицу с 3 столбцами - Имя, Браузер, Описание проблемы:

Google Docs

Теперь заходим в редактор скриптов и создаем новую HTML страницу с названием index:

Google Docs

На этой странице делаем простенькую форму с полями для ввода имени, выбора браузера и описания проблемы. И добавляем 2 кнопки - очистить и отправить. На отправить вешаем скрипт на нажатие кнопки - clickButton()

Google Docs

Выглядеть эта форма будет вот так:

Google Docs

Скрипт на нажатие кнопки - clickButton() - выглядит следующим образом:

Google Docs

Принцип действия скрипта очень прост:

Получаем ссылку на Форму и значения полей Имя и Описание проблемы:

var name = form.elements.name.value
var problem = form.elements.problem.value

Проверяем на заполненность поля Имя:

if(!checkFill(name)){
  alert('Не заполнено обязательное поле - ИМЯ')
  return
}
.............................
function checkFill(objValue){
  if(objValue.length > 0){
    return true
  }
  return false
}

Проверяем на заполненность поля Описание проблемы

if(!checkFill(problem)){
  alert('Не заполнено обязательное поле - ОПИСАНИЕ ПРОБЛЕМЫ')
  return
}
.............................
function checkFill(objValue){
  if(objValue.length > 0){
    return true
  }
  return false
}

Получаем наименование Браузера:

var browser = getBrowser(form)
.............................
function getBrowser(form){
  var arrRadio = form.browser
  for(var i = 0; i<arrRadio.length;i++){
    if(arrRadio[i].checked){
      return arrRadio[i].value
    }
  }
}

И в конце концов запускаем скрипт сервера writeProblem(name, browser, problem) (который будет у нас находится в этом же проекте) с помощью специальной директивы. Так же приписываем 2 callback - они запускаются в зависимости от ответа сервера (нашего скрипта writeProblem). При ошибке запускается выполняется команда .withFailureHandler(onFailure), которая в свою очередь запускает скрипт на клиентской стороне (в этом HTML коде) onFalilure. При правильном завершении скрипта на сервере, запускается команда .withSuccessHandler(onSuccess), которая в свою очередь запускает скрипт на клиентской стороне (в этом HTML коде) onSuccess. В этот скрипт неявно в виде первого аргумента передается возвращаемое значение от скрипта с сервера:

google.script.run
  .withFailureHandler(onFailure)
  .withSuccessHandler(onSuccess)
  .writeProblem(name, browser, problem)

Скрипт onFalilure выводит сообщение, что произошла ошибка:

function onFailure(){
  alert('Проблема с записью. Попробуйте еще раз')
}

Скрипт onSuccess проверяет возвращенное значение с сервера, и если это true, то модальное окно с HTML формой закрывается специально директивой:

function onSuccess(test){
  if(test){
    google.script.host.close()
  }
}

Теперь настало время написать серверный скрипт (в нашем случае - это обычный, стандартный Google Apps Script). Переименовываем автоматически созданный скрипт с названием Код на test и создаем 2 функции:

Google Docs

В функции test мы задаем, что из нашего файла index.html мы создаем HTMLOutput и специально командной показываем модальное окно.

В функции writeToProblem мы получаем 3 значения из HTML формы, записываем их на страницу problems и возвращаем true.

Осталось только к нашей картинке назначить скрипт test и можно проверять результаты нашей работы!

Google Docs

Теперь просто нажимаем на нашу кнопку, появляется форма. Заполняем форму, нажимаем отправить - и на нашей вкладке problems появляется новая запись!

Вот такой простой пример использования HTML в GoogleSheets!

Как обычно, ссылка на пример в Google Sheets:

Google Sheets Ссылка на файл
 Вернуться к списку статей