Class CardHeader

AI-generated Key Takeaways

• CardHeader objects allow you to customize the header of a card, including title, subtitle, and image, within Google Workspace Add-ons and Google Chat apps.

• You can set an image for the header using setImageUrl() by providing a public URL or a base64 encoded image string.

• setTitle() and setSubtitle() allow you to define the main text and supporting text for the header, respectively.

• Customize the image display with setImageStyle() to control cropping and use setImageAltText() to provide alternative text for accessibility.

CardHeader

The header of a Card.

Available for Google Workspace add-ons and Google Chat apps.

const cardHeader = CardService.newCardHeader()
                       .setTitle('Card header title')
                       .setSubtitle('Card header subtitle')
                       .setImageStyle(CardService.ImageStyle.CIRCLE)
                       .setImageUrl('https://image.png');

Methods

Method	Return type	Brief description
setImageAltText(imageAltText)	CardHeader	Sets the alternative text for the header image.
setImageStyle(imageStyle)	CardHeader	Sets the cropping of the icon in the card header.
setImageUrl(imageUrl)	CardHeader	Sets the image to use in the header by providing its URL or data string.
setSubtitle(subtitle)	CardHeader	Sets the subtitle of the card header.
setTitle(title)	CardHeader	Sets the title of the card header.

Detailed documentation

setImageAltText(imageAltText)

Sets the alternative text for the header image.

Parameters

Name	Type	Description
imageAltText	String	The alternative text for the header image.

Return

CardHeader — This object, for chaining.

---

setImageStyle(imageStyle)

Sets the cropping of the icon in the card header. Defaults to no crop. Optional.

Parameters

Name	Type	Description
imageStyle	ImageStyle	The style setting.

Return

CardHeader — This object, for chaining.

---

setImageUrl(imageUrl)

Sets the image to use in the header by providing its URL or data string.

The provided URL can either be a publicly accessible URL or a base64 encoded image string. To obtain the latter, you can use the following code to create an encoded image string from an image in your Google Drive, then store that string for later use with setImageUrl(imageUrl). This method prevents the need for your add-on to access a publicly available image 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).

Parameters

Name	Type	Description
imageUrl	String	The URL address of a hosted image to use, or an encoded image string.

Return

CardHeader — This object, for chaining.

---

setSubtitle(subtitle)

Sets the subtitle of the card header. Optional.

Parameters

Name	Type	Description
subtitle	String	The header subtitle text.

Return

CardHeader — This object, for chaining.

---

setTitle(title)

Sets the title of the card header. Required.

Parameters

Name	Type	Description
title	String	The header text.

Return

CardHeader — This object, for chaining.