googleapis_tonic_google_chat_v1::google::apps::card::v1::widget

Enum Data

pub enum Data {
    TextParagraph(TextParagraph),
    Image(Image),
    DecoratedText(DecoratedText),
    ButtonList(ButtonList),
    TextInput(TextInput),
    SelectionInput(SelectionInput),
    DateTimePicker(DateTimePicker),
    Divider(Divider),
    Grid(Grid),
    Columns(Columns),
}

Expand description

A widget can only have one of the following items. You can use multiple widget fields to display more items.

Variants§

§

TextParagraph(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(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"
}

§

DecoratedText(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"
   }
}

§

ButtonList(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">
         }
       }
     }
   ]
}

§

TextInput(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"
       }
     ]
   }
}

§

SelectionInput(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
     }
   ]
}

§

DateTimePicker(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(Divider)

Displays a horizontal line divider between widgets.

For example, the following JSON creates a divider:

"divider": {
}

§

Grid(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(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"
           }
         }
       ]
     }
   ]
}