Html script google sites

Google Apps Script: Create user interface using HTML/ CSS/ JavaSript

The Html Service in Google Apps Script provides ability to create and serve HTML output from a script.

Scripts that create user interfaces with the Html Service can contain HTML, JavaScript, and CSS. Our scripts can display the user interface in the following three ways:

In this blog, we are going to create a stand-alone web-app.

Step 1: Create HTML File

To create an HTML file in Google Apps Script, open the Script Editor and choose File > New > Html File. This will create a new file in your project, which starts out with just the following code:

In this HTML file, we can write standard HTML. Google Apps Script currently supports HTML 4.01, so you can see this spec to understand what is supported.

Step 2: Create gs File

Then, create a Script file and paste following code. It is loading the HTML code from the html file and returning it as an HtmlOutput object that will be rendered when a user accesses web app.

Now we have a project with a html file and a gs file. To try it out, follow these steps:

1. Before we can deploy a script as web app, we must save a version of our script. To do so, choose File > Manage Versions in the Script Editor, provide a description for the version, and then click Save New Version.
2. Next, follow the steps listed in Deploying Your Script as a Web App. Choose Publish > Deploy as web app from the menu. A dialog will appear where we will need to make three decisions about how to publish our web app, then click the Deploy button.
3. We’ll see a new dialog with a message indicating that our project has been successfully deployed as a web app. Below that message the URL of your web app would displays.
4. Open the URL in browser, and we should see a page that looks like the image according to the code in the html file.

The Html Service allows to serve HTML output from a script, sanitized by Google Caja. The Caja Compiler is an open-source tool for making third-party HTML, CSS and JavaScript safe to embed in your website or web app. The Html Service contains two primary classes:

HtmlOutput: This object contains content that can be served from a script. This HtmlOutput object is what we must return from our doGet function, and it is this content that is served to the user when they access our web app.

HtmlTemplate. This is an object that can produce an HtmlOutput dynamically. It gets its contents from a file, a string, etc.

Two particularly notable methods of HtmlTemplate are evaluate and getCode . The evaluate method runs the template and returns an HtmlOutput object. The getCode method returns a string of JavaScript code based on the template file. This code that is returned is the code that the template is actually running.

Caja Sanitization:

Google Apps Script web apps run on the script.google.com domain. This enables many useful features, such as embedding scripts in Google Sites and having access to the identity and authorizations of signed-in users who are accessing the web app. However, to protect the security of the users accessing these web apps, the scripts are not allowed to serve arbitrary HTML or JavaScript. HtmlService uses the Caja Compiler to sanitize and sandbox the HTML that gets served to users. To lists some of the limitations on web apps built using HtmlService as a result of the Caja sanitization process Click here.

We can include external JavaScript libraries in our code via tags. These libraries will be fetched on the server before your page is loaded, and will be sanitized in the same way that your code is. That means that if the included library violates any of the rules for HtmlService code, you will get an error loading your web app. Many JavaScript libraries will work within these rules, but not all will. To check working on any JavaScript file, we can use Caja Playground.

Here, is the example that contains a gs file, and html files. This example creating a carousel (Image Slider) using HTML/ CSS/ JavaScript.

Carousel.gs File:

CreateCarousel.html:

Источник

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

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

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

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

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

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

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

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

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

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

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

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 >
>
>

И в конце концов запускаем скрипт сервера 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 функции:

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

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

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

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

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

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

Источник

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

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

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

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

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

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

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

Подавать HTML как веб-приложение

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

Код.gs

Индекс.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

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

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-06-22 UTC.

Источник