Stay organized with collections
Save and categorize content based on your preferences.
GridItem
The items users interact with within a grid widget.
Available for Google Workspace add-ons and Google Chat apps.
To call an enum, you call its parent class, name, and property. For example,
CardService.GridItemLayout.TEXT_BELOW.
constgridItem=CardService.newGridItem().setIdentifier('itemA').setTitle('This is a cat').setImage(CardService.newImageComponent()).setLayout(CardService.GridItemLayout.TEXT_BELOW);
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-01-30 UTC."],[[["\u003cp\u003eGridItem represents interactive elements within a grid widget, usable in Google Workspace Add-ons and Chat apps.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can set an identifier, image, layout, subtitle, text alignment, and title for each GridItem.\u003c/p\u003e\n"],["\u003cp\u003eWhen a user clicks a GridItem, its identifier is returned in the parent grid's on_click callback, enabling interactive functionality.\u003c/p\u003e\n"],["\u003cp\u003eGridItem leverages \u003ccode\u003eCardService\u003c/code\u003e methods for customization, such as \u003ccode\u003esetTitle()\u003c/code\u003e, \u003ccode\u003esetImage()\u003c/code\u003e, and \u003ccode\u003esetLayout()\u003c/code\u003e, to define its appearance and behavior.\u003c/p\u003e\n"],["\u003cp\u003eDefault settings include TEXT_BELOW for layout and START for text alignment, offering a base configuration for GridItems.\u003c/p\u003e\n"]]],["Grid items, used in grid widgets for Google Workspace add-ons and Chat apps, are configured using methods like `setIdentifier`, `setImage`, `setLayout`, `setSubtitle`, `setTextAlignment`, and `setTitle`. These methods respectively assign an ID, an image, a text/image layout, a subtitle, text alignment, and a title. The `setIdentifier` method's ID is returned upon a user click. Default layout is `TEXT_BELOW` and the default alignment is `START`. Each method returns the `GridItem` object, enabling chaining.\n"],null,["GridItem\n\nThe items users interact with within a grid widget.\n\nAvailable for Google Workspace add-ons and Google Chat apps.\n\nTo call an enum, you call its parent class, name, and property. For example, `\nCardService.GridItemLayout.TEXT_BELOW`.\n\n```javascript\nconst gridItem = CardService.newGridItem()\n .setIdentifier('itemA')\n .setTitle('This is a cat')\n .setImage(CardService.newImageComponent())\n .setLayout(CardService.GridItemLayout.TEXT_BELOW);\n``` \n\nMethods\n\n| Method | Return type | Brief description |\n|-----------------------------------------------------------------------|---------------|------------------------------------------------------|\n| [setIdentifier(id)](#setIdentifier(String)) | [GridItem](#) | Sets the identifier for the grid item. |\n| [setImage(image)](#setImage(ImageComponent)) | [GridItem](#) | Sets the image for this grid item. |\n| [setLayout(layout)](#setLayout(GridItemLayout)) | [GridItem](#) | Sets the layout of text and image for the grid item. |\n| [setSubtitle(subtitle)](#setSubtitle(String)) | [GridItem](#) | Sets the subtitle of the grid item. |\n| [setTextAlignment(alignment)](#setTextAlignment(HorizontalAlignment)) | [GridItem](#) | Sets the horizontal alignment of the grid item. |\n| [setTitle(title)](#setTitle(String)) | [GridItem](#) | Sets the title text of the grid item. |\n\nDetailed documentation \n\n`set``Identifier(id)` \nSets the identifier for the grid item. When a user clicks this grid item, this ID is returned\nin the parent grid's on_click call back parameters.\n\nParameters\n\n| Name | Type | Description |\n|------|----------|-------------|\n| `id` | `String` | The ID. |\n\nReturn\n\n\n[GridItem](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n`set``Image(image)` \nSets the image for this grid item.\n\nParameters\n\n| Name | Type | Description |\n|---------|-----------------------------------------------------------------------|----------------------------|\n| `image` | [ImageComponent](/apps-script/reference/card-service/image-component) | The ImageComponent object. |\n\nReturn\n\n\n[GridItem](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n`set``Layout(layout)` \nSets the layout of text and image for the grid item. Default is TEXT_BELOW\n\nParameters\n\n| Name | Type | Description |\n|----------|------------------------------------------------------------------------|---------------------|\n| `layout` | [GridItemLayout](/apps-script/reference/card-service/grid-item-layout) | The layout setting. |\n\nReturn\n\n\n[GridItem](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n`set``Subtitle(subtitle)` \nSets the subtitle of the grid item.\n\nParameters\n\n| Name | Type | Description |\n|------------|----------|--------------------|\n| `subtitle` | `String` | The subtitle text. |\n\nReturn\n\n\n[GridItem](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n`set``Text``Alignment(alignment)` \nSets the horizontal alignment of the grid item. Default is START.\n\nParameters\n\n| Name | Type | Description |\n|-------------|---------------------------------------------------------------------------------|------------------------|\n| `alignment` | [HorizontalAlignment](/apps-script/reference/card-service/horizontal-alignment) | The alignment setting. |\n\nReturn\n\n\n[GridItem](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n`set``Title(title)` \nSets the title text of the grid item.\n\nParameters\n\n| Name | Type | Description |\n|---------|----------|-----------------|\n| `title` | `String` | The title text. |\n\nReturn\n\n\n[GridItem](#) --- This object, for chaining."]]
