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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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