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

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

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

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

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

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

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

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

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

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

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

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

  • Быстрый старт надстройки Google Workspace "Кошки"

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

  • Дополнение Google Workspace: "Перевод"

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

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

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