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

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

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

Диалоги

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

Надстройки диалоговых окон создаются так же, как и пользовательские диалоговые окна Apps Script; общая рекомендуемая процедура следующая:

  1. Создайте файл проекта скрипта, определяющий структуру HTML, CSS и поведение JavaScript на стороне клиента для вашего диалогового окна. При определении диалогового окна следуйте рекомендациям по стилю надстройки «Редактор» .
  2. В серверном коде, где вы хотите открыть диалоговое окно, вызовите метод HtmlService.createHtmlOutputFromFile(filename) для создания объекта HtmlOutput , представляющего диалоговое окно. Кроме того, если вы используете шаблонный HTML, можно вызвать HtmlService.createTemplateFromFile(filename) для генерации шаблона, а затем HtmlTemplate.evaluate() для преобразования его в объект HtmlOutput .
  3. Вызовите Ui.showModalDialog(htmlOutput, dialogTitle) , чтобы отобразить диалоговое окно с помощью этого HtmlOutput .

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

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

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

Полную информацию см. в разделе Диалоги открытия файлов .

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

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

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

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

  3. Вызовите Ui.showSidebar(htmlOutput) для отображения боковой панели с использованием этого HtmlOutput .

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