The Divider widget displays a horizontal line spanning the width of a card
between stacked widgets. The line is a visual divider that helps users
distinguish between one widget and another, making cards easier to scan and
understand.
Example: dividers between widgets
The following image displays a card consisting of Divider widgets between other types of widgets.
divider widgets.
Here's the card's JSON:
JSON
{
"cardsV2": [
{
"cardId": "exampleCard",
"card": {
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "<b>A card with several types of widgets separated by divider widgets.</b>"
}
},
{
"textParagraph": {
"text": "Set a date and time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_and_time",
"label": "meeting",
"type": 'DATE_AND_TIME',
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just date:"
}
},
{
"divider": {}
},
{
"selectionInput": {
"type": "RADIO_BUTTON",
"label": "Choose an option",
"name": "contactType",
"items": [
{
"text": "Option 1",
"value": "Op1",
"selected": false
},
{
"text": "Option 2",
"value": "Op2",
"selected": false
},
{
"text": "Option 3",
"value": "Op3",
"selected": true
}
]
}
},
{
"textParagraph": {
"text": "Click a button:"
}
},
{
"divider": {}
},
{
"buttonList": {
"buttons": [
{
"text": "Open a hyperlink",
"onClick": {
"openLink": {
"url": "https://developers.google.com/chat",
}
}
},
{
"text": "Run a custom function",
"onClick": {
"action": {
"function": "goToView",
"parameters": [
{
"key": "viewType",
"value": "BIRD EYE VIEW",
}
],
}
}
}
]
}
}
]
}
]
}
}
]
}
JSON representation
Displays a divider between widgets as a horizontal line.
For example, the following JSON creates a divider:
"divider": {}