CardSection
is a high-level container within a card. You use card sections to group widgets within a card. For each card section, you can include a header and one or more widgets.
You can include sections for card messages and dialogs.
Example
The following image displays a card consisting of a CardSection
component.

CardSection
displaying a header and two TextParagraph
widgets. The second text paragraph is collapsed.
Here's the card's JSON:
JSON
{
"cardsV2": [
{
"cardId": "card_one",
"card": {
"sections": [
{
"header": "List of Collapsible Text Paragraphs",
"collapsible": true,
"uncollapsibleWidgetsCount": 1,
"widgets": [
{
"textParagraph": {
"text": "This is a normal test string 1",
}
},
{
"textParagraph": {
"text": "This is a normal test string 2",
}
}
]
}]
}
}
]
}
Section
JSON representation and fields
A section contains a collection of widgets that are rendered vertically in the order that they are specified.
JSON representation |
---|
{
"header": string,
"widgets": [
{
object (
|
Fields | |
---|---|
header
|
Text that appears at the top of a section. Supports simple HTML formatted text . |
widgets[]
|
All the widgets in the section. Must contain at least 1 widget. |
collapsible
|
Indicates whether this section is collapsible. Collapsible sections hide some or all widgets, but users can expand the section to reveal the hidden widgets by clicking Show more . Users can hide the widgets again by clicking Show less .
To determine which widgets are hidden, specify
|
uncollapsibleWidgetsCount
|
The number of uncollapsible widgets which remain visible even when a section is collapsed.
For example, when a section contains five widgets and the
|
Widget
Each card is made up of widgets.
A widget is a composite object that can represent one of text, images, buttons, and other object types.
JSON representation |
---|
{ // Union field |
Fields | |
---|---|
Union field
data
. A widget can only have one of the following items. You can use multiple widget fields to display more items.
data
can be only one of the following:
|
|
textParagraph
|
Displays a text paragraph. Supports simple HTML formatted text . For example, the following JSON creates a bolded text:
|
image
|
Displays an image. For example, the following JSON creates an image with alternative text:
|
decoratedText
|
Displays a decorated text item. For example, the following JSON creates a decorated text widget showing email address:
|
buttonList
|
A list of buttons. For example, the following JSON creates two buttons. The first is a blue text button and the second is an image button that opens a link:
|
textInput
|
Displays a text box that users can type into. For example, the following JSON creates a text input for an email address:
As another example, the following JSON creates a text input for a programming language with static suggestions:
|
selectionInput
|
Displays a selection control that lets users select items. Selection controls can be check boxes, radio buttons, switches, or dropdown menus. For example, the following JSON creates a dropdown menu that lets users choose a size:
|
dateTimePicker
|
Displays a selection/input widget for date, time, or date and time. Not supported by Chat apps. Support by Chat apps is coming soon. For example, the following JSON creates a datetime picker to schedule an appointment:
|
divider
|
Displays a horizontal line divider between widgets. For example, the following JSON creates a divider:
|
grid
|
Displays a grid with a collection of items. A grid supports any number of columns and items. The number of rows is determined by the upper bounds of the number items divided by the number of columns. A grid with 10 items and 2 columns has 5 rows. A grid with 11 items and 2 columns has 6 rows. For example, the following JSON creates a 2 column grid with a single item:
|
TextParagraph
A paragraph of text that supports formatting. See Text formatting for details.
JSON representation |
---|
{ "text": string } |
Fields | |
---|---|
text
|
The text that's shown in the widget. |
Image
An image that is specified by a URL and can have an
onClick
action.
JSON representation |
---|
{
"imageUrl": string,
"onClick": {
object (
|
Fields | |
---|---|
imageUrl
|
The
For example:
|
onClick
|
When a user clicks on the image, the click triggers this action. |
altText
|
The alternative text of this image, used for accessibility. |
DecoratedText
A widget that displays text with optional decorations such as a label above or below the text, an icon in front of the text, a selection widget or a button after the text.
JSON representation |
---|
{ "icon": { object ( |
Fields | |
---|---|
icon
|
Deprecated in favor of
|
startIcon
|
The icon displayed in front of the text. |
topLabel
|
The text that appears above
|
text
|
Required. The primary text. Supports simple formatting. See Text formatting for formatting details. |
wrapText
|
The wrap text setting. If
Only applies to
|
bottomLabel
|
The text that appears below
|
onClick
|
When users click on
|
Union field
control
. A button, switch, checkbox, or image that appears to the right-hand side of text in the
decoratedText
widget.
control
can be only one of the following:
|
|
button
|
A button that can be clicked to trigger an action. |
switchControl
|
A switch widget can be clicked to change its state and trigger an action. |
endIcon
|
An icon displayed after the text. |
ButtonList
A list of buttons layed out horizontally.
JSON representation |
---|
{
"buttons": [
{
object (
|
Fields | |
---|---|
buttons[]
|
An array of buttons. |
TextInput
A field in which users can enter text. Supports suggestions and on-change actions.
Chat apps receive and can process the value of entered text during form input events. For details about working with form inputs, see Receive form data .
When you need to collect abstract data from users, use a text input. To collect defined data from users, use the selection input widget instead.
JSON representation |
---|
{ "name": string, "label": string, "hintText": string, "value": string, "type": enum ( |
Fields | |
---|---|
name
|
The name by which the text input is identified in a form input event. For details about working with form inputs, see Receive form data . |
label
|
The text that appears above the text input field in the user interface. Specify text that helps the user enter the information your app needs. For example, if you are asking someone's name, but specifically need their surname, write "surname" instead of "name".
Required if
|
hintText
|
Text that appears below the text input field meant to assist users by prompting them to enter a certain value. This text is always visible.
Required if
|
value
|
The value entered by a user, returned as part of a form input event. For details about working with form inputs, see Receive form data . |
type
|
How a text input field appears in the user interface. For example, whether the field is single or multi-line. |
onChangeAction
|
What to do when a change occurs in the text input field. Examples of changes include a user adding to the field, or deleting text. Examples of actions to take include running a custom function or opening a dialog in Google Chat. |
initialSuggestions
|
Suggested values that users can enter. These values appear when users click inside the text input field. As users type, the suggested values dynamically filter to match what the users have typed. For example, a text input field for programming language might suggest Java, JavaScript, Python, and C++. When users start typing "Jav", the list of suggestions filters to show just Java and JavaScript. Suggested values help guide users to enter values that your app can make sense of. When referring to JavaScript, some users might enter "javascript" and others "java script". Suggesting "JavaScript" can standardize how users interact with your app.
When specified,
|
autoCompleteAction
|
Optional. Specify what action to take when the text input field provides suggestions to users who interact with it.
If unspecified, the suggestions are set by
If specified, the app takes the action specified here, such as running a custom function. Supported by Google Workspace Add-ons, but not Chat apps. Support by Chat apps coming soon. |
SelectionInput
A widget that creates a UI item with options for users to select. For example, a dropdown menu or check list.
Chat apps receive and can process the value of entered text during form input events. For details about working with form inputs, see Receive form data .
When you need to collect data from users that matches options you set, use a selection input. To collect abstract data from users, use the text input widget instead.
JSON representation |
---|
{ "name": string, "label": string, "type": enum ( |
Fields | |
---|---|
name
|
The name by which the selection input is identified in a form input event. For details about working with form inputs, see Receive form data . |
label
|
The text that appears above the selection input field in the user interface. Specify text that helps the user enter the information your app needs. For example, if users are selecting the urgency of a work ticket from a drop-down menu, the label might be "Urgency" or "Select urgency". |
type
|
The way that an option appears to users. Different options support different types of interactions. For example, users can enable multiple check boxes, but can only select one value from a dropdown menu. Each selection input supports one type of selection. Mixing check boxes and switches, for example, is not supported. |
items[]
|
An array of the selected items. For example, all the selected check boxes. |
onChangeAction
|
If specified, the form is submitted when the selection changes. If not specified, you must specify a separate button that submits the form. For details about working with form inputs, see Receive form data . |
DateTimePicker
Lets users specify a date, a time, or both a date and a time.
Accepts text input from users, but features an interactive date and time selector that helps users enter correctly-formatted dates and times. If users enter a date or time incorrectly, the widget shows an error that prompts users to enter the correct format.
Not supported by Chat apps. Support by Chat apps coming soon.
JSON representation |
---|
{ "name": string, "label": string, "type": enum ( |
Fields | |
---|---|
name
|
The name by which the datetime picker is identified in a form input event. For details about working with form inputs, see Receive form data . |
label
|
The text that prompts users to enter a date, time, or datetime. Specify text that helps the user enter the information your app needs. For example, if users are setting an appointment, then a label like "Appointment date" or "Appointment date and time" might work well. |
type
|
What kind of date and time input the datetime picker supports. |
valueMsEpoch
|
The value displayed as the default value before user input or previous user input, represented in milliseconds ( Epoch time ).
For
For
For
|
timezoneOffsetDate
|
The number representing the time zone offset from UTC, in minutes. If set, the
|
onChangeAction
|
Triggered when the user clicks Save or Clear from the datetime picker interface. |