Google Workspace 加载项会在宿主应用的界面侧边栏中显示信息和用户控件。插件由一个主要识别工具栏以及一个或多个卡片组成。
每张卡片都代表插件界面的特定“页面”,而导航到新卡片通常只需创建该卡片并将其推送到内部卡片堆栈即可。您可以定义卡片之间的导航流程,以实现丰富的互动体验。
卡片可以是非情境化的,也可以是情境化的。当宿主应用处于特定情境时,系统会向用户显示情境卡片。例如,打开 Gmail 邮件或日历活动时。非情境化卡片(例如首页)会在宿主应用的特定情境之外呈现给用户。例如,当用户查看其 Gmail 收件箱、云端硬盘主文件夹或日历时。
使用 Apps 脚本构建的 Google Workspace 插件使用卡片服务通过卡片创建用户界面。以其他语言构建的插件必须返回格式正确的 JSON,才能使界面呈现为卡片。
每张卡片都包含一个标题和一个或多个卡片部分。每个部分都由一组微件组成。微件可向用户显示信息或提供按钮等互动控件。
基于卡片的界面具有以下优势:
- 无需具备 HTML 或 CSS 知识即可创建基于卡片的界面。
- 卡片和 widget 会自动设置样式,以便与它们扩展的 Google Workspace 应用搭配使用。
基于卡片的界面可在桌面设备和移动设备上运行,但您只需定义一次界面。
创建卡片式界面
在构建基于卡片的插件时,请务必了解某些概念和设计模式。以下指南提供了构建有效的卡片式插件所需的信息:
- 卡片
- 首页
- widget
- 操作
- 事件对象
- 构建卡片
- 构建互动卡片
- 在卡片之间导航
- 使用通用操作
- 为文本输入添加自动补全功能
- 访问用户语言区域和时区
- 连接到非 Google 服务
- Style guide
- 最佳做法
在创建卡片和实现界面行为时,请参考这些页面。您可能还会发现以下其他示例有助于您在实现插件时进行参考:
Google Workspace 插件“Cats”快速入门指南
此插件示例展示了一个简单的 Google Workspace 插件界面,其中包含多个页面和首页。
-
此插件示例展示了一个 Google Workspace 插件,可让用户在 Google 文档、Google 表格和 Google 幻灯片中翻译文本。
Google Workspace 插件:“Teams List”
此插件示例展示了一个更复杂的 Google Workspace 插件示例,该示例显示了有关 Gmail 邮件收件人、云端硬盘文件编辑者或日历活动参与者的用户信息。由于此插件使用 Directory API 检索用户信息,因此只能在网域内使用。