Class Columns
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Colonnes
Le widget Columns affiche jusqu'à deux colonnes dans une fiche ou une boîte de dialogue. Vous pouvez ajouter des widgets à chaque Column. Les widgets s'affichent dans l'ordre dans lequel ils sont spécifiés. Pour obtenir un exemple dans les applications Google Chat, consultez la section Colonnes.
La hauteur de chaque colonne est déterminée par la colonne la plus haute. Par exemple, si la première colonne est plus haute que la deuxième, les deux colonnes ont la hauteur de la première. Étant donné que chaque colonne peut contenir un nombre différent de widgets, vous ne pouvez pas définir de lignes ni aligner les widgets entre les colonnes.
Les colonnes sont affichées côte à côte. Vous pouvez personnaliser la largeur de chaque colonne à l'aide du champ HorizontalSizeStyle. Si la largeur de l'écran de l'utilisateur est trop étroite, la deuxième colonne se plie sous la première:
- Sur le Web, la deuxième colonne se plie si la largeur de l'écran est inférieure ou égale à 480 pixels.
- Sur les appareils iOS, la deuxième colonne se plie si la largeur de l'écran est inférieure ou égale à 300 pt.
- Sur les appareils Android, la deuxième colonne se plie si la largeur de l'écran est inférieure ou égale à 320 dp.
Disponible pour les applications Google Chat et les modules complémentaires Google Workspace. Les UI de modules complémentaires compatibles avec les colonnes incluent les suivantes:
- Boîte de dialogue affichée lorsque les utilisateurs ouvrent le module complémentaire à partir d'un brouillon d'e-mail.
- Boîte de dialogue affichée lorsque les utilisateurs ouvrent le module complémentaire à partir du menu Ajouter une pièce jointe dans un événement Google Agenda.
// Build a column that is aligned in the center and fills the space:
const column =
CardService.newColumn()
.setHorizontalSizeStyle(
CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)
.setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)
.setVerticalAlignment(CardService.VerticalAlignment.CENTER);
const columns = CardService.newColumns().addColumn(column).setWrapStyle(
CardService.WrapStyle.WRAP);
Documentation détaillée
addColumn(column)
Ajoute un Column au widget "Colonnes". Les colonnes s'affichent dans l'ordre dans lequel elles sont ajoutées. Vous pouvez ajouter jusqu'à deux colonnes.
const columns = CardService.newColumns().addColumn(CardService.newColumn());
Paramètres
| Nom | Type | Description |
column | Column | Colonne enfant à ajouter au widget "Columns" (Colonnes). |
Renvois
Columns : cet objet, pour le chaînage.
setWrapStyle(wrapStyle)
Définit le style de retour à la ligne des colonnes et contrôle la façon dont les colonnes se redimensionnent en fonction de la largeur de l'écran.
const columns = CardService.newColumns()
.addColumn(CardService.newColumn())
.setWrapStyle(CardService.WrapStyle.WRAP);
Paramètres
| Nom | Type | Description |
wrapStyle | WrapStyle | Style de retour à la ligne à définir pour les colonnes. |
Renvois
Columns : cet objet, pour le chaînage.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/26 (UTC).
[null,null,["Dernière mise à jour le 2025/07/26 (UTC)."],[[["\u003cp\u003eThe Columns widget allows displaying up to two columns within cards or dialogs, with widgets arranged vertically within each column.\u003c/p\u003e\n"],["\u003cp\u003eColumn height is determined by the taller column, and widgets cannot be aligned across columns or organized into rows.\u003c/p\u003e\n"],["\u003cp\u003eColumns are displayed side-by-side and wrap to a vertical layout on smaller screens based on specified screen width thresholds.\u003c/p\u003e\n"],["\u003cp\u003eCustomization options include adjusting column width and controlling wrapping behavior with \u003ccode\u003eHorizontalSizeStyle\u003c/code\u003e and \u003ccode\u003eWrapStyle\u003c/code\u003e respectively.\u003c/p\u003e\n"],["\u003cp\u003eThis widget is available for Google Chat apps and specific Google Workspace Add-ons, like dialogs in email drafts or Calendar event attachments.\u003c/p\u003e\n"]]],["The Columns widget displays up to two columns in a card or dialog, with widgets added to each column in a specified order. Column height is determined by the taller column, and widths can be customized. If the screen is too narrow, the second column wraps below the first, with specific pixel/point/dp thresholds for web, iOS, and Android devices. Key actions include adding columns using `addColumn()` and controlling resizing with `setWrapStyle()`. These features are available for Google Chat and Workspace add-ons.\n"],null,["# Class Columns\n\nColumns\n\nThe [Columns](#) widget displays up to 2 columns in a card or dialog. You can add widgets to\neach [Column](/apps-script/reference/card-service/column); the widgets appear in the order that they are specified. For an example in\nGoogle Chat apps, see [Columns](https://developers.google.com/workspace/chat/format-structure-card-dialog#display_cards_and_dialogs_in_columns).\n\nThe height of each column is determined by the taller column. For example, if the first column\nis taller than the second column, both columns have the height of the first column. Because each\ncolumn can contain a different number of widgets, you can't define rows or align widgets between\nthe columns.\n\nColumns are displayed side-by-side. You can customize the width of each column using the\n[HorizontalSizeStyle](/apps-script/reference/card-service/horizontal-size-style) field. If the user's screen width is too narrow, the second column\nwraps below the first:\n\n- On web, the second column wraps if the screen width is less than or equal to 480 pixels.\n- On iOS devices, the second column wraps if the screen width is less than or equal to 300 pt.\n- On Android devices, the second column wraps if the screen width is less than or equal to 320 dp.\n\nAvailable for Google Chat apps and Google Workspace add-ons. The add-on UIs that support\ncolumns include:\n\n- The dialog displayed when users open the add-on from an email draft.\n- The dialog displayed when users open the add-on from the **Add attachment** menu in a Google Calendar event. \n\n ```javascript\n // Build a column that is aligned in the center and fills the space:\n const column =\n CardService.newColumn()\n .setHorizontalSizeStyle(\n CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE)\n .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER)\n .setVerticalAlignment(CardService.VerticalAlignment.CENTER);\n const columns = CardService.newColumns().addColumn(column).setWrapStyle(\n CardService.WrapStyle.WRAP);\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|-----------------------------------------------------|--------------|--------------------------------------------------------------------------------------------|\n| [addColumn(column)](#addColumn(Column)) | [Columns](#) | Adds a [Column](/apps-script/reference/card-service/column) to the Columns widget. |\n| [setWrapStyle(wrapStyle)](#setWrapStyle(WrapStyle)) | [Columns](#) | Sets the wrap style of the columns, controls how the column resizes based on screen width. |\n\nDetailed documentation\n----------------------\n\n### `add``Column(column)`\n\nAdds a [Column](/apps-script/reference/card-service/column) to the Columns widget. Columns are displayed in the order in which\nthey're added. You can add up to two columns.\n\n```javascript\nconst columns = CardService.newColumns().addColumn(CardService.newColumn());\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|----------|------------------------------------------------------|----------------------------------------------|\n| `column` | [Column](/apps-script/reference/card-service/column) | A child column to add to the Columns widget. |\n\n#### Return\n\n\n[Columns](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Wrap``Style(wrapStyle)`\n\nSets the wrap style of the columns, controls how the column resizes based on screen width.\n\n```javascript\nconst columns = CardService.newColumns()\n .addColumn(CardService.newColumn())\n .setWrapStyle(CardService.WrapStyle.WRAP);\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|---------------|-------------------------------------------------------------|----------------------------------------|\n| `wrap``Style` | [WrapStyle](/apps-script/reference/card-service/wrap-style) | The wrap style to set for the columns. |\n\n#### Return\n\n\n[Columns](#) --- This object, for chaining."]]
