Карточные интерфейсы

Пример дополнительной карты

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

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

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

Дополнения Google Workspace, встроенные в Apps Script, используют службу карточек для создания пользовательских интерфейсов на основе карточек . Дополнения, созданные на других языках, должны возвращать JSON в правильном формате, чтобы интерфейс отображался в виде карточек.

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

Интерфейсы на основе карт имеют следующие преимущества:

  • Для создания интерфейсов на основе карточек не требуется никаких знаний HTML или CSS.
  • Карточки и виджеты автоматически стилизуются для совместимости с приложениями Google Workspace, которые они расширяют.
  • Интерфейсы на основе карт работают как на настольных, так и на мобильных устройствах, но вам нужно определить интерфейс только один раз.

Создание карточных интерфейсов

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

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

  • Краткое руководство над дополнением Google Workspace «Кошки»

    В этом примере надстройки показан простой пользовательский интерфейс надстройки Google Workspace с несколькими страницами и домашними страницами.

  • Дополнение Google Workspace: «Переводчик»

    В этом примере надстройки показана надстройка Google Workspace, которая позволяет пользователям переводить текст из Документов, Таблиц и Презентаций.

  • Дополнение Google Workspace: «Список команд»

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