Card

Google Chat 即時通訊訊息或 Google Workspace 外掛程式中顯示的資訊卡介面。

資訊卡支援定義的版面配置、按鈕等互動式 UI 元素,以及圖片等互動式多媒體。使用資訊卡呈現詳細資訊、收集使用者資訊,以及引導使用者採取下一步。

使用資訊卡建構工具設計及預覽資訊卡。

開啟資訊卡建立工具

如要瞭解如何建構資訊卡,請參閱下列說明文件:

注意:每張資訊卡最多可加入 100 個小工具。如果某個區段的小工具導致總數超過 100 個,系統會忽略整個區段和後續所有區段。這項限制適用於 Google Chat 應用程式中的資訊卡訊息和對話方塊,以及 Google Workspace 外掛程式中的資訊卡。

範例:Google Chat 應用程式的資訊卡訊息

聯絡人資訊卡範例

如要在 Google Chat 中建立範例資訊卡訊息,請使用下列 JSON:

{
  "cardsV2": [
    {
      "cardId": "unique-card-id",
      "card": {
        "header": {
           "title": "Sasha",
           "subtitle": "Software Engineer",
           "imageUrl":
           "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
           "imageType": "CIRCLE",
           "imageAltText": "Avatar for Sasha"
         },
         "sections": [
           {
             "header": "Contact Info",
             "collapsible": true,
             "uncollapsibleWidgetsCount": 1,
             "widgets": [
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "EMAIL"
                   },
                   "text": "sasha@example.com"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PERSON"
                   },
                   "text": "<font color=\"#80e27e\">Online</font>"
                 }
               },
               {
                 "decoratedText": {
                   "startIcon": {
                     "knownIcon": "PHONE"
                   },
                   "text": "+1 (555) 555-1234"
                 }
               },
               {
                 "buttonList": {
                   "buttons": [
                     {
                       "text": "Share",
                       "onClick": {
                        "openLink": {
                           "url": "https://example.com/share"
                         }
                       }
                     },
                     {
                       "text": "Edit",
                       "onClick": {
                         "action": {
                           "function": "goToView",
                           "parameters": [
                             {
                               "key": "viewType",
                               "value": "EDIT"
                             }
                           ]
                         }
                       }
                     }
                   ]
                 }
               }
             ]
           }
         ]
       }
    }
  ]
}
JSON 表示法
{
  "header": {
    object (CardHeader)
  },
  "sections": [
    {
      object (Section)
    }
  ],
  "sectionDividerStyle": enum (DividerStyle),
  "cardActions": [
    {
      object (CardAction)
    }
  ],
  "name": string,
  "fixedFooter": {
    object (CardFixedFooter)
  },
  "displayStyle": enum (DisplayStyle),
  "peekCardHeader": {
    object (CardHeader)
  },
  "expressionData": [
    {
      object (ExpressionData)
    }
  ]
}
欄位
header

object (CardHeader)

資訊卡的標頭。標頭通常包含前置圖片和標題。標頭一律會顯示在資訊卡頂端。

sections[]

object (Section)

包含小工具集合。每個區塊都有專屬的選用標題。各區塊會以分隔線區隔。如需 Google Chat 應用程式的範例,請參閱「定義資訊卡的區段」。

sectionDividerStyle

enum (DividerStyle)

標頭、各區段和頁尾之間的分隔線樣式。

cardActions[]

object (CardAction)

資訊卡的動作。動作會新增至資訊卡的工具列選單。最多支援 10 個 CardAction 項目。

適用於 Google Workspace 外掛程式,不適用於 Google Chat 應用程式。

舉例來說,下列 JSON 會建構含有 Settings 和 Send Feedback 選項的資訊卡動作選單:

"cardActions": [
  {
    "actionLabel": "Settings",
    "onClick": {
      "action": {
        "functionName": "goToView",
        "parameters": [
          {
            "key": "viewType",
            "value": "SETTING"
         }
        ],
        "loadIndicator": "LoadIndicator.SPINNER"
      }
    }
  },
  {
    "actionLabel": "Send Feedback",
    "onClick": {
      "openLink": {
        "url": "https://example.com/feedback"
      }
    }
  }
]
name

string

卡片名稱。在資訊卡導覽中做為資訊卡 ID。

適用於 Google Workspace 外掛程式,不適用於 Google Chat 應用程式。

displayStyle

enum (DisplayStyle)

在 Google Workspace 外掛程式中,設定 peekCardHeader 的顯示屬性。

適用於 Google Workspace 外掛程式,不適用於 Google Chat 應用程式。

peekCardHeader

object (CardHeader)

顯示情境內容時,資訊卡預覽標題會做為預留位置,方便使用者在首頁資訊卡和情境資訊卡之間切換。

適用於 Google Workspace 外掛程式,不適用於 Google Chat 應用程式。

expressionData[]

object (ExpressionData)

資訊卡的運算式資料。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

CardHeader

代表資訊卡標頭。如需 Google Chat 應用程式的範例,請參閱「新增標頭」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "title": string,
  "subtitle": string,
  "imageType": enum (ImageType),
  "imageUrl": string,
  "imageAltText": string
}
欄位
title

string

必填。資訊卡標頭的標題。標頭的高度固定:如果同時指定標題和副標題,兩者會各占一行。如果只指定標題,則會佔用兩行。

subtitle

string

資訊卡標頭的副標題。如果指定,則會顯示在 title 下方獨立的一行。

imageType

enum (ImageType)

用於裁剪圖片的形狀。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

imageUrl

string

資訊卡標頭中圖片的 HTTPS 網址。

imageAltText

string

這張圖片的替代文字,用於無障礙功能。

區段

一個區段包含一組小工具,這些小工具會按照指定順序垂直顯示。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "header": string,
  "widgets": [
    {
      object (Widget)
    }
  ],
  "collapsible": boolean,
  "uncollapsibleWidgetsCount": integer,
  "id": string,
  "collapseControl": {
    object (CollapseControl)
  }
}
欄位
header

string

顯示在區段頂端的文字。支援簡單的 HTML 格式文字。如要進一步瞭解如何設定文字格式,請參閱「在 Google Chat 應用程式中設定文字格式」和「在 Google Workspace 外掛程式中設定文字格式」。

widgets[]

object (Widget)

該部分的所有小工具。必須包含至少一個小工具。一張資訊卡的所有區塊最多可支援 100 個小工具。

collapsible

boolean

指出這個部分是否可收合。

可收合區段會隱藏部分或所有小工具,但使用者只要按一下「顯示更多」,即可展開區段並顯示隱藏的小工具。使用者只要按一下「顯示較少」,即可再次隱藏小工具。

如要判斷哪些小工具會隱藏,請指定 uncollapsibleWidgetsCount。

uncollapsibleWidgetsCount

integer

即使收合某個部分,仍會顯示的不可收合小工具數量。

舉例來說,如果某個區段包含五個小工具,且 uncollapsibleWidgetsCount 設為 2,則前兩個小工具一律會顯示,後三個小工具則預設為收合。只有在 collapsible 為 true 時,系統才會考量 uncollapsibleWidgetsCount。

id

string

指派給版面的專屬 ID,用於識別要變更的版面。ID 的字元限制為 64 個字元,格式應為 [a-zA-Z0-9-]+。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

collapseControl

object (CollapseControl)

(選用步驟) 定義區段的展開和收合按鈕。只有在該部分可收合時,才會顯示這個按鈕。如未設定這個欄位,系統會使用預設按鈕。

