Class Columns
Page Summary
The Columns widget displays up to 2 columns in a card or dialog, where widgets can be added to each column and appear in the order specified.
The height of both columns is determined by the taller column, and rows or widget alignment between columns cannot be defined.
Columns are displayed side-by-side, and their width can be customized, with the second column wrapping below the first on narrower screens at specific pixel widths for web, iOS, and Android devices.
This feature is available for Google Chat apps and Google Workspace add-ons, specifically in dialogs displayed from email drafts and the Add attachment menu in Google Calendar events.
The
addColumn(column)method adds up to two child columns to the Columns widget, and thesetWrapStyle(wrapStyle)method controls how the columns resize based on screen width.
TheColumns widget displays up to 2 columns in a card or dialog. You can add widgets toeachColumn; the widgets appear in the order that they are specified. For an example inGoogle Chat apps, seeColumns.
The height of each column is determined by the taller column. For example, if the first columnis taller than the second column, both columns have the height of the first column. Because eachcolumn can contain a different number of widgets, you can't define rows or align widgets betweenthe columns.
Columns are displayed side-by-side. You can customize the width of each column using theHorizontal field. If the user's screen width is too narrow, the second columnwraps below the first:
- On web, the second column wraps if the screen width is less than or equal to 480 pixels.
- On iOS devices, the second column wraps if the screen width is less than or equal to 300 pt.
- On Android devices, the second column wraps if the screen width is less than or equal to 320 dp.
Available for Google Chat apps and Google Workspace add-ons. The add-on UIs that supportcolumns include:
- The dialog displayed when users open the add-on from an email draft.
- The dialog displayed when users open the add-on from theAdd attachment menu in a Google Calendar event.
// Build a column that is aligned in the center and fills the space:constcolumn=CardService.newColumn().setHorizontalSizeStyle(CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE).setHorizontalAlignment(CardService.HorizontalAlignment.CENTER).setVerticalAlignment(CardService.VerticalAlignment.CENTER);constcolumns=CardService.newColumns().addColumn(column).setWrapStyle(CardService.WrapStyle.WRAP);
Methods
| Method | Return type | Brief description |
|---|---|---|
add | Columns | Adds aColumn to the Columns widget. |
add | Widget | Adds the event action that can be performed on the widget. |
set | Widget | Sets the unique ID assigned that's used to identify the widget to be mutated. |
set | Widget | Sets the visibility of the widget. |
set | Columns | Sets the wrap style of the columns, controls how the column resizes based on screen width. |
Detailed documentation
addColumn(column)
Adds aColumn to the Columns widget. Columns are displayed in the order in whichthey're added. You can add up to two columns.
constcolumns=CardService.newColumns().addColumn(CardService.newColumn());
Parameters
| Name | Type | Description |
|---|---|---|
column | Column | A child column to add to the Columns widget. |
Return
Columns — This object, for chaining.
addEventAction(eventAction)
Adds the event action that can be performed on the widget.
Parameters
| Name | Type | Description |
|---|---|---|
event | Event | TheEvent to be added. |
Return
Widget — The Object, for chaining.
setId(id)
Sets the unique ID assigned that's used to identify the widget to be mutated. Widget mutationis only supported in Add-Ons.
Parameters
| Name | Type | Description |
|---|---|---|
id | String | The id of the widget, with a limit of 64 characters and in format of `[a-zA-Z0-9-]+`. |
Return
Widget — This object, for chaining.
setVisibility(visibility)
Sets the visibility of the widget. The default value is `VISIBLE`.
Parameters
| Name | Type | Description |
|---|---|---|
visibility | Visibility | TheVisibility of the widget. |
Return
Widget — The Object, for chaining.
setWrapStyle(wrapStyle)
Sets the wrap style of the columns, controls how the column resizes based on screen width.
constcolumns=CardService.newColumns().addColumn(CardService.newColumn()).setWrapStyle(CardService.WrapStyle.WRAP);
Parameters
| Name | Type | Description |
|---|---|---|
wrap | Wrap | The wrap style to set for the columns. |
Return
Columns — This object, for chaining.
Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-12-03 UTC.