資訊卡

以資訊卡為基礎的外掛程式會以窗格形式顯示在側欄中 (或在行動裝置上,透過選單開啟另一個活動視窗)。外掛程式的頂端工具列會識別外掛程式,並顯示資訊卡,也就是外掛程式 UI 的「頁面」。Apps Script 會使用 Card 物件,在專案程式碼中表示資訊卡。

資訊卡結構

外掛程式卡片範例

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

  • 資訊卡標頭。這會識別卡片。當中包含標題文字,並可視需要加入副標題和圖示。
  • 一或多個資訊卡區塊。這是資訊卡 UI 區域的子區隔。 區段可以選擇性地包含文字區段標題。 資訊卡上的各個部分會以水平線分隔。 如果卡片區塊特別大,系統會自動將其顯示為可收合的區塊,使用者可視需要展開或收合。一張資訊卡最多只能有 100 個資訊卡區段,且區段數量越少,成效越好。

  • 每個卡片區段都包含一或多個 UI 小工具。小工具可為使用者提供資訊或互動式控制項。資訊卡和資訊卡區塊是「結構性」小工具,因此無法新增至資訊卡區塊。一個資訊卡區段最多只能有 100 個小工具,且應盡可能簡化,才能發揮最佳效能。

設計資訊卡時,應以特定使用者活動或資料集為中心。舉例來說,如果 Google Workspace 外掛程式會顯示從 Google 試算表擷取的資料,則可能會為每個擷取資料的試算表顯示不同的資訊卡。

使用多張卡片

外掛程式卡片範例

加購內容通常包含多張卡片。您可以將這些資訊卡設定為簡單清單,用於基本導覽 (含多張資訊卡),也可以設定更複雜的導覽方法,控管使用者在資訊卡間移動的方式。

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

設計外掛程式時,最好限制一次顯示的資訊卡數量,因為資訊卡必須共用有限的螢幕空間。此外,也請盡量避免卡片過於複雜