小工具

每張資訊卡都由小工具組成。

小工具是複合式物件,可代表文字、圖片、按鈕和其他物件類型。

JSON 表示法
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "id": string,
  "visibility": enum (Visibility),
  "eventActions": [
    {
      object (EventAction)
    }
  ],

  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "divider": {
    object (Divider)
  },
  "grid": {
    object (Grid)
  },
  "columns": {
    object (Columns)
  },
  "carousel": {
    object (Carousel)
  },
  "chipList": {
    object (ChipList)
  }
}
欄位
horizontalAlignment

enum (HorizontalAlignment)

指定小工具要靠左、靠右或置中對齊。

id

string

指派給小工具的專屬 ID,用於識別要變更的小工具。ID 的字元限制為 64 個字元,格式應為 [a-zA-Z0-9-]+。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

visibility

enum (Visibility)

指定小工具是否顯示。預設值為 VISIBLE。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

eventActions[]

object (EventAction)

指定可在小工具上執行的事件動作。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

小工具只能包含下列其中一項。你可以使用多個小工具欄位顯示更多項目。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
textParagraph

object (TextParagraph)

顯示文字段落。支援簡單的 HTML 格式文字。如要進一步瞭解如何設定文字格式,請參閱「在 Google Chat 應用程式中設定文字格式」和「在 Google Workspace 外掛程式中設定文字格式」。

舉例來說,下列 JSON 會建立粗體文字:

"textParagraph": {
  "text": "  <b>bold text</b>"
}
image

object (Image)

顯示圖片。

舉例來說,下列 JSON 會建立含有替代文字的圖片:

"image": {
  "imageUrl":
  "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png",
  "altText": "Chat app avatar"
}
decoratedText

object (DecoratedText)

顯示裝飾文字項目。

舉例來說,下列 JSON 會建立顯示電子郵件地址的修飾文字小工具:

"decoratedText": {
  "icon": {
    "knownIcon": "EMAIL"
  },
  "topLabel": "Email Address",
  "text": "sasha@example.com",
  "bottomLabel": "This is a new Email address!",
  "switchControl": {
    "name": "has_send_welcome_email_to_sasha",
    "selected": false,
    "controlType": "CHECKBOX"
  }
}
buttonList

object (ButtonList)

按鈕清單。

舉例來說,下列 JSON 會建立兩個按鈕。第一個是藍色文字按鈕,第二個是可開啟連結的圖片按鈕:

"buttonList": {
  "buttons": [
    {
      "text": "Edit",
      "color": {
        "red": 0,
        "green": 0,
        "blue": 1,
      },
      "disabled": true,
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
textInput

object (TextInput)

顯示可供使用者輸入內容的文字方塊。

舉例來說,下列 JSON 會建立電子郵件地址的文字輸入:

"textInput": {
  "name": "mailing_address",
  "label": "Mailing Address"
}

再舉一個例子,下列 JSON 會為程式設計語言建立文字輸入,並提供靜態建議:

"textInput": {
  "name": "preferred_programing_language",
  "label": "Preferred Language",
  "initialSuggestions": {
    "items": [
      {
        "text": "C++"
      },
      {
        "text": "Java"
      },
      {
        "text": "JavaScript"
      },
      {
        "text": "Python"
      }
    ]
  }
}
selectionInput

object (SelectionInput)

顯示選取控制項,讓使用者選取項目。選取控制項可以是核取方塊、圓形按鈕、切換按鈕或下拉式選單。

舉例來說,下列 JSON 會建立下拉式選單,讓使用者選擇大小:

"selectionInput": {
  "name": "size",
  "label": "Size"
  "type": "DROPDOWN",
  "items": [
    {
      "text": "S",
      "value": "small",
      "selected": false
    },
    {
      "text": "M",
      "value": "medium",
      "selected": true
    },
    {
      "text": "L",
      "value": "large",
      "selected": false
    },
    {
      "text": "XL",
      "value": "extra_large",
      "selected": false
    }
  ]
}
dateTimePicker

object (DateTimePicker)

顯示小工具,讓使用者輸入日期、時間或日期和時間。

舉例來說,下列 JSON 會建立日期時間挑選器,用於預約:

"dateTimePicker": {
  "name": "appointment_time",
  "label": "Book your appointment at:",
  "type": "DATE_AND_TIME",
  "valueMsEpoch": 796435200000
}
divider

object (Divider)

在小工具之間顯示水平分隔線。

舉例來說,下列 JSON 會建立分隔線:

"divider": {
}
grid

object (Grid)

顯示含有項目集合的格線。

格線支援任意數量的欄和項目。列數取決於項目數量上限除以欄數。有 10 個項目和 2 欄的格線會有 5 列。有 11 個項目和 2 欄的格線會有 6 列。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

舉例來說,下列 JSON 會建立含有單一項目的 2 欄格線:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
columns

object (Columns)

最多顯示 2 欄。

如要加入 2 個以上的資料欄,或使用資料列,請使用 Grid 小工具。

舉例來說,下列 JSON 會建立 2 個資料欄,每個資料欄都包含文字段落:

"columns": {
  "columnItems": [
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "First column text paragraph"
          }
        }
      ]
    },
    {
      "horizontalSizeStyle": "FILL_AVAILABLE_SPACE",
      "horizontalAlignment": "CENTER",
      "verticalAlignment": "CENTER",
      "widgets": [
        {
          "textParagraph": {
            "text": "Second column text paragraph"
          }
        }
      ]
    }
  ]
}
carousel

object (Carousel)

包含 CarouselCard 項目的集合,每個項目都包含巢狀小工具。舉例來說,以下是輪轉介面的 JSON 表示法,其中包含兩個輪轉介面資訊卡,每個資訊卡都有一段文字:

{
  "carouselCards": [
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "First text paragraph in the carousel."
          }
        }
      ]
    },
    {
      "widgets": [
        {
          "textParagraph": {
            "text": "Second text paragraph in the carousel."
          }
        }
      ]
    }
  ]
}
chipList

object (ChipList)

方塊清單。

舉例來說,下列 JSON 會建立兩個方塊。第一個是文字方塊,第二個是開啟連結的圖示方塊:

"chipList": {
  "chips": [
    {
      "label": "Edit",
      "disabled": true
    },
    {
      "icon": {
        "knownIcon": "INVITE",
        "altText": "check calendar"
      },
      "onClick": {
        "openLink": {
          "url": "https://example.com/calendar"
        }
      }
    }
  ]
}
互斥欄位結束。

TextParagraph

支援格式設定的文字段落。如需 Google Chat 應用程式的範例,請參閱「新增一段格式化文字」。如要進一步瞭解如何設定文字格式,請參閱「在 Google Chat 應用程式中設定文字格式」和「在 Google Workspace 外掛程式中設定文字格式」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "text": string,
  "maxLines": integer,
  "textSyntax": enum (TextSyntax)
}
欄位
text

string

小工具中顯示的文字。

maxLines

integer

小工具中顯示的文字行數上限。如果文字超過指定的行數上限,多出的內容會隱藏在「顯示更多」按鈕後方。如果文字長度等於或短於指定的行數上限,系統就不會顯示「顯示更多」按鈕。

預設值為 0,表示會顯示所有內容。系統會忽略負值。

textSyntax

enum (TextSyntax)

文字的語法。如未設定,文字會以 HTML 格式顯示。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

TextSyntax

設定文字格式的語法。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

