Что такое диалоговое окно и зачем оно нужно?
Диалоговое окно в Google Apps Script — это всплывающее окно, которое позволяет взаимодействовать с пользователем напрямую из интерфейса Google Sheets, Docs, Forms или других сервисов Google. Оно используется для запроса ввода данных, отображения информации, подтверждения действий или выполнения других интерактивных задач. Диалоговые окна значительно расширяют возможности стандартных скриптов, делая их более удобными и функциональными для конечных пользователей. Представьте, что вам нужно подтвердить удаление рекламной кампании в Google Ads прямо из Google Sheets – диалоговое окно идеально подходит для этой задачи.
Основные типы диалоговых окон в Google Apps Script
В Google Apps Script существует два основных способа создания диалоговых окон:
- DialogService: Более старый, упрощенный сервис. Позволяет создавать простые диалоговые окна с использованием предопределенных элементов управления, таких как текстовые поля, кнопки и списки. DialogService проще в использовании для базовых задач, но менее гибок в настройке внешнего вида.
- HtmlService: Более мощный и гибкий сервис. Позволяет создавать диалоговые окна с произвольным HTML, CSS и JavaScript кодом. Это дает полный контроль над внешним видом и поведением диалогового окна. HtmlService рекомендуется для создания сложных и кастомизированных диалоговых окон.
Сравнение DialogService и HtmlService для создания диалоговых окон
| Характеристика | DialogService | HtmlService |
| ——————— | ———————————— | ——————————————— |
| Простота использования | Высокая | Средняя |
| Гибкость | Низкая | Высокая |
| Возможности кастомизации | Ограниченные | Полные (HTML, CSS, JavaScript) |
| Поддержка современных UI | Ограниченная | Полная |
| Сложность реализации сложных UI | Высокая (из-за ограничений) | Средняя (стандартные веб-технологии) |
В целом, DialogService подходит для быстрых прототипов и простых задач, в то время как HtmlService является предпочтительным выбором для создания профессиональных и функциональных диалоговых окон.
Создание простого диалогового окна с использованием HtmlService
Создание HTML-файла для содержимого диалогового окна
Первым шагом является создание HTML-файла, который будет содержать содержимое вашего диалогового окна. В Google Apps Script редакторе создайте новый HTML-файл (например, myDialog.html) и добавьте в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Приветствие</title>
</head>
<body>
<h1>Привет!</h1>
<p>Это простое диалоговое окно.</p>
</body>
</html>
Написание скрипта Google Apps Script для отображения диалогового окна
Теперь напишем скрипт Google Apps Script, который будет отображать созданный HTML-файл в виде диалогового окна. Создайте новый файл скрипта (например, Code.gs) и добавьте следующий код:
/**
* Функция для отображения диалогового окна.
*/
function showMyDialog() {
/** @type {HtmlOutput} */
var htmlOutput = HtmlService.createHtmlOutputFromFile('myDialog')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(htmlOutput, 'Мое диалоговое окно');
}
Открытие диалогового окна из Google Sheets/Docs/Forms
Чтобы открыть диалоговое окно, необходимо добавить пункт меню в интерфейс Google Sheets, Docs или Forms. Добавьте следующую функцию в ваш скрипт Code.gs:
/**
* Функция для добавления пункта меню.
*/
function onOpen() {
/** @type {Ui} */
var ui = SpreadsheetApp.getUi();
ui.createMenu('Мое меню')
.addItem('Открыть диалоговое окно', 'showMyDialog')
.addToUi();
}
Теперь при открытии Google Sheets появится новое меню «Мое меню», содержащее пункт «Открыть диалоговое окно». При нажатии на этот пункт откроется диалоговое окно, созданное из HTML-файла myDialog.html.
Настройка диалогового окна: размеры, заголовки, кнопки
Изменение размеров и положения диалогового окна
Размеры диалогового окна можно изменить с помощью методов setWidth() и setHeight() объекта HtmlOutput. Положение диалогового окна контролировать нельзя, оно определяется автоматически браузером.
HtmlService.createHtmlOutputFromFile('myDialog')
.setWidth(600) // Ширина 600 пикселей
.setHeight(400); // Высота 400 пикселей
Установка заголовка диалогового окна
Заголовок диалогового окна устанавливается при вызове метода showModalDialog():
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Новый заголовок диалогового окна');
Добавление и настройка кнопок в диалоговом окне
Для добавления кнопок в диалоговое окно необходимо добавить HTML-код кнопок в HTML-файл и JavaScript-код для обработки нажатий кнопок. Например:
<!DOCTYPE html>
<html>
<head>
<title>Диалоговое окно с кнопками</title>
</head>
<body>
<h1>Подтвердите действие</h1>
<button onclick="google.script.run.processConfirmation(true)">Да</button>
<button onclick="google.script.run.processConfirmation(false)">Нет</button>
</body>
</html>
Взаимодействие с пользователем: передача данных и обработка событий
Передача данных из Google Apps Script в диалоговое окно (сервер-клиент)
Для передачи данных из Google Apps Script (сервер) в диалоговое окно (клиент) можно использовать метод HtmlOutput.append() для добавления данных в HTML-код или использовать шаблоны HTML. Например:
function showDialogWithData(data) {
/** @type {HtmlOutput} */
var htmlOutput = HtmlService.createHtmlOutput('<h1>Данные:</h1><p>' + data + '</p>')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Диалоговое окно с данными');
}
Передача данных из диалогового окна в Google Apps Script (клиент-сервер)
Для передачи данных из диалогового окна в Google Apps Script используется объект google.script.run. Например, в HTML-файле:
<button onclick="google.script.run.processData(document.getElementById('myInput').value)">Отправить</button>
<input type="text" id="myInput">
А в Google Apps Script:
function processData(data) {
Logger.log('Полученные данные: ' + data);
// Обработка полученных данных
}
Обработка событий кнопок и других элементов управления
Обработка событий кнопок и других элементов управления выполняется с помощью JavaScript в HTML-файле. При нажатии на кнопку вызывается функция JavaScript, которая затем вызывает функцию Google Apps Script с помощью google.script.run.
Продвинутые техники: асинхронные запросы и работа с API
Использование асинхронных запросов (google.script.run) для улучшения производительности
google.script.run выполняет запросы асинхронно, что позволяет избежать блокировки интерфейса пользователя во время выполнения длительных операций. Для обработки результатов асинхронного запроса используются колбэки:
google.script.run
.withSuccessHandler(function(result) {
// Обработка успешного результата
console.log(result);
})
.withFailureHandler(function(error) {
// Обработка ошибки
console.error(error);
})
.myLongRunningFunction();
Интеграция с другими сервисами Google (Sheets, Docs, Drive) через диалоговые окна
Диалоговые окна можно использовать для взаимодействия с другими сервисами Google. Например, можно отобразить список файлов из Google Drive в диалоговом окне и позволить пользователю выбрать файл.
Примеры использования диалоговых окон для сложных задач: подтверждение удаления, ввод данных и т.д.
- Подтверждение удаления: Перед удалением рекламной кампании в Google Ads можно отобразить диалоговое окно с запросом подтверждения.
- Ввод данных: Можно использовать диалоговое окно для сбора данных о новых клиентах или продуктах.
- Выбор даты: Можно создать пользовательский элемент управления выбора даты в диалоговом окне.
- Предварительный просмотр: Отображение превью сгенерированного отчёта перед его окончательной отправкой.