Google Apps Script: Как показать всплывающее окно?

Что такое всплывающее окно и зачем оно нужно?

Всплывающее окно (popup window) в Google Apps Script – это небольшое окно, которое появляется поверх текущего интерфейса пользователя, требуя его внимания. Оно используется для отображения важной информации, запроса подтверждения, сбора пользовательского ввода или предоставления обратной связи. Всплывающие окна необходимы, когда требуется немедленное взаимодействие с пользователем, прерывающее его текущий рабочий процесс.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Типы всплывающих окон, которые можно создать с помощью Google Apps Script

Существует несколько способов создания всплывающих окон:

• Ui.alert(): Для простых уведомлений и сообщений.
• Ui.prompt(): Для запроса однострочного ввода от пользователя.
• Ui.showModelessDialog() / Ui.showModalDialog(): Для отображения более сложных интерфейсов, созданных с использованием HTML Service. Модальные окна блокируют взаимодействие с основным интерфейсом до закрытия, а немодальные – нет.

Когда стоит использовать всплывающие окна?

Всплывающие окна уместны в следующих ситуациях:

• Предупреждение об опасных действиях (удаление данных).
• Запрос подтверждения перед выполнением операции.
• Отображение результатов выполнения скрипта.
• Сбор небольшого объема данных от пользователя (например, имя или email).
• Отображение важной информации, требующей немедленного внимания.

Простейший пример: отображение простого всплывающего окна

Создание нового скрипта Google Apps Script

1. Откройте Google Sheets, Docs, Forms или Slides.
2. Выберите «Инструменты» > «Редактор скриптов».
3. Откроется редактор Google Apps Script.

Написание кода для отображения базового всплывающего окна

/**
 * Функция для отображения простого всплывающего окна с приветствием.
 */
function showSimpleAlert() {
  // Получаем доступ к интерфейсу пользователя активного приложения.
  const ui = SpreadsheetApp.getUi();

  // Отображаем всплывающее окно с текстом приветствия.
  ui.alert('Привет, мир!');
}

Запуск скрипта и проверка результата

1. В редакторе скриптов выберите функцию showSimpleAlert в выпадающем списке.
2. Нажмите кнопку «Выполнить» (значок play).
3. Google запросит разрешение на выполнение скрипта. Предоставьте необходимые разрешения.
4. Вы увидите всплывающее окно с текстом «Привет, мир!».

Объяснение основных компонентов кода

• SpreadsheetApp.getUi(): Возвращает объект Ui, который предоставляет доступ к элементам пользовательского интерфейса активного приложения (Sheets в данном случае). В других приложениях (Docs, Forms, Slides) будут соответствующие методы (DocumentApp.getUi(), FormApp.getUi(), SlidesApp.getUi()).
• ui.alert(message): Отображает простое всплывающее окно с кнопкой «OK». message – это строка, которая будет отображена в окне.

Настройка всплывающего окна: заголовок, текст и кнопки

Изменение заголовка всплывающего окна

Метод Ui.alert() имеет перегрузку, позволяющую указать заголовок.

function showAlertWithTitle() {
  const ui = SpreadsheetApp.getUi();
  ui.alert('Важное сообщение', 'Внимание!', ui.ButtonSet.OK);
}

Добавление текста в всплывающее окно

Текст добавляется в качестве первого аргумента в методы alert() и prompt().

Добавление кнопок подтверждения и отмены

Для добавления кнопок используется перечисление Ui.ButtonSet. Доступные варианты: OK, OK_CANCEL, YES_NO, YES_NO_CANCEL.

function showConfirmationDialog() {
  const ui = SpreadsheetApp.getUi();
  const result = ui.alert(
    'Подтверждение', // Заголовок.
    'Вы уверены, что хотите продолжить?', // Текст сообщения.
    ui.ButtonSet.YES_NO);

  // Обработка ответа пользователя.
  if (result == ui.Button.YES) {
    Logger.log('Пользователь нажал кнопку "Да".');
    // Выполняем действие.
  } else {
    Logger.log('Пользователь нажал кнопку "Нет".');
    // Отменяем действие.
  }
}

Обработка нажатий кнопок