列舉
TEXT_SYNTAX_UNSPECIFIED 如未指定,文字會轉譯為 HTML。
HTML 文字會轉譯為 HTML。這是預設值。
MARKDOWN 文字會以 Markdown 格式顯示。

圖片

由網址指定的圖片,可包含 onClick 動作。如需範例,請參閱「新增圖片」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "imageUrl": string,
  "onClick": {
    object (OnClick)
  },
  "altText": string
}
欄位
imageUrl

string

含有圖片的 HTTPS 網址。

例如:

https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png
onClick

object (OnClick)

使用者點按圖片時,點擊動作會觸發這項動作。

altText

string

這張圖片的替代文字,用於無障礙功能。

DecoratedText

這個小工具會顯示文字,並可選擇加上裝飾,例如在文字上方或下方加上標籤、在文字前方加上圖示、選取小工具,或在文字後方加上按鈕。如需 Google Chat 應用程式範例,請參閱「顯示文字和裝飾文字」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "icon": {
    object (Icon)
  },
  "startIcon": {
    object (Icon)
  },
  "startIconVerticalAlignment": enum (VerticalAlignment),
  "topLabel": string,
  "topLabelText": {
    object (TextParagraph)
  },
  "text": string,
  "contentText": {
    object (TextParagraph)
  },
  "wrapText": boolean,
  "bottomLabel": string,
  "bottomLabelText": {
    object (TextParagraph)
  },
  "onClick": {
    object (OnClick)
  },

  "button": {
    object (Button)
  },
  "switchControl": {
    object (SwitchControl)
  },
  "endIcon": {
    object (Icon)
  }
}
欄位
icon
(deprecated)

object (Icon)

已淘汰,改用 startIcon。

startIcon

object (Icon)

顯示在文字前方的圖示。

startIconVerticalAlignment

enum (VerticalAlignment)

(選用步驟) 起始圖示的垂直對齊方式。如未設定,圖示會垂直置中。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

topLabel

string

顯示在 text 上方的文字。一律截斷。

topLabelText

object (TextParagraph)

TextParagraph 相當於 topLabel。一律截斷。可進行比 topLabel 更複雜的格式設定。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

text

string

必填。主要文字。

支援簡單的格式設定。如要進一步瞭解如何設定文字格式,請參閱「在 Google Chat 應用程式中設定文字格式」和「在 Google Workspace 外掛程式中設定文字格式」。

contentText

object (TextParagraph)

TextParagraph 相當於 text。可進行比 text 更複雜的格式設定。

適用於 Google Chat 應用程式,不適用於 Google Workspace 外掛程式。

wrapText

boolean

文字環繞設定。如果設為 true,文字會換行並顯示在多行中。否則文字會遭到截斷。

僅適用於text,不適用於topLabel和bottomLabel。

bottomLabel

string

顯示在 text 下方的文字。一律換行。

bottomLabelText

object (TextParagraph)

TextParagraph 相當於 bottomLabel。一律換行。可進行比 bottomLabel 更複雜的格式設定。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

onClick

object (OnClick)

當使用者點選 DecoratedText 小工具的任何位置 (包括 text、topLabel、bottomLabel 和圖示),就會觸發這項動作,但點選獨立互動控制項 (button 或 switchControl) 時除外。

顯示在 decoratedText 小工具中文字右側的按鈕、切換鈕、核取方塊或圖片。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
button

object (Button)

使用者可點選按鈕來觸發動作。

switchControl

object (SwitchControl)

使用者可以點選切換鈕小工具,變更其狀態並觸發動作。

endIcon

object (Icon)

文字後方顯示的圖示。

支援內建和自訂圖示。

互斥欄位結束。

VerticalAlignment

代表垂直對齊屬性。

列舉
VERTICAL_ALIGNMENT_UNSPECIFIED 未指定類型,請勿使用。
TOP 靠上對齊。
MIDDLE 對齊中間位置。
BOTTOM 對齊底部位置。

SwitchControl

decoratedText 小工具中的切換式開關或核取方塊。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

僅支援 decoratedText 小工具。

JSON 表示法
{
  "name": string,
  "value": string,
  "selected": boolean,
  "onChangeAction": {
    object (Action)
  },
  "controlType": enum (ControlType)
}
欄位
name

string

在表單輸入事件中,用來識別切換鈕小工具的名稱 (做為 CommonEventObject.form_inputs 中的鍵)。

如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

value

string

選取切換鈕時,CommonEventObject.form_inputs[name].string_inputs 傳回的值 (selected 為 true)。如果 selected 為 true,且未設定 value,則 stringInputs.value 會傳回空字串 ("")。當 selected 為 false 時,stringInputs.value 會省略這個值。

如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

selected

boolean

當 true 時,系統會選取切換鈕,並將其 value 納入 CommonEventObject.form_inputs[name].string_inputs.value。

onChangeAction

object (Action)

切換鈕狀態變更時要執行的動作,例如要執行的函式。

controlType

enum (ControlType)

切換鈕在使用者介面中的顯示方式。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

ControlType

切換鈕在使用者介面中的顯示方式。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
SWITCH 切換式開關。
CHECKBOX 已淘汰,改用 CHECK_BOX。
CHECK_BOX 核取方塊。

TextInput

使用者可在這個欄位輸入文字。支援建議和變更時動作。支援表單提交驗證。如果 Action.all_widgets_are_required 設為 true,或 Action.required_widgets 指定了這個小工具,則必須輸入值才能提交。如需 Google Chat 應用程式範例,請參閱「新增可供使用者輸入文字的欄位」。

Chat 擴充應用程式會接收並處理表單輸入事件期間輸入的文字值。如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

如需向使用者收集未定義或抽象的資料,請使用文字輸入。如要向使用者收集已定義或列舉的資料,請使用 SelectionInput 小工具。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "name": string,
  "label": string,
  "hintText": string,
  "value": string,
  "type": enum (Type),
  "onChangeAction": {
    object (Action)
  },
  "initialSuggestions": {
    object (Suggestions)
  },
  "autoCompleteAction": {
    object (Action)
  },
  "validation": {
    object (Validation)
  },
  "placeholderText": string,

  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
}
欄位
name

string

在表單輸入事件中,用來識別文字輸入的名稱。

如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

label

string

使用者介面中,文字輸入欄位上方顯示的文字。

指定文字,協助使用者輸入應用程式所需的資訊。舉例來說,如果您想詢問某人的姓名,但只需要對方的姓氏,請寫 surname,而不是 name。

如果未指定 hintText,則為必要欄位。否則為選填。

hintText

string

文字輸入欄位下方顯示的文字,用於提示使用者輸入特定值。這段文字會一直顯示。

如果未指定 label,則為必要欄位。否則為選填。

value

string

使用者輸入的值,會做為表單輸入事件的一部分傳回。

如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

type

enum (Type)

文字輸入欄位在使用者介面中的顯示方式。例如,欄位是單行或多行。

onChangeAction

object (Action)

文字輸入欄位發生變更時要執行的動作。例如使用者在欄位中新增或刪除文字。

可執行的動作包括執行自訂函式,或在 Google Chat 中開啟對話方塊。

initialSuggestions

object (Suggestions)

使用者可輸入的建議值。當使用者點按文字輸入欄位時,就會看到這些值。使用者輸入內容時,系統會動態篩選建議值,找出符合輸入內容的值。

舉例來說,程式設計語言的文字輸入欄位可能會建議 Java、JavaScript、Python 和 C++。當使用者開始輸入 Jav 時,建議清單會篩選出僅顯示 Java 和 JavaScript。

