Google Workspace 外掛程式會在主機應用程式 UI 的側欄中顯示資訊和使用者控制項。外掛程式包含一個主要識別工具列,以及一或多張「資訊卡」。
每張資訊卡都代表外掛程式 UI 的特定「頁面」,而前往新資訊卡通常只是建立卡片並推送至內部卡片堆疊的一大重點。您可以定義資訊卡之間的導覽流程,藉此提供豐富的互動體驗。
資訊卡可以是非內容比對或內容比對資訊卡。當主機應用程式在特定情境下,使用者就會看到內容相關資訊卡。例如開啟 Gmail 郵件或日曆活動。在主機的特定情境之外,使用者會看到非內容資訊卡 (例如首頁)。例如,使用者正在查看自己的 Gmail 收件匣、主要雲端硬碟資料夾或日曆時。
在 Apps Script 內建的 Google Workspace 外掛程式會使用資訊卡服務,透過資訊卡建立使用者介面。使用其他語言建構的外掛程式必須傳回正確格式的 JSON,介面才能算繪為資訊卡。
每張資訊卡都包含標題和一或多個資訊卡區段。每個部分都是由一組小工具組成。小工具可向使用者顯示資訊,或提供按鈕等互動控制項。
卡片式介面具有以下優點:
- 無須瞭解 HTML 或 CSS,即可建立卡片式介面。
- 資訊卡和小工具會自動設定樣式,可與自己擴充的 Google Workspace 應用程式搭配使用。
卡片式介面適用於電腦和行動裝置,但您只需要定義一次介面。
建立卡片式介面
建構卡片式外掛程式時,請務必瞭解特定的概念和設計模式。以下指南提供建構有效卡片外掛程式所需的資訊:
- 資訊卡
- 首頁
- 小工具
- 動作
- 事件物件
- 建構卡片
- 建構互動式資訊卡
- 瀏覽不同資訊卡
- 使用通用動作
- 在文字輸入中加入自動完成功能
- 存取使用者語言代碼和時區
- 連線至非 Google 服務
- 樣式指南
- 最佳做法
建立資訊卡及實作 UI 行為時,請參考這些網頁。實作外掛程式時,我們也建議您參考下列額外範例:
Google Workspace 外掛程式「Cats」快速入門導覽課程
這個外掛程式範例顯示了簡單的 Google Workspace 外掛程式 UI,內含多個頁面和首頁。
-
這個外掛程式範例顯示的是 Google Workspace 外掛程式,讓使用者可在 Google 文件、試算表和簡報中翻譯文字。
-
這個外掛程式範例是較複雜的 Google Workspace 外掛程式範例,可顯示 Gmail 郵件收件者、雲端硬碟檔案編輯者或日曆活動參與者的相關資訊。這個外掛程式只能在網域中使用,因為這項工具使用 Directory API 擷取使用者資訊。