Результат ui.alert() (если указан ButtonSet) возвращает объект Ui.Button, представляющий кнопку, которую нажал пользователь. Сравниваем результат с константами Ui.Button.YES, Ui.Button.NO, Ui.Button.OK, Ui.Button.CANCEL, Ui.Button.CLOSE.

Продвинутые техники: использование HTML Service для создания сложных всплывающих окон

Введение в HTML Service

HTML Service позволяет создавать пользовательские интерфейсы с использованием HTML, CSS и JavaScript. Это дает гораздо больше гибкости, чем стандартные методы Ui.alert() и Ui.prompt(). HTML Service позволяет создавать формы, таблицы, интерактивные элементы и многое другое.

Создание HTML-шаблона для всплывающего окна

Создайте новый HTML-файл в редакторе скриптов (Файл > Новый > HTML-файл). Напишите HTML-код для вашего всплывающего окна. Например:

<!DOCTYPE html>
<html>
<head>
  <base target="_top">
</head>
<body>
  <h1>Привет!</h1>
  <p>Это всплывающее окно, созданное с помощью HTML Service.</p>
  <button onclick="google.script.run.closeDialog()">Закрыть</button>
</body>
</html>

Передача данных из Google Apps Script в HTML

Используйте шаблонные строки и метод HtmlService.createHtmlOutputFromFile() для передачи данных.

function showHtmlDialog() {
  const htmlOutput = HtmlService
    .createHtmlOutputFromFile('index') // 'index' - имя HTML-файла.
    .setTitle('Мое всплывающее окно')
    .setWidth(300);
  SpreadsheetApp.getUi()
      .showModalDialog(htmlOutput, 'Мое всплывающее окно');
}

Обработка пользовательского ввода из HTML в Google Apps Script

Используйте google.script.run в HTML для вызова функций Apps Script. Например, кнопка «Закрыть» в HTML вызывает функцию closeDialog() в Apps Script.

function closeDialog() {
  SpreadsheetApp.getUi().close();
}

Примеры сложных всплывающих окон (формы, таблицы и т.д.)

• Форма для сбора данных: Создайте HTML-форму с полями ввода и кнопкой отправки. JavaScript в HTML должен собирать данные из полей и отправлять их в Apps Script с помощью google.script.run. Apps Script может обрабатывать данные и, например, записывать их в таблицу Google Sheets.
• Отображение таблицы: Apps Script может получить данные из таблицы Google Sheets и передать их в HTML. HTML может использовать JavaScript для динамического создания таблицы и отображения данных во всплывающем окне.

Рекомендации и лучшие практики

Советы по дизайну всплывающих окон для удобства пользователей

• Простота: Не перегружайте всплывающее окно лишней информацией.
• Ясность: Используйте понятные заголовки и текст.
• Контраст: Убедитесь, что текст хорошо виден на фоне.
• Уместность: Используйте всплывающие окна только тогда, когда это действительно необходимо.
• Размер: Не делайте всплывающие окна слишком большими, чтобы они не закрывали слишком много экрана.

Улучшение производительности при работе с HTML Service

• Кэширование: Кэшируйте HTML-шаблоны, чтобы избежать повторной загрузки при каждом отображении всплывающего окна.
• Минимизация кода: Уменьшите размер HTML, CSS и JavaScript кода.
• Оптимизация изображений: Оптимизируйте изображения для уменьшения размера файла.

Обработка ошибок и отладка всплывающих окон

• Логирование: Используйте Logger.log() для записи информации в журнал выполнения скрипта.
• Отладка в браузере: Используйте инструменты разработчика браузера для отладки HTML, CSS и JavaScript кода.
• Обработка исключений: Используйте try...catch блоки для обработки ошибок.

Альтернативные подходы к отображению информации (Sidebars, Dialogs)

• Sidebars (Боковые панели): Подходят для отображения дополнительной информации или инструментов, которые не требуют немедленного внимания пользователя. Они остаются видимыми на экране вместе с основным контентом.
• Dialogs (Диалоговые окна): Аналогичны всплывающим окнам, но часто используются для более сложных взаимодействий, таких как редактирование данных или настройка параметров. Модальные диалоги блокируют основное окно до закрытия.