建議值可引導使用者輸入應用程式能理解的值。舉例來說,使用者可能會輸入 javascript 或 java script 來指稱 JavaScript。建議JavaScript可標準化使用者與應用程式互動的方式。

指定後,TextInput.type 一律為 SINGLE_LINE,即使設為 MULTIPLE_LINE 也一樣。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

autoCompleteAction

object (Action)

(選用步驟) 指定文字輸入欄位向互動使用者提供建議時,應採取的動作。

如未指定,建議會由 initialSuggestions 設定,並由用戶端處理。

如果指定,應用程式會執行此處指定的動作,例如執行自訂函式。

適用於 Google Workspace 外掛程式,不適用於 Google Chat 應用程式。

validation

object (Validation)

指定這個文字欄位所需的輸入格式驗證。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

placeholderText

string

文字輸入欄位空白時,欄位中顯示的文字。這段文字會提示使用者輸入值。例如 Enter a number from 0 to 100。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
hostAppDataSource

object (HostAppDataSourceMarkup)

Google Workspace 代管應用程式專屬的資料來源,例如 Gmail 電子郵件、Google 日曆活動或 Google Chat 即時通訊訊息。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

互斥欄位結束。

類型

文字輸入欄位在使用者介面中的顯示方式。例如,是單行輸入欄位還是多行輸入欄位。如果指定 initialSuggestions,type 一律為 SINGLE_LINE,即使設為 MULTIPLE_LINE 也一樣。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
SINGLE_LINE 文字輸入欄位的高度固定為一行。
MULTIPLE_LINE 文字輸入欄位的高度固定,可容納多行文字。

RenderActions

一組轉譯指令,可指示資訊卡執行動作,或指示外掛程式主機應用程式或 Chat 應用程式執行應用程式專屬動作。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

欄位
action

Action

動作

欄位
navigations[]

Navigation

推送、彈出或更新資訊卡。

Google Chat 外掛程式。

在堆疊中新增卡片 (向前瀏覽)。Chat 擴充應用程式僅適用於應用程式首頁。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

navigations: {
  pushCard: CARD
}

用新卡牌取代最上方的卡牌。如果是 Chat 擴充應用程式,則僅適用於應用程式首頁。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

navigations: {
  updateCard: CARD
}

建議

使用者可輸入的建議值。當使用者點按文字輸入欄位時,就會看到這些值。使用者輸入內容時,系統會動態篩選建議值,找出符合輸入內容的值。

舉例來說,程式設計語言的文字輸入欄位可能會建議 Java、JavaScript、Python 和 C++。當使用者開始輸入 Jav 時,建議清單會篩選顯示 Java 和 JavaScript。

建議值可引導使用者輸入應用程式能理解的值。舉例來說,使用者可能會輸入 javascript 或 java script 來指稱 JavaScript。建議JavaScript可標準化使用者與應用程式互動的方式。

指定後,TextInput.type 一律為 SINGLE_LINE,即使設為 MULTIPLE_LINE 也一樣。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "items": [
    {
      object (SuggestionItem)
    }
  ]
}
欄位
items[]

object (SuggestionItem)

文字輸入欄位中,用於自動完成建議的建議清單。

SuggestionItem

使用者可在文字輸入欄位中輸入的建議值。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{

  "text": string
}
欄位
以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
text

string

文字輸入欄位中建議輸入的值。這與使用者自行輸入的內容相同。

互斥欄位結束。

驗證

代表驗證附加小工具所需的資料。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "characterLimit": integer,
  "inputType": enum (InputType)
}
欄位
characterLimit

integer

指定文字輸入小工具的字元限制。請注意,這項屬性僅適用於文字輸入,其他小工具會忽略這項屬性。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

inputType

enum (InputType)

指定輸入小工具的類型。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

InputType

輸入小工具的類型。

列舉
INPUT_TYPE_UNSPECIFIED 未指定類型,請勿使用。
TEXT 可接受所有字元的一般文字。
INTEGER 整數值。
FLOAT 浮點值。
EMAIL 電子郵件地址。
EMOJI_PICKER 從系統提供的表情符號挑選器中選取的表情符號。

HostAppDataSourceMarkup

Google Workspace 應用程式的資料來源。資料來源會填入小工具的可用項目。

JSON 表示法
{

  "chatDataSource": {
    object (ChatClientDataSourceMarkup)
  },
  "workflowDataSource": {
    object (WorkflowDataSourceMarkup)
  }
}
欄位
這個 Google Workspace 應用程式會填入小工具的可用項目。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
chatDataSource

object (ChatClientDataSourceMarkup)

Google Chat 的資料來源。

workflowDataSource

object (WorkflowDataSourceMarkup)

Google Workflow 的資料來源。

互斥欄位結束。

ChatClientDataSourceMarkup

如果是使用多選選單的 SelectionInput 小工具,則資料來源為 Google Chat。資料來源會填入多選選單的選項。例如,使用者可以選取自己加入的 Google Chat 聊天室。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

JSON 表示法
{

  "spaceDataSource": {
    object (SpaceDataSource)
  }
}
欄位
Google Chat 資料來源。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
spaceDataSource

object (SpaceDataSource)

使用者加入的 Google Chat 聊天室。

互斥欄位結束。

SpaceDataSource

這個資料來源會將 Google Chat 聊天室填入多選選單,做為選項。只會填入使用者所屬的聊天室。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

JSON 表示法
{
  "defaultToCurrentSpace": boolean
}
欄位
defaultToCurrentSpace

boolean

如果設為 true,多選選單預設會選取目前的 Google Chat 聊天室做為項目。

WorkflowDataSourceMarkup

* 僅支援 Google Workspace Workflow,不支援 Google Chat 應用程式或 Google Workspace 外掛程式。

[SELECT_VIEWER_GENDER][FEMALE]在 MULTI_SELECT 類型的 TextInput 或 SelectionInput 小工具或 DateTimePicker 中,提供 Google 的資料來源。[MALE]在 MULTI_SELECT 類型的 TextInput 或 SelectionInput 小工具或 DateTimePicker 中,提供 Google 的資料來源。[OTHER]在 MULTI_SELECT 類型的 TextInput 或 SelectionInput 小工具或 DateTimePicker 中,提供 Google 的資料來源。[END_SELECT]

JSON 表示法
{
  "includeVariables": boolean,
  "type": enum (Type)
}
欄位
includeVariables

boolean

是否要在資料來源中加入上一個步驟的變數。

type

enum (Type)

資料來源類型。

類型

代表工作流程資料來源類型的列舉。

列舉
UNKNOWN 預設值。請勿使用。
USER Google Workspace 使用者。使用者只能查看及選取 Google Workspace 組織中的使用者。
SPACE 使用者加入的 Google Chat 聊天室。
USER_WITH_FREE_FORM 使用者可以選擇查看及選取 Google Workspace 機構中的現有成員,也可以手動輸入電子郵件地址或有效網域。

SelectionInput

這個小工具可建立一或多個使用者可選取的 UI 項目。僅支援 dropdown 和 multiselect 選單的表單提交驗證。如果 Action.all_widgets_are_required 設為 true,或在 Action.required_widgets 中指定這個小工具,則必須選取值,否則無法提交。例如下拉式選單或核取方塊。您可以使用這個小工具收集可預測或列舉的資料。如需 Google Chat 應用程式範例,請參閱「新增可選取的 UI 元素」。

