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

Для большинства дополнений к редактору основными пользовательскими интерфейсами являются диалоговые окна и боковые панели. Оба элемента полностью настраиваются с помощью стандартного 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 Диска. Вы можете добавить диалог открытия файла в свое дополнение без необходимости его разработки, но это потребует дополнительной настройки. Вам также потребуется доступ к проекту 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() и связанные с ним функции обработчика. Для получения более подробной информации см. раздел «Взаимодействие клиента с сервером» .