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

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

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

Диалоги

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

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

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

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

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

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

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

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

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

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

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

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

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