Chat 擴充應用程式可以處理使用者選取或輸入的項目值。如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

如要向使用者收集未定義或抽象的資料,請使用 TextInput 小工具。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "name": string,
  "label": string,
  "type": enum (SelectionType),
  "items": [
    {
      object (SelectionItem)
    }
  ],
  "onChangeAction": {
    object (Action)
  },
  "multiSelectMinQueryLength": integer,
  "dataSourceConfigs": [
    {
      object (DataSourceConfig)
    }
  ],
  "multiSelectMaxSelectedItems": integer,
  "hintText": string,

  "externalDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
}
欄位
name

string

必填。表單輸入事件中,用來識別選項輸入內容的名稱。

如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

label

string

使用者介面中顯示在選項輸入欄位上方的文字。

指定文字,協助使用者輸入應用程式所需的資訊。舉例來說,如果使用者要從下拉式選單中選取工作單的緊急程度,標籤可能是「緊急程度」或「選取緊急程度」。

type

enum (SelectionType)

在 SelectionInput 小工具中向使用者顯示的項目類型。選取類型支援不同類型的互動。舉例來說,使用者可以選取一或多個核取方塊,但只能從下拉式選單中選取一個值。

items[]

object (SelectionItem)

可選項目陣列。例如一組圓形按鈕或核取方塊。最多支援 100 個項目。

onChangeAction

object (Action)

如果指定這個屬性,系統會在選取項目變更時提交表單。如未指定,則必須指定另一個按鈕來提交表單。

如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

multiSelectMinQueryLength

integer

如果是多選選單,則是指使用者輸入的文字字元數,達到這個數量後,選單才會傳回建議的選項。

如未設定,複選選單會使用下列預設值:

  • 如果選單使用 SelectionInput 項目的靜態陣列,則預設為 0 個字元,並立即填入陣列中的項目。
  • 如果選單使用動態資料來源 (multi_select_data_source),則預設為 3 個字元,然後查詢資料來源以傳回建議項目。
dataSourceConfigs[]

object (DataSourceConfig)

(選用步驟) 選取控制項的資料來源設定。這個欄位可讓您更精細地控管資料來源。

如果指定,系統會忽略 multiSelectMaxSelectedItems、multiSelectMinQueryLength、externalDataSource 和 platformDataSource 欄位。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。

適用於 Google Chat 應用程式中的Dropdown widget。Google Chat 應用程式中的 Dropdown 小工具僅支援一個 DataSourceConfig。如果設定多個 DataSourceConfig,系統只會使用第一個。

multiSelectMaxSelectedItems

integer

如果是複選選單,則為使用者可選取的項目數量上限。值不得小於 1 個項目。如未指定,預設值為 3 個項目。

hintText

string

(選用步驟) 顯示在選項輸入欄位下方的文字,用於提示使用者輸入特定值。這段文字會一直顯示。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

如果是多選選單,則為動態填入選項項目的資料來源。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:

externalDataSource

object (Action)

外部資料來源,例如關聯式資料庫。

platformDataSource

object (PlatformDataSource)

Google Workspace 的資料來源。

互斥欄位結束。

SelectionType

使用者可選取項目的格式。不同選項支援不同類型的互動。舉例來說,使用者可以選取多個核取方塊,但只能從下拉式選單中選取一個項目。

每個選項輸入項都支援一種選項類型。舉例來說,不支援混合使用核取方塊和切換鈕。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
CHECK_BOX 一組核取方塊。使用者可以選取一或多個核取方塊。
RADIO_BUTTON 一組圓形按鈕。使用者可以選取一個圓形按鈕。
SWITCH 一組切換裝置。使用者可以開啟一或多個切換按鈕。
DROPDOWN

下拉式選單。使用者可以從選單中選取一個項目。

如果是 Google Chat 應用程式,您可以使用動態資料來源填入項目,並在使用者輸入選單時自動建議項目。舉例來說,使用者開始輸入 Google Chat 聊天室名稱時,小工具會自動建議聊天室。如要動態填入下拉式選單的項目,請使用下列其中一種資料來源:

  • Google Workspace 資料:使用 Google Workspace 的資料填入項目,例如 Google Workspace 使用者或 Google Chat 聊天室。
  • 外部資料:項目是從 Google Workspace 外部的資料來源填入。

如需 Chat 擴充應用程式下拉式選單的實作範例,請參閱「新增下拉式選單」和「動態填入下拉式選單」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

MULTI_SELECT

含有文字方塊的選單。使用者可以輸入並選取一或多個項目。如果是 Google Workspace 外掛程式,您必須使用 SelectionItem 物件的靜態陣列填入項目。

如果是 Google Chat 應用程式,您也可以使用動態資料來源填入項目,並在使用者輸入選單時自動建議項目。舉例來說,使用者開始輸入 Google Chat 聊天室名稱時,小工具會自動建議聊天室。如要為複選選單動態填入項目,請使用下列其中一種資料來源:

  • Google Workspace 資料:使用 Google Workspace 的資料填入項目,例如 Google Workspace 使用者或 Google Chat 聊天室。
  • 外部資料:項目是從 Google Workspace 外部的資料來源填入。

如需 Chat 擴充應用程式實作多選選單的範例,請參閱「新增多選選單」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

PlatformDataSource

如果是使用複選選單的 SelectionInput 小工具,則資料來源來自 Google Workspace。用於填入多選選單中的項目。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

JSON 表示法
{

  "commonDataSource": enum (CommonDataSource),
  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
}
欄位
資料來源。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
commonDataSource

enum (CommonDataSource)

所有 Google Workspace 應用程式共用的資料來源,例如 Google Workspace 組織中的使用者。

hostAppDataSource

object (HostAppDataSourceMarkup)

Google Workspace 代管應用程式專屬的資料來源,例如 Google Chat 中的聊天室。

這個欄位支援 Google API 用戶端程式庫,但不適用於 Cloud 用戶端程式庫。詳情請參閱「安裝用戶端程式庫」。

互斥欄位結束。

CommonDataSource

所有 Google Workspace 應用程式共用的資料來源。

適用於 Google Chat 應用程式,不適用於 Google Workspace 外掛程式。

列舉
UNKNOWN 預設值。請勿使用。
USER Google Workspace 使用者。使用者只能查看及選取 Google Workspace 組織中的使用者。

DataSourceConfig

設定物件,用於設定小工具的資料來源。

適用於 Google Chat 擴充應用程式,以及擴充 Google Workspace Studio 的 Google Workspace 外掛程式。

JSON 表示法
{

  "remoteDataSource": {
    object (Action)
  },
  "platformDataSource": {
    object (PlatformDataSource)
  }
  "minCharactersTrigger": integer
}
欄位
資料來源。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
remoteDataSource

object (Action)

資料來自遠端資料供應商。

platformDataSource

object (PlatformDataSource)

資料來自 Google Workspace 應用程式。

互斥欄位結束。
minCharactersTrigger

integer

使用者必須輸入的字元數下限,達到這個下限後,系統才會觸發這個資料提供者 (也就是開始傳回結果)。

DateTimePicker

可讓使用者輸入日期、時間或兩者。支援表單提交驗證。如果 Action.all_widgets_are_required 設為 true,或在 Action.required_widgets 中指定這個小工具,則必須選取值,否則無法提交。如需 Google Chat 應用程式的範例,請參閱「讓使用者選擇日期和時間」。

