Reference documentation and code samples for the Google Chat V1 API class Google::Apps::Card::V1::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.
Inherits
- Object
Extended By
- Google::Protobuf::MessageExts::ClassMethods
Includes
- Google::Protobuf::MessageExts
Methods
#button_list
def
button_list
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
ButtonList
- ( ::Google::Apps::Card::V1::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:
"buttonList": { "buttons": [ { "text": "Edit", "color": { "red": 0, "green": 0, "blue": 1, "alpha": 1 }, "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }
Note: The following fields are mutually exclusive:
button_list
,text_paragraph
,image
,decorated_text
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#button_list=
def
button_list=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
ButtonList
- value( ::Google::Apps::Card::V1::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:
"buttonList": { "buttons": [ { "text": "Edit", "color": { "red": 0, "green": 0, "blue": 1, "alpha": 1 }, "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }
Note: The following fields are mutually exclusive:
button_list
,text_paragraph
,image
,decorated_text
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::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:
"buttonList": { "buttons": [ { "text": "Edit", "color": { "red": 0, "green": 0, "blue": 1, "alpha": 1 }, "disabled": true, }, { "icon": { "knownIcon": "INVITE", "altText": "check calendar" }, "onClick": { "openLink": { "url": "https://example.com/calendar" } } } ] }
Note: The following fields are mutually exclusive:
button_list
,text_paragraph
,image
,decorated_text
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#columns
def
columns
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
Columns
- ( ::Google::Apps::Card::V1::Columns
) — Displays up to 2 columns.
To include more than 2 columns, or to use rows, use the
Grid
widget.For example, the following JSON creates 2 columns that each contain text paragraphs:
"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" } } ] } ] }
Note: The following fields are mutually exclusive:
columns
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#columns=
def
columns=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
Columns
- value( ::Google::Apps::Card::V1::Columns
) — Displays up to 2 columns.
To include more than 2 columns, or to use rows, use the
Grid
widget.For example, the following JSON creates 2 columns that each contain text paragraphs:
"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" } } ] } ] }
Note: The following fields are mutually exclusive:
columns
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::Columns
) — Displays up to 2 columns.
To include more than 2 columns, or to use rows, use the
Grid
widget.For example, the following JSON creates 2 columns that each contain text paragraphs:
"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" } } ] } ] }
Note: The following fields are mutually exclusive:
columns
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#date_time_picker
def
date_time_picker
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
DateTimePicker
- ( ::Google::Apps::Card::V1::DateTimePicker
) — Displays a widget that lets users input a date, time, or date and time.
For example, the following JSON creates a date time picker to schedule an appointment:
"dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
Note: The following fields are mutually exclusive:
date_time_picker
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#date_time_picker=
def
date_time_picker=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
DateTimePicker
- value( ::Google::Apps::Card::V1::DateTimePicker
) — Displays a widget that lets users input a date, time, or date and time.
For example, the following JSON creates a date time picker to schedule an appointment:
"dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
Note: The following fields are mutually exclusive:
date_time_picker
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::DateTimePicker
) — Displays a widget that lets users input a date, time, or date and time.
For example, the following JSON creates a date time picker to schedule an appointment:
"dateTimePicker": { "name": "appointment_time", "label": "Book your appointment at:", "type": "DATE_AND_TIME", "valueMsEpoch": "796435200000" }
Note: The following fields are mutually exclusive:
date_time_picker
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#decorated_text
def
decorated_text
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
DecoratedText
- ( ::Google::Apps::Card::V1::DecoratedText
) — Displays a decorated text item.
For example, the following JSON creates a decorated text widget showing email address:
"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" } }
Note: The following fields are mutually exclusive:
decorated_text
,text_paragraph
,image
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#decorated_text=
def
decorated_text=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
DecoratedText
- value( ::Google::Apps::Card::V1::DecoratedText
) — Displays a decorated text item.
For example, the following JSON creates a decorated text widget showing email address:
"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" } }
Note: The following fields are mutually exclusive:
decorated_text
,text_paragraph
,image
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::DecoratedText
) — Displays a decorated text item.
For example, the following JSON creates a decorated text widget showing email address:
"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" } }
Note: The following fields are mutually exclusive:
decorated_text
,text_paragraph
,image
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#divider
def
divider
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
Divider
- ( ::Google::Apps::Card::V1::Divider
) — Displays a horizontal line divider between widgets.
For example, the following JSON creates a divider:
"divider": { }
Note: The following fields are mutually exclusive:
divider
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#divider=
def
divider=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
Divider
- value( ::Google::Apps::Card::V1::Divider
) — Displays a horizontal line divider between widgets.
For example, the following JSON creates a divider:
"divider": { }
Note: The following fields are mutually exclusive:
divider
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::Divider
) — Displays a horizontal line divider between widgets.
For example, the following JSON creates a divider:
"divider": { }
Note: The following fields are mutually exclusive:
divider
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#grid
def
grid
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
Grid
- ( ::Google::Apps::Card::V1::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.
Google Workspace Add-ons and Chat apps :
For example, the following JSON creates a 2 column grid with a single item:
"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" } } }
Note: The following fields are mutually exclusive:
grid
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#grid=
def
grid=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
Grid
- value( ::Google::Apps::Card::V1::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.
Google Workspace Add-ons and Chat apps :
For example, the following JSON creates a 2 column grid with a single item:
"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" } } }
Note: The following fields are mutually exclusive:
grid
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::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.
Google Workspace Add-ons and Chat apps :
For example, the following JSON creates a 2 column grid with a single item:
"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" } } }
Note: The following fields are mutually exclusive:
grid
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#horizontal_alignment
def
horizontal_alignment
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
Widget
::
HorizontalAlignment
- ( ::Google::Apps::Card::V1::Widget::HorizontalAlignment ) — Specifies whether widgets align to the left, right, or center of a column.
#horizontal_alignment=
def
horizontal_alignment=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
Widget
::
HorizontalAlignment
- value( ::Google::Apps::Card::V1::Widget::HorizontalAlignment ) — Specifies whether widgets align to the left, right, or center of a column.
- ( ::Google::Apps::Card::V1::Widget::HorizontalAlignment ) — Specifies whether widgets align to the left, right, or center of a column.
#image
def
image
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
Image
- ( ::Google::Apps::Card::V1::Image
) — Displays an image.
For example, the following JSON creates an image with alternative text:
"image": { "imageUrl": "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
Note: The following fields are mutually exclusive:
image
,text_paragraph
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#image=
def
image=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
Image
- value( ::Google::Apps::Card::V1::Image
) — Displays an image.
For example, the following JSON creates an image with alternative text:
"image": { "imageUrl": "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
Note: The following fields are mutually exclusive:
image
,text_paragraph
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::Image
) — Displays an image.
For example, the following JSON creates an image with alternative text:
"image": { "imageUrl": "https://developers.google.com/workspace/chat/images/quickstart-app-avatar.png", "altText": "Chat app avatar" }
Note: The following fields are mutually exclusive:
image
,text_paragraph
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#selection_input
def
selection_input
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
SelectionInput
- ( ::Google::Apps::Card::V1::SelectionInput
) — Displays a selection control that lets users select items. Selection
controls can be checkboxes, radio buttons, switches, or dropdown menus.
For example, the following JSON creates a dropdown menu that lets users choose a size:
"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 } ] }
Note: The following fields are mutually exclusive:
selection_input
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#selection_input=
def
selection_input=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
SelectionInput
- value( ::Google::Apps::Card::V1::SelectionInput
) — Displays a selection control that lets users select items. Selection
controls can be checkboxes, radio buttons, switches, or dropdown menus.
For example, the following JSON creates a dropdown menu that lets users choose a size:
"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 } ] }
Note: The following fields are mutually exclusive:
selection_input
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::SelectionInput
) — Displays a selection control that lets users select items. Selection
controls can be checkboxes, radio buttons, switches, or dropdown menus.
For example, the following JSON creates a dropdown menu that lets users choose a size:
"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 } ] }
Note: The following fields are mutually exclusive:
selection_input
,text_paragraph
,image
,decorated_text
,button_list
,text_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#text_input
def
text_input
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
TextInput
- ( ::Google::Apps::Card::V1::TextInput
) — Displays a text box that users can type into.
For example, the following JSON creates a text input for an email address:
"textInput": { "name": "mailing_address", "label": "Mailing Address" }
As another example, the following JSON creates a text input for a programming language with static suggestions:
"textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }
Note: The following fields are mutually exclusive:
text_input
,text_paragraph
,image
,decorated_text
,button_list
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#text_input=
def
text_input=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
TextInput
- value( ::Google::Apps::Card::V1::TextInput
) — Displays a text box that users can type into.
For example, the following JSON creates a text input for an email address:
"textInput": { "name": "mailing_address", "label": "Mailing Address" }
As another example, the following JSON creates a text input for a programming language with static suggestions:
"textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }
Note: The following fields are mutually exclusive:
text_input
,text_paragraph
,image
,decorated_text
,button_list
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::TextInput
) — Displays a text box that users can type into.
For example, the following JSON creates a text input for an email address:
"textInput": { "name": "mailing_address", "label": "Mailing Address" }
As another example, the following JSON creates a text input for a programming language with static suggestions:
"textInput": { "name": "preferred_programing_language", "label": "Preferred Language", "initialSuggestions": { "items": [ { "text": "C++" }, { "text": "Java" }, { "text": "JavaScript" }, { "text": "Python" } ] } }
Note: The following fields are mutually exclusive:
text_input
,text_paragraph
,image
,decorated_text
,button_list
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#text_paragraph
def
text_paragraph
()
-
>
::
Google
::
Apps
::
Card
::
V1
::
TextParagraph
- ( ::Google::Apps::Card::V1::TextParagraph
) — Displays a text paragraph. Supports simple HTML formatted text. For more
information about formatting text, see Formatting text in Google Chat
apps
and Formatting
text in Google Workspace
Add-ons
.
For example, the following JSON creates a bolded text:
"textParagraph": { "text": " <b>bold text</b>" }
Note: The following fields are mutually exclusive:
text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
#text_paragraph=
def
text_paragraph=
(
value
)
-
>
::
Google
::
Apps
::
Card
::
V1
::
TextParagraph
- value( ::Google::Apps::Card::V1::TextParagraph
) — Displays a text paragraph. Supports simple HTML formatted text. For more
information about formatting text, see Formatting text in Google Chat
apps
and Formatting
text in Google Workspace
Add-ons
.
For example, the following JSON creates a bolded text:
"textParagraph": { "text": " <b>bold text</b>" }
Note: The following fields are mutually exclusive:
text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.
- ( ::Google::Apps::Card::V1::TextParagraph
) — Displays a text paragraph. Supports simple HTML formatted text. For more
information about formatting text, see Formatting text in Google Chat
apps
and Formatting
text in Google Workspace
Add-ons
.
For example, the following JSON creates a bolded text:
"textParagraph": { "text": " <b>bold text</b>" }
Note: The following fields are mutually exclusive:
text_paragraph
,image
,decorated_text
,button_list
,text_input
,selection_input
,date_time_picker
,divider
,grid
,columns
. If a field in that set is populated, all other fields in the set will automatically be cleared.