Для большинства надстроек Editor диалоговые окна и боковые панели являются основными пользовательскими интерфейсами надстроек. Оба полностью настраиваются с помощью стандартных HTML и CSS, и вы можете использовать клиент-серверную модель связи Apps Script для запуска функций Apps Script, когда пользователь взаимодействует с боковой панелью или диалогом. Ваша надстройка может определять несколько боковых панелей и диалогов, но надстройка может отображать только одну за раз.
Если вы хотите запретить пользователю взаимодействовать с редактором до тех пор, пока он не сделает какой-либо выбор в интерфейсе дополнения, используйте диалоговое окно; в противном случае используйте боковую панель.
Диалоги
Диалоги — это панели окон, которые накладываются на основное содержимое редактора. Диалоги Apps Script являются модальными; пока они открыты, пользователь не может взаимодействовать с другими элементами интерфейса редактора. Вы можете настраивать содержимое и размер диалогов.
Надстройки диалоговых окон создаются так же, как и пользовательские диалоговые окна Apps Script; общая рекомендуемая процедура следующая:
- Создайте файл проекта скрипта, который определяет структуру HTML вашего диалога, CSS и поведение JavaScript на стороне клиента. При определении диалога обратитесь к рекомендациям по стилю надстройки Editor .
- В коде на стороне сервера, где вы хотите открыть диалог, вызовите
HtmlService.createHtmlOutputFromFile(filename)
для создания объектаHtmlOutput
, представляющего диалог. В качестве альтернативы, если вы используете шаблонный HTML, вы можете вызватьHtmlService.createTemplateFromFile(filename)
для генерации шаблона, а затемHtmlTemplate.evaluate()
для преобразования его в объектHtmlOutput
. - Вызовите
Ui.showModalDialog(htmlOutput, dialogTitle)
для отображения диалогового окна с использованием этогоHtmlOutput
.
Диалоги не приостанавливают серверный скрипт, пока они открыты. Клиентский JavaScript может выполнять асинхронные вызовы на серверную сторону с помощью google.script.run()
и связанных функций обработчика. Для получения более подробной информации см. раздел Клиент-серверная связь .
Диалоги открытия файлов
Диалоги открытия файлов — это предварительно созданные диалоги, которые позволяют вашим пользователям выбирать файлы из Google Drive. Вы можете добавить диалог открытия файлов в свое дополнение без необходимости его разработки, но это потребует некоторой дополнительной настройки. Вам также потребуется доступ к проекту Cloud Platform дополнения, чтобы включить API Google Picker.
Подробную информацию см. в разделе Диалоги открытия файлов .
Боковые панели
Боковые панели — это панели, которые появляются в правой части интерфейса редактора и являются наиболее распространенным типом интерфейса дополнений. В отличие от диалогов, вы можете продолжать взаимодействовать с другими элементами интерфейса редактора, пока открыта боковая панель. Боковые панели имеют фиксированную ширину, но вы можете настраивать их содержимое.
Дополнительные боковые панели создаются так же, как и пользовательские боковые панели Apps Script; общая рекомендуемая процедура следующая:
- Создайте файл проекта скрипта, который определяет структуру HTML вашей боковой панели, CSS и поведение JavaScript на стороне клиента. При определении боковой панели обратитесь к рекомендациям по стилю надстройки Editor .
В коде на стороне сервера, где вы хотите, чтобы открывалась боковая панель, вызовите
HtmlService.createHtmlOutputFromFile(filename)
для создания объектаHtmlOutput
, представляющего боковую панель. В качестве альтернативы, если вы используете шаблонный HTML, вы можете вызватьHtmlService.createTemplateFromFile(filename)
для генерации шаблона, а затемHtmlTemplate.evaluate()
для преобразования его в объектHtmlOutput
.Вызовите
Ui.showSidebar(htmlOutput)
для отображения боковой панели с использованием этогоHtmlOutput
.
Боковые панели не приостанавливают серверный скрипт, пока они открыты. Клиентский JavaScript может выполнять асинхронные вызовы на серверную сторону с помощью google.script.run()
и связанных функций-обработчиков. Для получения более подробной информации см. раздел Клиент-серверное взаимодействие .