使用者可以輸入文字,或使用挑選器選取日期和時間。如果使用者輸入無效的日期或時間,挑選器會顯示錯誤訊息,提示使用者正確輸入資訊。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "name": string,
  "label": string,
  "type": enum (DateTimePickerType),
  "valueMsEpoch": string,
  "timezoneOffsetDate": integer,
  "onChangeAction": {
    object (Action)
  },

  "hostAppDataSource": {
    object (HostAppDataSourceMarkup)
  }
}
欄位
name

string

在表單輸入事件中,用來識別 DateTimePicker 的名稱。

如要進一步瞭解如何使用表單輸入內容,請參閱「接收表單資料」。

label

string

提示使用者輸入日期、時間或日期和時間的文字。舉例來說,如果使用者正在預約,請使用 Appointment date 或 Appointment date and time 等標籤。

type

enum (DateTimePickerType)

小工具是否支援輸入日期、時間或日期和時間。

valueMsEpoch

string (int64 format)

小工具中顯示的預設值,以 Unix 紀元時間起算的毫秒數為單位。

根據挑選器類型 (DateTimePickerType) 指定值:

  • DATE_AND_TIME:世界標準時間的日曆日期和時間。舉例來說,如要表示世界標準時間 2023 年 1 月 1 日中午 12 點,請使用 1672574400000。
  • DATE_ONLY:世界標準時間 00:00:00 的日曆日期。舉例來說,如要表示 2023 年 1 月 1 日,請使用 1672531200000。
  • TIME_ONLY:世界標準時間。舉例來說,如要表示中午 12:00,請使用 43200000 (或 12 * 60 * 60 * 1000)。
timezoneOffsetDate

integer

代表時區與世界標準時間差距的數字,以分鐘為單位。如果設定,valueMsEpoch 會以指定時區顯示。如未設定,系統會預設為使用者的時區設定。

注意:這個欄位以分鐘為單位,而使用者互動事件酬載通常會以毫秒為單位提供時區偏移量 (除以 60000 即可轉換)。

onChangeAction

object (Action)

使用者在 DateTimePicker 介面中點選「儲存」或「清除」時觸發。

指定用來代表日期和時間的資料來源。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
hostAppDataSource

object (HostAppDataSourceMarkup)

Google Workspace 代管應用程式專屬的資料來源,例如 Gmail 電子郵件、Google 日曆活動或 Google Chat 即時通訊訊息。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

互斥欄位結束。

DateTimePickerType

DateTimePicker 小工具中的日期和時間格式。決定使用者能否輸入日期、時間,或同時輸入日期和時間。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
DATE_AND_TIME 使用者輸入日期和時間。
DATE_ONLY 使用者輸入日期。
TIME_ONLY 使用者輸入時間。

分隔線

這個類型沒有任何欄位。

以水平線顯示小工具之間的分隔線。如需 Google Chat 應用程式的範例,請參閱「在小工具之間新增水平分隔線」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

舉例來說,下列 JSON 會建立分隔線:

"divider": {}

格線

顯示含有項目集合的格線。項目只能包含文字或圖片。如要使用回應式資料欄,或加入文字或圖片以外的內容,請使用 Columns。如需 Google Chat 應用程式範例,請參閱「顯示含有項目集合的格線」。

格線支援任意數量的欄和項目。列數取決於項目數除以欄數。有 10 個項目和 2 欄的格線會有 5 列。有 11 個項目和 2 欄的格線會有 6 列。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

舉例來說,下列 JSON 會建立含有單一項目的 2 欄格線:

"grid": {
  "title": "A fine collection of items",
  "columnCount": 2,
  "borderStyle": {
    "type": "STROKE",
    "cornerRadius": 4
  },
  "items": [
    {
      "image": {
        "imageUri": "https://www.example.com/image.png",
        "cropStyle": {
          "type": "SQUARE"
        },
        "borderStyle": {
          "type": "STROKE"
        }
      },
      "title": "An item",
      "textAlignment": "CENTER"
    }
  ],
  "onClick": {
    "openLink": {
      "url": "https://www.example.com"
    }
  }
}
JSON 表示法
{
  "title": string,
  "items": [
    {
      object (GridItem)
    }
  ],
  "borderStyle": {
    object (BorderStyle)
  },
  "columnCount": integer,
  "onClick": {
    object (OnClick)
  }
}
欄位
title

string

格線標頭中顯示的文字。

items[]

object (GridItem)

要在格狀檢視中顯示的項目。

borderStyle

object (BorderStyle)

要套用至每個格線項目的框線樣式。

columnCount

integer

格狀檢視畫面中顯示的資料欄數量。如未指定這個欄位,系統會使用預設值,而預設值會因格線顯示位置 (對話方塊或隨播廣告) 而異。

onClick

object (OnClick)

每個格線項目都會重複使用這個回呼,但會將項目的 ID 新增至回呼的參數 (位於 "grid_item_identifier" 鍵下方)。

GridItem

代表格狀版面配置中的項目。項目可以包含文字、圖片,或同時包含文字和圖片。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "id": string,
  "image": {
    object (ImageComponent)
  },
  "title": string,
  "subtitle": string,
  "layout": enum (GridItemLayout)
}
欄位
id

string

使用者為這個格狀項目指定的 ID。這個 ID 會在父項格線的 onClick 回呼參數中傳回。

image

object (ImageComponent)

格狀項目中顯示的圖片。

title

string

格線項目的標題。

subtitle

string

格線項目的副標題。

layout

enum (GridItemLayout)

格線項目要使用的版面配置。

ImageComponent

代表圖片。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "imageUri": string,
  "altText": string,
  "cropStyle": {
    object (ImageCropStyle)
  },
  "borderStyle": {
    object (BorderStyle)
  }
}
欄位
imageUri

string

圖片網址。

altText

string

圖片的無障礙標籤。

cropStyle

object (ImageCropStyle)

要套用至圖片的裁剪樣式。

borderStyle

object (BorderStyle)

要套用至圖片的邊框樣式。

ImageCropStyle

代表套用至圖片的裁剪樣式。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

舉例來說,以下程式碼會套用 16:9 的顯示比例:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}
JSON 表示法
{
  "type": enum (ImageCropType),
  "aspectRatio": number
}
欄位
type

enum (ImageCropType)

作物類型。

aspectRatio

number

裁剪類型為 RECTANGLE_CUSTOM 時要使用的顯示比例。

舉例來說,以下程式碼會套用 16:9 的顯示比例:

cropStyle {
 "type": "RECTANGLE_CUSTOM",
 "aspectRatio": 16/9
}

ImageCropType

代表套用至圖片的裁剪樣式。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
IMAGE_CROP_TYPE_UNSPECIFIED 請勿使用。未指明
SQUARE 預設值。套用正方形裁剪。
CIRCLE 套用圓形裁剪。
RECTANGLE_CUSTOM 以自訂顯示比例裁剪矩形。使用 aspectRatio 設定自訂顯示比例。
RECTANGLE_4_3 以 4:3 顯示比例裁剪為矩形。

BorderStyle

卡片或小工具框線的樣式選項,包括框線類型和顏色。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "type": enum (BorderType),
  "strokeColor": {
    object (Color)
  },
  "cornerRadius": integer
}
欄位
type

enum (BorderType)

框線類型。

strokeColor

object (Color)

類型為 BORDER_TYPE_STROKE 時要使用的顏色。

如要設定筆劃顏色,請為 red、green 和 blue 欄位指定值。這個值必須是介於 0 和 1 之間的浮點數 (根據 RGB 顏色值),其中 0 (0/255) 代表沒有顏色,1 (255/255) 代表顏色強度最大。

