Google Apps Chat V1 Client - Class Widget (0.3.0)

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 \ V1

Methods

__construct

Constructor.

Parameters
Name	Description
`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>"
}

Returns
Type	Description
`Google\Apps\Card\V1\TextParagraph\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\TextParagraph`

Returns
Type	Description
`$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"
}

Returns
Type	Description
`Google\Apps\Card\V1\Image\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\Image`

Returns
Type	Description
`$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"
  }
}

Returns
Type	Description
`Google\Apps\Card\V1\DecoratedText\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\DecoratedText`

Returns
Type	Description
`$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"
        }
      }
    }
  ]
}

Returns
Type	Description
`Google\Apps\Card\V1\ButtonList\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\ButtonList`

Returns
Type	Description
`$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"
      }
    ]
  }
}

Returns
Type	Description
`Google\Apps\Card\V1\TextInput\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\TextInput`

Returns
Type	Description
`$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
    }
  ]
}

Returns
Type	Description
`Google\Apps\Card\V1\SelectionInput\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\SelectionInput`

Returns
Type	Description
`$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"
}

Returns
Type	Description
`Google\Apps\Card\V1\DateTimePicker\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\DateTimePicker`

Returns
Type	Description
`$this`

getDivider

Displays a horizontal line divider between widgets.

For example, the following JSON creates a divider:

"divider": {
}

Returns
Type	Description
`Google\Apps\Card\V1\Divider\|null`

hasDivider

setDivider

Displays a horizontal line divider between widgets.

For example, the following JSON creates a divider:

"divider": {
}

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\Divider`

Returns
Type	Description
`$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"
    }
  }
}

Returns
Type	Description
`Google\Apps\Card\V1\Grid\|null`

hasGrid

setGrid

Displays a grid with a collection of items.

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\Grid`

Returns
Type	Description
`$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"
          }
        }
      ]
    }
  ]
}

Returns
Type	Description
`Google\Apps\Card\V1\Columns\|null`

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

Parameter
Name	Description
`var`	`Google\Apps\Card\V1\Columns`

Returns
Type	Description
`$this`

getHorizontalAlignment

Specifies whether widgets align to the left, right, or center of a column.

Returns
Type	Description
`int`

setHorizontalAlignment

Specifies whether widgets align to the left, right, or center of a column.

Parameter
Name	Description
`var`	`int`

Returns
Type	Description
`$this`

getData

Returns
Type	Description
`string`