Диалоги и боковые панели для дополнения «Редактор»

Для большинства дополнений к редактору основными пользовательскими интерфейсами являются диалоговые окна и боковые панели. Оба элемента полностью настраиваются с помощью стандартного HTML и CSS, и вы можете использовать модель взаимодействия клиент-сервер Google Apps Script для запуска функций Apps Script при взаимодействии пользователя с боковой панелью или диалоговым окном. Ваше дополнение может определять несколько боковых панелей и диалоговых окон, но отображать можно только одно из них одновременно.

Если вы хотите запретить пользователю взаимодействовать с редактором до тех пор, пока он не сделает выбор в интерфейсе дополнения, используйте диалоговое окно; в противном случае используйте боковую панель.

Диалоги

Диалоговые окна — это панели окон, которые перекрывают основное содержимое редактора. Диалоговые окна Apps Script являются модальными; пока они открыты, пользователь не может взаимодействовать с другими элементами интерфейса редактора. Вы можете настроить содержимое и размер диалоговых окон.

Дополнительные диалоговые окна создаются так же, как и пользовательские диалоговые окна Apps Script. Общая процедура такова:

  1. Создайте файл проекта скрипта, определяющий HTML-структуру вашего диалогового окна, CSS и поведение JavaScript на стороне клиента. Обратитесь к рекомендациям по стилю дополнения Editor .
  2. В серверном коде, где вы хотите открыть диалоговое окно, вызовите метод HtmlService.createHtmlOutputFromFile , чтобы создать объект HtmlOutput , представляющий диалоговое окно. В качестве альтернативы, если вы используете шаблонный HTML, вы можете вызвать метод HtmlService.createTemplateFromFile для генерации шаблона, а затем HtmlTemplate.evaluate для преобразования его в объект HtmlOutput .
  3. Вызовите метод Ui.showModalDialog , чтобы отобразить диалоговое окно, используя указанный HtmlOutput .

Диалоговые окна не приостанавливают выполнение серверного скрипта во время их открытия. Клиентский JavaScript может выполнять асинхронные вызовы к серверу, используя google.script.run и связанные с ним функции обработчика. Для получения более подробной информации см. раздел «Взаимодействие клиента с сервером» .

Диалоги открытия файлов

Диалоги открытия файлов — это готовые диалоги, позволяющие пользователям выбирать файлы из своего Google Диска. Вы можете добавить диалог открытия файла в свое дополнение без необходимости его разработки, но это потребует дополнительной настройки. Вам также потребуется доступ к проекту Cloud Platform дополнения, чтобы включить API Google Picker.

Для получения дополнительной информации см. Диалоговые окна открытия файлов .

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

Дополнительные боковые панели создаются так же, как и пользовательские боковые панели Apps Script. Общая процедура такова:

  1. Создайте файл проекта скрипта, определяющий HTML-структуру боковой панели, CSS и поведение JavaScript на стороне клиента. При определении боковой панели руководствуйтесь рекомендациями по стилю дополнения Editor .

  2. В серверном коде, где вы хотите открыть боковую панель, вызовите метод HtmlService.createHtmlOutputFromFile , чтобы создать объект HtmlOutput , представляющий боковую панель. В качестве альтернативы, если вы используете шаблонный HTML, вы можете вызвать HtmlService.createTemplateFromFile для генерации шаблона, а затем HtmlTemplate.evaluate для преобразования его в объект HtmlOutput .

    Боковые панели дополнений имеют фиксированную ширину в 300 пикселей, которую нельзя изменить с помощью вызова HtmlOutput.setWidth .

  3. Вызовите метод Ui.showSidebar , чтобы отобразить боковую панель, используя указанный HtmlOutput .

Боковые панели не приостанавливают выполнение серверного скрипта, пока они открыты. Клиентский JavaScript может выполнять асинхронные вызовы к серверу, используя google.script.run и связанные с ним функции обработчика. Для получения более подробной информации см. раздел «Взаимодействие клиента с сервером» .