資訊卡

以資訊卡為基礎的附加元件會以側欄中的窗格形式顯示 (在行動裝置上,則會透過選單顯示另一個活動視窗)。附加元件會提供頂端工具列,用於識別附加元件並顯示資訊卡,這基本上是附加元件 UI 的「頁面」。Apps Script 會使用 Card 物件,在專案程式碼中表示資訊卡。

資訊卡剖析

外掛程式資訊卡範例

資訊卡是一組您設計的 UI 元素。資訊卡由下列部分組成:

  • 資訊卡標頭。這可用於識別資訊卡。包含標題文字,並可視需要加上副標題和圖示。
  • 一或多個資訊卡版面。這些是資訊卡 UI 區域的子區域。區段可視需要加上文字區段標題。資訊卡的各個部分會以水平線分隔。如果資訊卡部分特別大,系統會自動將其轉譯為可摺疊的部分,使用者可視需要展開或摺疊。資訊卡最多可包含 100 個資訊卡版面,但為了提高成效,建議只加入少數版面。

  • 每個資訊卡片部分都包含一或多個 UI 小工具。小工具可為使用者提供資訊或互動式控制項。資訊卡和資訊卡版面都是結構性小工具,因此無法新增至資訊卡版面。每個資訊卡片段最多可包含 100 個小工具,且應盡可能簡單,以獲得最佳效能。

您應根據特定使用者活動或資料集設計資訊卡。舉例來說,如果 Google Workspace 外掛程式會顯示從 Google 試算表擷取的資料,則每個擷取資料的試算表可能都有個別的資訊卡。

使用多張資訊卡

外掛程式資訊卡範例

外掛程式通常包含多張資訊卡。您可以將這些資訊卡設為簡單清單,用於多個資訊卡的基本導覽,也可以設定更複雜的導覽方法,用於控制使用者在資訊卡之間移動的方式。

如果外掛程式使用基本導覽功能,當外掛程式首次開啟時,其擴充的 Google Workspace 應用程式會建構資訊卡標題清單,並向使用者顯示。點選資訊卡標題即可開啟該資訊卡。系統也會提供返回箭頭,讓您返回資訊卡標題清單。您不需要為標頭和返回箭頭功能編寫程式碼,只要在外掛程式中定義資訊卡,系統就會自動完成這項工作。

設計外掛程式時,最好限制一次顯示的資訊卡數量,因為資訊卡必須共用有限的螢幕空間。另外,請避免在資訊卡中加入不必要的複雜元素