舉例來說,下列程式碼會將顏色設為紅色,並將強度設為最大值:

"color": {
   "red": 1,
   "green": 0,
   "blue": 0,
}

alpha 欄位不適用於筆劃顏色。如果指定,系統會忽略這個欄位。

cornerRadius

integer

邊框的圓角半徑。

BorderType

代表套用至小工具的邊框類型。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
BORDER_TYPE_UNSPECIFIED 請勿使用。未指明
NO_BORDER 無框線。
STROKE 預設值。Outline。

GridItemLayout

代表格狀項目可用的各種版面配置選項。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
GRID_ITEM_LAYOUT_UNSPECIFIED 請勿使用。未指明
TEXT_BELOW 標題和副標題會顯示在格狀項目圖片下方。
TEXT_ABOVE 標題和副標題會顯示在格狀項目的圖片上方。

欄

Columns 小工具最多可在資訊卡或對話方塊中顯示 2 欄。您可以在每個資料欄中新增小工具,小工具會按照指定的順序顯示。如需 Google Chat 應用程式的範例,請參閱「在資料欄中顯示資訊卡和對話方塊」。

每個資料欄的高度取決於較高的資料欄。舉例來說,如果第一欄高於第二欄,則兩欄的高度都會是第一欄的高度。由於每個資料欄可包含不同數量的小工具,因此您無法定義資料列,也無法對齊各欄之間的小工具。

資料欄會並排顯示。您可以使用 HorizontalSizeStyle 欄位自訂各欄寬度。如果使用者的螢幕寬度太窄,第二欄會換行到第一欄下方:

  • 在網頁上,如果螢幕寬度小於或等於 480 像素,第二欄會換行。
  • 在 iOS 裝置上,如果螢幕寬度小於或等於 300 pt,第二欄會換行。
  • 在 Android 裝置上,如果螢幕寬度小於或等於 320 dp,第二欄會換行。

如要加入兩個以上的資料欄,或使用資料列,請使用 Grid 小工具。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。支援資料欄的外掛程式 UI 包括:

  • 使用者從電子郵件草稿開啟外掛程式時,系統會顯示這個對話方塊。
  • 使用者從 Google 日曆活動的「新增附件」選單開啟外掛程式時,系統會顯示這個對話方塊。
JSON 表示法
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
欄位
columnItems[]

object (Column)

資料欄陣列。資訊卡或對話方塊最多可包含 2 欄。

欄

資料欄。

Google Workspace 外掛程式和 Chat 應用程式

JSON 表示法
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
欄位
horizontalSizeStyle

enum (HorizontalSizeStyle)

指定資料欄填滿資訊卡寬度的方式。

horizontalAlignment

enum (HorizontalAlignment)

指定小工具要靠左、靠右或置中對齊。

verticalAlignment

enum (VerticalAlignment)

指定小工具要靠上、靠下或置中對齊資料欄。

widgets[]

object (Widgets)

資料欄中的小工具陣列。小工具會按照指定順序顯示。

HorizontalSizeStyle

指定資料欄填滿資訊卡寬度的方式。每欄的寬度取決於 HorizontalSizeStyle 和欄內小工具的寬度。

Google Workspace 外掛程式和 Chat 應用程式

列舉
HORIZONTAL_SIZE_STYLE_UNSPECIFIED 請勿使用。未指明
FILL_AVAILABLE_SPACE 預設值。欄會填滿可用空間,最多可達資訊卡寬度的 70%。如果兩個資料欄都設為 FILL_AVAILABLE_SPACE,則每個資料欄會填滿 50% 的空間。
FILL_MINIMUM_SPACE 資料欄會盡可能填滿最少空間,且不超過資訊卡寬度的 30%。

HorizontalAlignment

指定小工具要靠左、靠右或置中對齊。

適用於 Google Chat 擴充應用程式,不適用於 Google Workspace 外掛程式。

列舉
HORIZONTAL_ALIGNMENT_UNSPECIFIED 請勿使用。未指明
START 預設值。將小工具對齊資料欄的起始位置。如果是從左到右的版面配置,則會靠左對齊。如果是由右至左的版面配置,則會靠右對齊。
CENTER 將小工具置中對齊資料欄。
END 將小工具對齊資料欄的結尾位置。如果是從左到右的版面配置,則會將小工具靠右對齊。如果是由右至左的版面配置,則會將小工具靠左對齊。

VerticalAlignment

指定小工具要靠上、靠下或置中對齊資料欄。

Google Workspace 外掛程式和 Chat 應用程式

列舉
VERTICAL_ALIGNMENT_UNSPECIFIED 請勿使用。未指明
CENTER 預設值。將小工具置中對齊資料欄。
TOP 將小工具對齊資料欄頂端。
BOTTOM 將小工具對齊資料欄底部。

小工具

可加入資料欄的支援小工具。

Google Workspace 外掛程式和 Chat 應用程式

JSON 表示法
{

  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  },
  "chipList": {
    object (ChipList)
  }
}
欄位
以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
textParagraph

object (TextParagraph)

TextParagraph小工具。

image

object (Image)

Image小工具。

decoratedText

object (DecoratedText)

DecoratedText小工具。

buttonList

object (ButtonList)

ButtonList小工具。

textInput

object (TextInput)

TextInput小工具。

selectionInput

object (SelectionInput)

SelectionInput小工具。

dateTimePicker

object (DateTimePicker)

DateTimePicker小工具。

chipList

object (ChipList)

ChipList小工具。

互斥欄位結束。

ChipList

水平排列的方塊清單,可水平捲動或換行。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "layout": enum (Layout),
  "chips": [
    {
      object (Chip)
    }
  ]
}
欄位
layout

enum (Layout)

指定的方塊清單版面配置。

chips[]

object (Chip)

晶片陣列。

版面配置

方塊清單版面配置。

列舉
LAYOUT_UNSPECIFIED 請勿使用。未指明
WRAPPED 預設值。如果水平空間不足,方塊清單會換行。
HORIZONTAL_SCROLLABLE 如果可用空間不足,方塊會水平捲動。

方塊

使用者可點選的文字、圖示或文字和圖示方塊。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "icon": {
    object (Icon)
  },
  "label": string,
  "onClick": {
    object (OnClick)
  },
  "enabled": boolean,
  "disabled": boolean,
  "altText": string
}
欄位
icon

object (Icon)

圖示圖片。如果同時設定 icon 和 label,圖示會顯示在標籤前方。

label

string

方塊內顯示的文字。

onClick

object (OnClick)

(選用步驟) 使用者點選方塊時要執行的動作,例如開啟超連結或執行自訂函式。

enabled
(deprecated)

boolean

已淘汰:請改用 disabled。

方塊是否處於啟用狀態,並會回應使用者動作。

disabled

boolean

方塊是否處於停用狀態,並忽略使用者動作。預設值為 false。

altText

string

用於無障礙功能的替代文字。

設定說明文字,讓使用者瞭解方塊的功能。舉例來說,如果方塊會開啟超連結,請寫入:「開啟新的瀏覽器分頁,並前往 Google Chat 開發人員說明文件,網址為 https://developers.google.com/workspace/chat"」。

CarouselCard

可顯示為輪轉介面項目的資訊卡。 適用於 Google Chat 應用程式,不適用於 Google Workspace 外掛程式。

