Создание интерфейсов редактора Google

С помощью дополнений Google Workspace вы можете создавать настраиваемые интерфейсы внутри редакторов, включая Google Docs, Sheets и Slides. Это позволяет предоставлять пользователю необходимую информацию, автоматизировать задачи и подключать сторонние системы к редакторам.

Доступ к пользовательскому интерфейсу дополнения

Вы можете открыть надстройку Google Workspace в редакторе, если ее значок отображается на боковой панели быстрого доступа Google Workspace в правой части пользовательского интерфейса документов, таблиц и презентаций.

Дополнение Google Workspace может отображать следующие интерфейсы:

  • Интерфейсы домашней страницы : Если манифест дополнения включает триггер EDITOR_NAME .homepageTrigger для редактора, в котором пользователь открывает дополнение, дополнение создает и возвращает карточку домашней страницы, специально предназначенную для этого редактора. Если манифест дополнения не включает триггер EDITOR_NAME .homepageTrigger для редактора, в котором пользователь его открывает, вместо этого отображается стандартная карточка домашней страницы.

  • Интерфейсы REST API : Если дополнение использует REST API, вы можете добавить триггеры, запрашивающие доступ к документу для каждого файла с использованием области видимости drive.file . После получения разрешения запускается другой триггер с именем EDITOR_NAME .onFileScopeGrantedTrigger , который отображает интерфейс, специфичный для данного файла.

  • Интерфейсы предварительного просмотра ссылок : Если ваше дополнение интегрировано со сторонним сервисом, вы можете создавать карточки, которые отображают предварительный просмотр контента по URL-адресам вашего сервиса.

Разработка интерфейсов для дополнений редактора.

Создайте интерфейсы надстроек для редакторов, выполнив следующие шаги:

  1. Добавьте соответствующие поля addOns.common , addOns.docs , addOns.sheets и addOns.slides в манифест проекта скрипта дополнения.
  2. Добавьте все необходимые области действия редактора в манифест вашего скриптового проекта.
  3. Если вы предоставляете домашнюю страницу, специфичную для редактора , реализуйте функцию EDITOR_NAME .homepageTrigger для создания интерфейса. В противном случае используйте интерфейс common.homepageTrigger для создания общей домашней страницы для ваших приложений-хозяев.
  4. Если вы используете REST API, реализуйте поток авторизации в рамках области действия drive.file и функцию запуска EDITOR_NAME .onFileScopeGrantedTrigger для отображения интерфейса, специфичного для открытого файла. Для получения дополнительной информации см. раздел «Интерфейсы REST API» .
  5. Если вы настраиваете предварительный просмотр ссылок из стороннего сервиса, реализуйте поток авторизации https://www.googleapis.com/auth/workspace.linkpreview и функцию linkPreviewTriggers . Дополнительную информацию см. в разделе «Интерфейсы предварительного просмотра ссылок» .
  6. Реализуйте соответствующие функции обратного вызова, необходимые для реагирования на действия пользователя в пользовательском интерфейсе, такие как нажатия кнопок.

Главные страницы редактора

В скриптовом проекте вашего дополнения необходимо указать функцию-триггер для главной страницы, которая будет создавать и возвращать одну Card или массив объектов Card , составляющих главную страницу дополнения.

Функция запуска главной страницы получает в качестве параметра объект события , содержащий такую ​​информацию, как платформа клиента. Вы можете использовать данные объекта события для настройки построения главной страницы.

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

Отобразить общую домашнюю страницу

Чтобы отобразить общую домашнюю страницу вашего дополнения в редакторе, добавьте соответствующие поля редактора, такие как addOns.docs , addOns.sheets или addOns.slides , в манифест дополнения.

В следующем примере показана часть манифеста надстройки Google Workspace, относящаяся к addons . Дополнение расширяет функциональность Docs, Sheets и Slides и отображает общую домашнюю страницу в каждом из приложений-хостов.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "sheets": {},
    "slides": {}
  }
}

Отобразить домашнюю страницу, предназначенную специально для редактора.

Чтобы отобразить домашнюю страницу, предназначенную специально для конкретного редактора, добавьте параметр EDITOR_NAME .homepageTrigger в манифест дополнения.

В следующем примере показана часть манифеста надстройки Google Workspace, относящаяся к addons . Дополнение включено для Docs, Sheets и Slides. Оно отображает общую домашнюю страницу в Docs и Slides, а также уникальную домашнюю страницу в Sheets. Функция обратного вызова onSheetsHomepage формирует карточку домашней страницы, специфичную для Sheets.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "slides": {},
    "sheets": {
     "homepageTrigger": {
       "runFunction": "onSheetsHomepage"
     },
  }
}

