Reference documentation and code samples for the Google Apps Chat V1 Client class 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.
Generated from protobuf message google.apps.card.v1.Widget
Namespace
Google \ Apps \ Card \ V1Methods
__construct
Constructor.
data
array
Optional. Data for populating the Message object.
↳ text_paragraph
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>" }
↳ 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" }
↳ decorated_text
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" } }
↳ button_list
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" } } } ] }
↳ text_input
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" } ] } }
↳ selection_input
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 } ] }
↳ date_time_picker
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" }
↳ divider
Google\Apps\Card\V1\Divider
Displays a horizontal line divider between widgets. For example, the following JSON creates a divider: "divider": { }
↳ 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" } } }
↳ 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" } } ] } ] }
↳ horizontal_alignment
int
Specifies whether widgets align to the left, right, or center of a column.
getTextParagraph
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>"
}
hasTextParagraph
setTextParagraph
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>"
}
$this
getImage
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"
}
hasImage
setImage
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"
}
$this
getDecoratedText
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"
}
}
hasDecoratedText
setDecoratedText
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"
}
}
$this
getButtonList
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"
}
}
}
]
}
hasButtonList
setButtonList
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"
}
}
}
]
}
$this
getTextInput
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"
}
]
}
}
hasTextInput
setTextInput
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"
}
]
}
}
$this
getSelectionInput
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
}
]
}
hasSelectionInput
setSelectionInput
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
}
]
}
$this
getDateTimePicker
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"
}
hasDateTimePicker
setDateTimePicker
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"
}
$this
getDivider
Displays a horizontal line divider between widgets.
For example, the following JSON creates a divider:
"divider": {
}
hasDivider
setDivider
Displays a horizontal line divider between widgets.
For example, the following JSON creates a divider:
"divider": {
}
$this
getGrid
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"
}
}
}
hasGrid
setGrid
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"
}
}
}
$this
getColumns
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"
}
}
]
}
]
}
hasColumns
setColumns
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"
}
}
]
}
]
}
$this
getHorizontalAlignment
Specifies whether widgets align to the left, right, or center of a column.
int
setHorizontalAlignment
Specifies whether widgets align to the left, right, or center of a column.
var
int
$this
getData
string
