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

Для большинства надстроек редактора диалоговые окна и боковые панели являются основными пользовательскими интерфейсами надстроек. Оба приложения полностью настраиваются с использованием стандартных 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 Диске. Вы можете добавить диалог открытия файла в надстройку без необходимости его разработки, но для этого потребуется дополнительная настройка. Вам также потребуется доступ к проекту Cloud Platform надстройки, чтобы включить API Google Picker.

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

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

Дополнительные боковые панели создаются так же, как пользовательские боковые панели 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() и связанные функции-обработчики. Дополнительные сведения см. в разделе Связь клиент-сервер .