REST API-интерфейсы

Если ваше дополнение использует REST API, например, API Google Sheets , вы можете использовать функцию onFileScopeGrantedTrigger для отображения нового интерфейса, специфичного для файла, открытого в главном приложении редактора.

Для использования функции onFileScopeGrantedTrigger необходимо включить поток авторизации в области действия drive.file . Чтобы узнать, как запросить доступ к области действия drive.file , см. раздел «Запрос доступа к файлу» в текущем документе .

Когда пользователь предоставляет область действия drive.file , срабатывает триггер EDITOR_NAME .onFileScopeGrantedTrigger.runFunction . При срабатывании триггера выполняется контекстная функция триггера, указанная в поле EDITOR_NAME .onFileScopeGrantedTrigger.runFunction в манифесте дополнения.

Чтобы создать REST API-интерфейс для одного из редакторов, выполните следующие действия. Замените EDITOR_NAME на название используемого вами хост-приложения редактора, например, sheets.onFileScopeGrantedTrigger .

  1. Включите EDITOR_NAME .onFileScopeGrantedTrigger в соответствующий раздел Editor вашего манифеста. Например, если вы хотите создать этот интерфейс в Google Sheets, добавьте триггер в раздел "sheets" .
  2. Реализуйте функцию, указанную в разделе EDITOR_NAME .onFileScopeGrantedTrigger . Эта функция принимает в качестве аргумента объект события и должна возвращать либо один объект Card , либо массив объектов Card .
  3. Как и в случае с любой карточкой, необходимо реализовать функции обратного вызова, используемые для обеспечения интерактивности виджетов в интерфейсе. Например, если вы включаете кнопку в интерфейс, к ней должен быть прикреплен объект Action и реализована функция обратного вызова, которая выполняется при нажатии на кнопку.

В следующем примере показана часть манифеста надстройки Google Workspace, относящаяся к addons . Надстройка использует REST API, поэтому для Google Sheets включен триггер onFileScopeGrantedTrigger . Когда пользователь предоставляет область действия drive.file , функция обратного вызова onFileScopeGrantedSheets создает интерфейс, специфичный для данного файла.

"addOns": {
   "common": {
     "name": "Productivity add-on",
     "logoUrl": "https://www.gstatic.com/images/icons/material/system_gm/1x/work_outline_black_18dp.png",
     "layoutProperties": {
       "primaryColor": "#669df6",
       "secondaryColor": "#ee675c"
     }
   },
   "sheets": {
     "homepageTrigger": {
       "runFunction": "onEditorsHomepage"
     },
     "onFileScopeGrantedTrigger": {
       "runFunction": "onFileScopeGrantedSheets"
     }
   }

Чтобы включить предварительный просмотр ссылок для стороннего сервиса, необходимо настроить предварительный просмотр ссылок в манифесте вашего дополнения и создать функцию, которая возвращает карточку предварительного просмотра. Для сервисов, требующих авторизации пользователя, ваша функция также должна вызывать процесс авторизации.

Инструкции по включению предварительного просмотра ссылок см. в разделе «Предварительный просмотр ссылок с помощью смарт-чипов» .

Объекты событий

Создается объект события, который передается функциям-триггерам, таким как EDITOR_NAME .homepageTrigger или EDITOR_NAME .onFileScopeGrantedTrigger . Функция-триггер использует информацию из объекта события для определения способа создания карточек дополнений или иного управления поведением дополнений.

Полная структура объектов событий описана в разделе «Объекты событий» .

Когда редактор выступает в качестве основного приложения для дополнения, объекты событий включают поля объектов событий Docs , Sheets или Slides , содержащие информацию о клиенте.

Если надстройка не имеет разрешения на доступ к файлу drive.file для текущего пользователя или документа, объект события содержит только поля docs.addonHasFileScopePermission , sheets.addonHasFileScopePermission или slides.addonHasFileScopePermission . Если надстройка имеет такое разрешение, объект события содержит все поля объекта события Editor.

В следующем примере показан объект события Editor, который передается в функцию sheets.onFileScopeGrantedTrigger . Здесь надстройка имеет разрешение на доступ к текущему документу в рамках области действия drive.file :

`        {
          "commonEventObject": { ... },
          "sheets": {
            "addonHasFileScopePermission": true,
            "id":"A_24Q3CDA23112312ED52",
            "title":"How to get started with Sheets"
          },
          ...
        }