Что такое Google Apps Script и зачем нужны кнопки
Google Apps Script (GAS) – это облачный язык сценариев, позволяющий автоматизировать задачи и расширять функциональность приложений Google Workspace (Sheets, Docs, Forms и т.д.). Кнопки в GAS значительно улучшают пользовательский интерфейс, позволяя запускать скрипты непосредственно из интерфейса приложения, упрощая взаимодействие и автоматизируя рутинные операции. Например, можно создать кнопку для автоматической выгрузки данных в Google Analytics, формирования отчетов по рекламным кампаниям или массовой отправки электронных писем.
Обзор различных способов добавления кнопок (UI Service, HTML Service)
Существует два основных способа добавления кнопок в Google Apps Script:
UI Service: Простой и быстрый способ добавления кнопок в меню Google Sheets, Docs и Forms. Подходит для простых сценариев, где требуется минимальная настройка внешнего вида.
HTML Service: Предоставляет большую гибкость в настройке внешнего вида и функциональности кнопок. Позволяет создавать HTML-формы с кнопками и размещать их в диалоговых окнах. Подходит для более сложных сценариев, требующих пользовательского интерфейса.
Предварительные требования: доступ к Google Sheets/Docs/Forms и редактору скриптов
Для работы с Google Apps Script необходимо иметь доступ к одному из приложений Google Workspace (Sheets, Docs, Forms) и редактору скриптов. Редактор скриптов можно открыть из приложения, выбрав Инструменты -> Редактор скриптов.
Создание кнопки с использованием UI Service (для Google Sheets)
Открытие редактора скриптов из Google Sheets
Откройте Google Sheets и перейдите в Инструменты -> Редактор скриптов.
Написание кода для создания кнопки в меню
В редакторе скриптов необходимо написать код, который добавит кнопку в меню Google Sheets. Код должен использовать UI Service для создания пользовательского меню и добавления в него кнопки.
Пример кода: добавление кнопки ‘Запустить скрипт’ в пользовательское меню
/**
* @OnlyCurrentDoc
*/
/**
* Adds a custom menu to the active spreadsheet.
*/
function onOpen(): void {
const ui = SpreadsheetApp.getUi();
ui.createMenu('Пользовательское меню')
.addItem('Запустить скрипт', 'runMyScript')
.addToUi();
}
/**
* This function is executed when the spreadsheet is opened.
*/
function runMyScript(): void {
// Здесь будет код, который выполняется при нажатии на кнопку
SpreadsheetApp.getUi()
.alert('Скрипт запущен!');
}Реализация функции, вызываемой при нажатии на кнопку
В примере выше функция runMyScript() вызывается при нажатии на кнопку ‘Запустить скрипт’. В этой функции необходимо реализовать логику, которую должна выполнять кнопка. Например, можно добавить код для анализа данных в таблице, отправки электронных писем или обновления внешних систем.
Запуск скрипта для создания меню и проверка работы кнопки
Сохраните скрипт и обновите страницу Google Sheets. В меню должна появиться вкладка ‘Пользовательское меню’ с кнопкой ‘Запустить скрипт’. При нажатии на кнопку должна выполниться функция runMyScript() и отобразиться уведомление.
Создание кнопки с использованием HTML Service (более гибкий подход)
Создание HTML-формы с кнопкой
Для создания кнопки с использованием HTML Service необходимо создать HTML-форму с кнопкой. Форма может содержать любые элементы HTML, включая текстовые поля, списки и другие элементы управления.
Размещение HTML-формы в диалоговом окне Google Sheets/Docs/Forms
HTML-форму необходимо разместить в диалоговом окне Google Sheets, Docs или Forms. Для этого используется функция HtmlService.createHtmlOutput() для создания HTML-контента и функция SpreadsheetApp.getUi().showModalDialog() для отображения диалогового окна.
Написание Google Apps Script кода для отображения формы
Необходимо написать Google Apps Script код, который будет отображать HTML-форму в диалоговом окне.
Пример кода: HTML-форма с кнопкой и обработчик события нажатия
Code.gs:
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(html, 'Диалоговое окно с кнопкой');
}
function processForm(formObject) {
Logger.log(formObject);
SpreadsheetApp.getUi().alert('Получено: ' + JSON.stringify(formObject));
return "Данные успешно обработаны!";
}index.html:
function submitForm() {
var formData = {
name: document.getElementById("name").value
};
google.script.run
.withSuccessHandler(updateStatus)
.processForm(formData);
}
function updateStatus(message) {
document.getElementById("status").innerText = message;
}
Передача данных из HTML-формы в Google Apps Script
Данные из HTML-формы можно передать в Google Apps Script с помощью функции google.script.run. В примере выше функция submitForm() передает данные из текстового поля name в функцию processForm() в Google Apps Script.
Продвинутые техники и возможности
Настройка внешнего вида кнопки (стили CSS)
Внешний вид кнопки, созданной с помощью HTML Service, можно настроить с помощью стилей CSS. Можно изменить цвет, размер, шрифт и другие параметры кнопки. CSS можно добавить непосредственно в HTML-файл или в отдельный файл стилей.
Динамическое изменение текста кнопки
Текст кнопки можно динамически изменять с помощью JavaScript. Например, можно изменить текст кнопки в зависимости от состояния приложения или результата выполнения скрипта.
Добавление иконок к кнопкам
К кнопкам можно добавлять иконки для улучшения визуального представления. Иконки можно использовать из различных источников, например, из библиотеки Material Icons.
Обработка ошибок и отладка
При работе с Google Apps Script необходимо обрабатывать ошибки и отлаживать код. Для отладки можно использовать Logger.log() для вывода информации в журнал выполнения скрипта.
Заключение
Краткое повторение ключевых моментов
В этой статье мы рассмотрели два способа создания кнопок в Google Apps Script: с использованием UI Service и HTML Service. UI Service подходит для простых сценариев, а HTML Service предоставляет большую гибкость в настройке внешнего вида и функциональности.
Преимущества использования кнопок в Google Apps Script
Использование кнопок в Google Apps Script позволяет автоматизировать задачи, улучшить пользовательский интерфейс и упростить взаимодействие с приложениями Google Workspace. Это значительно повышает эффективность работы и экономит время.