JSON 表示法
{
  "widgets": [
    {
      object (NestedWidget)
    }
  ],
  "footerWidgets": [
    {
      object (NestedWidget)
    }
  ]
}
欄位
widgets[]

object (NestedWidget)

輪轉介面資訊卡中顯示的小工具清單。小工具會按照指定順序顯示。

footerWidgets[]

object (NestedWidget)

輪轉介面資訊卡底部顯示的小工具清單。小工具會按照指定順序顯示。

NestedWidget

可在包含版面配置 (例如 CarouselCard) 中顯示的小工具清單。 適用於 Google Chat 應用程式,不適用於 Google Workspace 外掛程式。

JSON 表示法
{

  "textParagraph": {
    object (TextParagraph)
  },
  "buttonList": {
    object (ButtonList)
  },
  "image": {
    object (Image)
  }
}
欄位
以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
textParagraph

object (TextParagraph)

文字段落小工具。

buttonList

object (ButtonList)

按鈕清單小工具。

image

object (Image)

圖片小工具。

互斥欄位結束。

瀏覽權限

指定 UI 元素是否顯示。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

列舉
VISIBILITY_UNSPECIFIED 未指定顯示設定。請勿使用。
VISIBLE UI 元素會顯示。
HIDDEN 隱藏 UI 元素。

EventAction

代表可對 UI 元素執行的動作。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

JSON 表示法
{
  "actionRuleId": string,
  "postEventTriggers": [
    {
      object (Trigger)
    }
  ],

  "commonWidgetAction": {
    object (CommonWidgetAction)
  }
}
欄位
actionRuleId

string

ActionRule 的專屬 ID。

postEventTriggers[]

object (Trigger)

EventAction 執行後會觸發的觸發條件清單。

要執行的動作。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
commonWidgetAction

object (CommonWidgetAction)

常見的小工具動作。

互斥欄位結束。

觸發條件

代表觸發條件。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

JSON 表示法
{
  "actionRuleId": string
}
欄位
actionRuleId

string

ActionRule 的專屬 ID。

CommonWidgetAction

代表不限於特定小工具的操作。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

JSON 表示法
{

  "updateVisibilityAction": {
    object (UpdateVisibilityAction)
  }
}
欄位
要執行的動作。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
updateVisibilityAction

object (UpdateVisibilityAction)

更新小工具顯示設定的操作。

互斥欄位結束。

UpdateVisibilityAction

代表更新小工具顯示設定的動作。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

JSON 表示法
{
  "visibility": enum (Visibility)
}
欄位
visibility

enum (Visibility)

新的瀏覽權限。

CollapseControl

代表展開和收合控制項。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "horizontalAlignment": enum (HorizontalAlignment),
  "expandButton": {
    object (Button)
  },
  "collapseButton": {
    object (Button)
  }
}
欄位
horizontalAlignment

enum (HorizontalAlignment)

展開和收合按鈕的水平對齊方式。

expandButton

object (Button)

(選用步驟) 定義自訂按鈕,展開這個部分。必須同時設定 expandButton 和 collapseButton 欄位。只有一個欄位集不會生效。如未設定這個欄位,系統會使用預設按鈕。

collapseButton

object (Button)

(選用步驟) 定義自訂按鈕,用於收合這個部分。必須同時設定 expandButton 和 collapseButton 欄位。只有一個欄位集不會生效。如未設定這個欄位,系統會使用預設按鈕。

DividerStyle

資訊卡的分隔線樣式。目前僅用於資訊卡區段之間的分隔線。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

列舉
DIVIDER_STYLE_UNSPECIFIED 請勿使用。未指明
SOLID_DIVIDER 預設選項。顯示實線分隔線。
NO_DIVIDER 如果設定,就不會顯示分隔線。這個樣式會從版面配置中完全移除分隔線。結果等同於完全不新增分隔線。

CardAction

資訊卡動作是指與資訊卡相關聯的動作。舉例來說,應付憑據資訊卡可能包含刪除應付憑據、透過電子郵件傳送應付憑據,或在瀏覽器中開啟應付憑據等動作。

適用於 Google Workspace 外掛程式,不適用於 Google Chat 應用程式。

JSON 表示法
{
  "actionLabel": string,
  "onClick": {
    object (OnClick)
  }
}
欄位
actionLabel

string

顯示為動作選單項目的標籤。

onClick

object (OnClick)

這項待辦事項的 onClick 動作。

CardFixedFooter

顯示在資訊卡底部的固定 (置底) 頁尾。

如果設定 fixedFooter,但未指定 primaryButton 或 secondaryButton,則會發生錯誤。

Chat 擴充應用程式可在對話方塊中使用固定頁尾,但資訊卡訊息不支援。如需 Google Chat 應用程式的範例,請參閱「新增固定頁尾」。

適用於 Google Chat 擴充應用程式和 Google Workspace 外掛程式。

JSON 表示法
{
  "primaryButton": {
    object (Button)
  },
  "secondaryButton": {
    object (Button)
  }
}
欄位
primaryButton

object (Button)

固定頁尾的主要按鈕。按鈕必須是文字按鈕,且已設定文字和顏色。

secondaryButton

object (Button)

固定頁尾的次要按鈕。按鈕必須是文字按鈕,並設定文字和顏色。如果設定 secondaryButton,則必須一併設定 primaryButton。

DisplayStyle

在 Google Workspace 外掛程式中,決定資訊卡的顯示方式。

適用於 Google Workspace 外掛程式,不適用於 Google Chat 應用程式。

列舉
DISPLAY_STYLE_UNSPECIFIED 請勿使用。未指明
PEEK 資訊卡的標頭會顯示在側欄底部,部分覆蓋堆疊中目前的頂端資訊卡。點選標題,資訊卡就會彈出到資訊卡堆疊中。如果資訊卡沒有標題,系統會改用產生的標題。
REPLACE 預設值。系統會取代卡牌堆疊中頂端卡牌的檢視畫面,顯示這張卡牌。

ExpressionData

代表用於評估運算式的資料。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

JSON 表示法
{
  "id": string,
  "expression": string,
  "conditions": [
    {
      object (Condition)
    }
  ],
  "eventActions": [
    {
      object (EventAction)
    }
  ]
}
欄位
id

string

ExpressionData 的專屬 ID。

expression

string

未編譯的運算式。

conditions[]

object (Condition)

由運算式評估結果決定的條件清單。

eventActions[]

object (EventAction)

可使用 ExpressionData 的動作清單。

條件

代表可用於觸發動作的條件。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

JSON 表示法
{
  "actionRuleId": string,

  "expressionDataCondition": {
    object (ExpressionDataCondition)
  }
}
欄位
actionRuleId

string

ActionRule 的專屬 ID。

條件。以下是互斥欄位清單。回應中最多會設定下列其中一個欄位:
expressionDataCondition

object (ExpressionDataCondition)

由運算式資料決定的條件。

互斥欄位結束。

ExpressionDataCondition

代表使用 CEL 評估的條件。

適用於擴充 Google Workspace Studio 的 Google Workspace 外掛程式。不適用於 Google Chat 應用程式。

JSON 表示法
{
  "conditionType": enum (ConditionType)
}
欄位
conditionType

enum (ConditionType)

條件類型。

ConditionType

條件類型。

列舉
CONDITION_TYPE_UNSPECIFIED 未指定條件類型。
EXPRESSION_EVALUATION_SUCCESS 運算式評估成功。
EXPRESSION_EVALUATION_FAILURE 運算式評估失敗。