Class Column
Stay organized with collections
Save and categorize content based on your preferences.
Column
A column.
Available for Google Chat apps and Google Workspace add-ons.
const columnWidget = CardService.newTextParagraph();
const column =
CardService.newColumn()
.setHorizontalSizeStyle(
CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
.setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)
.setVerticalAlignment(CardService.VerticalAlignment.CENTER)
.addWidget(columnWidget);
Detailed documentation
setHorizontalAlignment(horizontalAlignment)
Sets the HorizontalAlignment
of the Column
. Optional.
const column = CardService.newColumn().setHorizontalAlignment(
CardService.HorizontalAlignment.CENTER,
);
Parameters
Name | Type | Description |
horizontalAlignment | HorizontalAlignment | The horizontal alignment of the column. |
Return
Column
— This object, for chaining.
setHorizontalSizeStyle(horizontalSizeStyle)
Sets the HorizontalSizeStyle
of the Column. Optional.
const column = CardService.newColumn().setHorizontalSizeStyle(
CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE,
);
Parameters
Return
Column
— This object, for chaining.
setVerticalAlignment(verticalAlignment)
Sets the VerticalAlignment
of the Column
. Optional.
const column = CardService.newColumn().setVerticalAlignment(
CardService.VerticalAlignment.CENTER,
);
Parameters
Name | Type | Description |
verticalAlignment | VerticalAlignment | The vertical alignment of the column. |
Return
Column
— This object, for chaining.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-01-30 UTC.
[null,null,["Last updated 2025-01-30 UTC."],[[["\u003cp\u003eA column is a UI element available for Google Chat apps and Google Workspace Add-ons used to arrange widgets vertically within a card.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can add various widgets like text paragraphs, images, buttons, and input fields to a column using the \u003ccode\u003eaddWidget()\u003c/code\u003e method.\u003c/p\u003e\n"],["\u003cp\u003eColumns offer customization options for horizontal and vertical alignment, as well as horizontal size, through methods like \u003ccode\u003esetHorizontalAlignment()\u003c/code\u003e, \u003ccode\u003esetVerticalAlignment()\u003c/code\u003e, and \u003ccode\u003esetHorizontalSizeStyle()\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eWidgets within a column are displayed in the order they are added using the \u003ccode\u003eaddWidget\u003c/code\u003e method, allowing for structured layout design.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003esetHorizontalAlignment\u003c/code\u003e, \u003ccode\u003esetHorizontalSizeStyle\u003c/code\u003e, and \u003ccode\u003esetVerticalAlignment\u003c/code\u003e methods are optional and can be used to fine-tune the appearance and layout behavior of the column.\u003c/p\u003e\n"]]],["The core content describes how to use a `Column` within Google Chat apps and Workspace add-ons. Key actions involve creating a `Column` using `CardService.newColumn()`, adding various widgets like `TextParagraph` or `Image` using `addWidget()`, and setting alignment and size styles. `setHorizontalAlignment()`, `setHorizontalSizeStyle()`, and `setVerticalAlignment()` allow for adjusting the column's layout. The method `addWidget` allow adding widget, the order of the widget will be the display order.\n"],null,["# Class Column\n\nColumn\n\nA column.\n\nAvailable for Google Chat apps and Google Workspace add-ons.\n\n```javascript\nconst columnWidget = CardService.newTextParagraph();\nconst column =\n CardService.newColumn()\n .setHorizontalSizeStyle(\n CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)\n .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)\n .setVerticalAlignment(CardService.VerticalAlignment.CENTER)\n .addWidget(columnWidget);\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|---------------------------------------------------------------------------------------------|-------------|--------------------------------------------------------------------------------------------------------------|\n| [addWidget(widget)](#addWidget(Widget)) | [Column](#) | Adds a widget to the column. |\n| [setHorizontalAlignment(horizontalAlignment)](#setHorizontalAlignment(HorizontalAlignment)) | [Column](#) | Sets the [HorizontalAlignment](/apps-script/reference/card-service/horizontal-alignment) of the [Column](#). |\n| [setHorizontalSizeStyle(horizontalSizeStyle)](#setHorizontalSizeStyle(HorizontalSizeStyle)) | [Column](#) | Sets the [HorizontalSizeStyle](/apps-script/reference/card-service/horizontal-size-style) of the Column. |\n| [setVerticalAlignment(verticalAlignment)](#setVerticalAlignment(VerticalAlignment)) | [Column](#) | Sets the [VerticalAlignment](/apps-script/reference/card-service/vertical-alignment) of the [Column](#). |\n\nDetailed documentation\n----------------------\n\n### `add``Widget(widget)`\n\nAdds a widget to the column.\n\nWidgets are displayed in the order they are added. You can add the following widgets to a\ncolumn:\n\n- [TextParagraph](/apps-script/reference/card-service/text-paragraph)\n- [Image](/apps-script/reference/card-service/image)\n- [DecoratedText](/apps-script/reference/card-service/decorated-text)\n- [ButtonSet](/apps-script/reference/card-service/button-set)\n- [TextInput](/apps-script/reference/card-service/text-input)\n- [SelectionInput](/apps-script/reference/card-service/selection-input)\n- [DateTimePicker](/apps-script/reference/card-service/date-time-picker)\n\n```javascript\nconst column = CardService.newColumn().addWidget(\n CardService.newTextParagraph().setText('This is a text paragraph widget'),\n);\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|----------|------------------------------------------------------|----------------------------------|\n| `widget` | [Widget](/apps-script/reference/card-service/widget) | The widget to add to the column. |\n\n#### Return\n\n\n[Column](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Horizontal``Alignment(horizontalAlignment)`\n\nSets the [HorizontalAlignment](/apps-script/reference/card-service/horizontal-alignment) of the [Column](#). Optional.\n\n```javascript\nconst column = CardService.newColumn().setHorizontalAlignment(\n CardService.HorizontalAlignment.CENTER,\n);\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|-------------------------|---------------------------------------------------------------------------------|-----------------------------------------|\n| `horizontal``Alignment` | [HorizontalAlignment](/apps-script/reference/card-service/horizontal-alignment) | The horizontal alignment of the column. |\n\n#### Return\n\n\n[Column](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Horizontal``Size``Style(horizontalSizeStyle)`\n\nSets the [HorizontalSizeStyle](/apps-script/reference/card-service/horizontal-size-style) of the Column. Optional.\n\n```javascript\nconst column = CardService.newColumn().setHorizontalSizeStyle(\n CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE,\n);\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|---------------------------|----------------------------------------------------------------------------------|------------------------------------|\n| `horizontal``Size``Style` | [HorizontalSizeStyle](/apps-script/reference/card-service/horizontal-size-style) | The horizontal size of the column. |\n\n#### Return\n\n\n[Column](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Vertical``Alignment(verticalAlignment)`\n\nSets the [VerticalAlignment](/apps-script/reference/card-service/vertical-alignment) of the [Column](#). Optional.\n\n```javascript\nconst column = CardService.newColumn().setVerticalAlignment(\n CardService.VerticalAlignment.CENTER,\n);\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|-----------------------|-----------------------------------------------------------------------------|---------------------------------------|\n| `vertical``Alignment` | [VerticalAlignment](/apps-script/reference/card-service/vertical-alignment) | The vertical alignment of the column. |\n\n#### Return\n\n\n[Column](#) --- This object, for chaining."]]