Columns

The Columns widget displays up to 2 columns in a card message or dialog. You can add widgets to each column; the widgets appear in the order that they are specified. For an example in Google Chat apps, see Columns.

The height of each column is determined by the taller column. For example, if the first column is taller than the second column, both columns have the height of the first column. Because each column can contain a different number of widgets, you can't define rows or align widgets between the columns.

Columns are displayed side-by-side. You can customize the width of each column using the HorizontalSizeStyle field. If the user's screen width is too narrow, the second column wraps 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.

To include more than 2 columns, or to use rows, use the Grid widget.

Google Chat apps :


Design and preview cards with the Card Builder.

Open the Card Builder

Example: a card with two columns of text

The following displays a card with a Columns widget that features 2 columns of text. To view only the columns layout and to collapse the code sample, click Collapse. When space is constrained, like in the following example, the second column wraps below the first column.

JSON representation and fields

JSON representation
{
  "columnItems": [
    {
      object (Column)
    }
  ]
}
Fields
columnItems[]

object (Column)

An array of columns. You can include up to 2 columns in a card or dialog.

Column

A column.

Google Chat apps :

JSON representation
{
  "horizontalSizeStyle": enum (HorizontalSizeStyle),
  "horizontalAlignment": enum (HorizontalAlignment),
  "verticalAlignment": enum (VerticalAlignment),
  "widgets": [
    {
      object (Widgets)
    }
  ]
}
Fields
horizontalSizeStyle

enum (HorizontalSizeStyle)

Specifies how a column fills the width of the card.

Google Chat apps :

horizontalAlignment

enum (HorizontalAlignment)

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

verticalAlignment

enum (VerticalAlignment)

Specifies whether widgets align to the top, bottom, or center of a column.

Google Chat apps :

widgets[]

object (Widgets)

An array of widgets included in a column. Widgets appear in the order that they are specified.

HorizontalSizeStyle

Specifies how a column fills the width of the card. The width of each column depends on both the HorizontalSizeStyle and the width of the widgets within the column.

Google Chat apps :

Enums
HORIZONTAL_SIZE_STYLE_UNSPECIFIED Don't use. Unspecified.
FILL_AVAILABLE_SPACE Default value. Column fills the available space, up to 70% of the card's width. If both columns are set to FILL_AVAILABLE_SPACE, each column fills 50% of the space.
FILL_MINIMUM_SPACE Column fills the least amount of space possible and no more than 30% of the card's width.

HorizontalAlignment

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

Google Chat apps :

Enums
HORIZONTAL_ALIGNMENT_UNSPECIFIED Don't use. Unspecified.
START Default value. Aligns widgets to the start position of the column. For left-to-right layouts, aligns to the left. For right-to-left layouts, aligns to the right.
CENTER Aligns widgets to the center of the column.
END Aligns widgets to the end position of the column. For left-to-right layouts, aligns widgets to the right. For right-to-left layouts, aligns widgets to the left.

VerticalAlignment

Specifies whether widgets align to the top, bottom, or center of a column.

Google Chat apps :

Enums
VERTICAL_ALIGNMENT_UNSPECIFIED Don't use. Unspecified.
CENTER Default value. Aligns widgets to the center of a column.
TOP Aligns widgets to the top of a column.
BOTTOM Aligns widgets to the bottom of a column.

Widgets

The supported widgets that you can include in a column.

Google Chat apps :

JSON representation
{

  // Union field data can be only one of the following:
  "textParagraph": {
    object (TextParagraph)
  },
  "image": {
    object (Image)
  },
  "decoratedText": {
    object (DecoratedText)
  },
  "buttonList": {
    object (ButtonList)
  },
  "textInput": {
    object (TextInput)
  },
  "selectionInput": {
    object (SelectionInput)
  },
  "dateTimePicker": {
    object (DateTimePicker)
  }
  // End of list of possible types for union field data.
}
Fields

Union field data.

data can be only one of the following:

textParagraph

object (TextParagraph)

TextParagraph widget.

image

object (Image)

Image widget.

decoratedText

object (DecoratedText)

DecoratedText widget.

buttonList

object (ButtonList)

ButtonList widget.

textInput

object (TextInput)

TextInput widget.

selectionInput

object (SelectionInput)

SelectionInput widget.

dateTimePicker

object (DateTimePicker)

DateTimePicker widget.

Troubleshoot

When a Google Chat app or card returns an error, the Chat interface surfaces a message saying "Something went wrong." or "Unable to process your request." Sometimes the Chat UI doesn't display any error message, but the Chat app or card produces an unexpected result; for example, a card message might not appear.

Although an error message might not display in the Chat UI, descriptive error messages and log data are available to help you fix errors when error logging for Chat apps is turned on. For help viewing, debugging, and fixing errors, see Troubleshoot and fix Google Chat errors.