Class CardHeader
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ส่วนหัวการ์ด
ส่วนหัวของ Card
พร้อมใช้งานสำหรับส่วนเสริมของ Google Workspace และแอป Google Chat
const cardHeader = CardService.newCardHeader()
.setTitle('Card header title')
.setSubtitle('Card header subtitle')
.setImageStyle(CardService.ImageStyle.CIRCLE)
.setImageUrl('https://image.png');
เอกสารประกอบโดยละเอียด
setImageAltText(imageAltText)
ตั้งค่าข้อความแสดงแทนสำหรับรูปภาพส่วนหัว
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
imageAltText | String | ข้อความแสดงแทนสำหรับรูปภาพส่วนหัว |
รีเทิร์น
CardHeader — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
setImageStyle(imageStyle)
ตั้งค่าการครอบตัดไอคอนในส่วนหัวของการ์ด ค่าเริ่มต้นคือไม่ครอบตัด ไม่บังคับ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
imageStyle | ImageStyle | การตั้งค่ารูปแบบ |
รีเทิร์น
CardHeader — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
setImageUrl(imageUrl)
ตั้งค่ารูปภาพที่จะใช้ในส่วนหัวโดยระบุ URL หรือสตริงข้อมูล
URL ที่ระบุอาจเป็น URL ที่เข้าถึงได้แบบสาธารณะหรือสตริงรูปภาพที่เข้ารหัส Base64
หากต้องการรับค่าหลัง คุณสามารถใช้โค้ดต่อไปนี้เพื่อสร้างสตริงรูปภาพที่เข้ารหัสจากรูปภาพใน Google ไดรฟ์ จากนั้นจัดเก็บสตริงนั้นไว้ใช้กับ setImageUrl(imageUrl) ในภายหลัง วิธีนี้จะช่วยป้องกันไม่ให้ส่วนเสริมของคุณต้องเข้าถึง URL รูปภาพที่เข้าถึงได้แบบสาธารณะ
// The following assumes you have the image to use in Google Drive and have its
// ID.
const imageBytes = DriveApp.getFileById('123abc').getBlob().getBytes();
const encodedImageURL =
`data:image/jpeg;base64,${Utilities.base64Encode(imageBytes)}`;
// You can store encodeImageURL and use it as a parameter to
// CardHeader.setImageUrl(imageUrl).
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
imageUrl | String | ที่อยู่ URL ของรูปภาพที่โฮสต์ไว้เพื่อใช้ หรือสตริงรูปภาพที่เข้ารหัส |
รีเทิร์น
CardHeader — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
setSubtitle(subtitle)
ตั้งค่าคำบรรยายของส่วนหัวของการ์ด ไม่บังคับ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
subtitle | String | ข้อความส่วนหัวย่อย |
รีเทิร์น
CardHeader — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
setTitle(title)
ตั้งค่าชื่อส่วนหัวของการ์ด ต้องระบุ
พารามิเตอร์
| ชื่อ | ประเภท | คำอธิบาย |
title | String | ข้อความส่วนหัว |
รีเทิร์น
CardHeader — ออบเจ็กต์นี้สําหรับการต่อเชื่อม
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-07-26 UTC
[null,null,["อัปเดตล่าสุด 2025-07-26 UTC"],[[["\u003cp\u003e\u003ccode\u003eCardHeader\u003c/code\u003e objects allow you to customize the header of a card, including title, subtitle, and image, within Google Workspace Add-ons and Google Chat apps.\u003c/p\u003e\n"],["\u003cp\u003eYou can set an image for the header using \u003ccode\u003esetImageUrl()\u003c/code\u003e by providing a public URL or a base64 encoded image string.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003esetTitle()\u003c/code\u003e and \u003ccode\u003esetSubtitle()\u003c/code\u003e allow you to define the main text and supporting text for the header, respectively.\u003c/p\u003e\n"],["\u003cp\u003eCustomize the image display with \u003ccode\u003esetImageStyle()\u003c/code\u003e to control cropping and use \u003ccode\u003esetImageAltText()\u003c/code\u003e to provide alternative text for accessibility.\u003c/p\u003e\n"]]],["The `CardHeader` object allows customization of a card's header in Google Workspace add-ons and Google Chat apps. Key actions include setting the header's title using `setTitle()`, a subtitle with `setSubtitle()`, and an image via `setImageUrl()`. The image's appearance can be modified with `setImageStyle()` for cropping and `setImageAltText()` for alternative text. Image URLs can be direct links or base64 encoded strings. Each method returns the `CardHeader` object, enabling method chaining.\n"],null,["# Class CardHeader\n\nCardHeader\n\nThe header of a [Card](/apps-script/reference/card-service/card).\n\nAvailable for Google Workspace add-ons and Google Chat apps.\n\n```javascript\nconst cardHeader = CardService.newCardHeader()\n .setTitle('Card header title')\n .setSubtitle('Card header subtitle')\n .setImageStyle(CardService.ImageStyle.CIRCLE)\n .setImageUrl('https://image.png');\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|-----------------------------------------------------------|-----------------|--------------------------------------------------------------------------|\n| [setImageAltText(imageAltText)](#setImageAltText(String)) | [CardHeader](#) | Sets the alternative text for the header image. |\n| [setImageStyle(imageStyle)](#setImageStyle(ImageStyle)) | [CardHeader](#) | Sets the cropping of the icon in the card header. |\n| [setImageUrl(imageUrl)](#setImageUrl(String)) | [CardHeader](#) | Sets the image to use in the header by providing its URL or data string. |\n| [setSubtitle(subtitle)](#setSubtitle(String)) | [CardHeader](#) | Sets the subtitle of the card header. |\n| [setTitle(title)](#setTitle(String)) | [CardHeader](#) | Sets the title of the card header. |\n\nDetailed documentation\n----------------------\n\n### `set``Image``Alt``Text(imageAltText)`\n\nSets the alternative text for the header image.\n\n#### Parameters\n\n| Name | Type | Description |\n|--------------------|----------|--------------------------------------------|\n| `image``Alt``Text` | `String` | The alternative text for the header image. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Image``Style(imageStyle)`\n\nSets the cropping of the icon in the card header. Defaults to no crop. Optional.\n\n#### Parameters\n\n| Name | Type | Description |\n|----------------|---------------------------------------------------------------|--------------------|\n| `image``Style` | [ImageStyle](/apps-script/reference/card-service/image-style) | The style setting. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Image``Url(imageUrl)`\n\nSets the image to use in the header by providing its URL or data string.\n\nThe provided URL can either be a publicly accessible URL or a base64 encoded image string.\nTo obtain the latter, you can use the following code to create an encoded image string from an\nimage in your Google Drive, then store that string for later use with [setImageUrl(imageUrl)](#setImageUrl(String)). This method prevents the need for your add-on to access a publicly\navailable image URL:\n\n```javascript\n// The following assumes you have the image to use in Google Drive and have its\n// ID.\nconst imageBytes = DriveApp.getFileById('123abc').getBlob().getBytes();\nconst encodedImageURL =\n `data:image/jpeg;base64,${Utilities.base64Encode(imageBytes)}`;\n\n// You can store encodeImageURL and use it as a parameter to\n// CardHeader.setImageUrl(imageUrl).\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|--------------|----------|-----------------------------------------------------------------------|\n| `image``Url` | `String` | The URL address of a hosted image to use, or an encoded image string. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Subtitle(subtitle)`\n\nSets the subtitle of the card header. Optional.\n\n#### Parameters\n\n| Name | Type | Description |\n|------------|----------|---------------------------|\n| `subtitle` | `String` | The header subtitle text. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining.\n\n*** ** * ** ***\n\n### `set``Title(title)`\n\nSets the title of the card header. Required.\n\n#### Parameters\n\n| Name | Type | Description |\n|---------|----------|------------------|\n| `title` | `String` | The header text. |\n\n#### Return\n\n\n[CardHeader](#) --- This object, for chaining."]]
