AI-generated Key Takeaways
-
The Image widget displays a single image and is available for Google Workspace add-ons and Google Chat apps.
-
You must set the alternative text for accessibility using
setAltText(altText)and the image URL usingsetImageUrl(url). -
You can define various actions to occur when the image is clicked, including setting authorization actions, composing emails, executing custom actions, or opening links.
-
An image object can only have one click action defined from the available methods.
A widget that shows a single image. For information about cropping images, see Image.
Available for Google Workspace add-ons and Google Chat apps.
const image = CardService.newImage() .setAltText('A nice image') .setImageUrl('https://image.png');
Methods
| Method | Return type | Brief description |
|---|---|---|
add | Widget | Adds the event action that can be performed on the widget. |
set | Image | Sets the alternative text of the image for accessibility. |
set | Image | Sets an authorization action that opens a URL to the authorization flow when the object is clicked. |
set | Image | Sets an action that composes a draft email when the object is clicked. |
set | Widget | Sets the unique ID assigned that's used to identify the widget to be mutated. |
set | Image | Sets the image to use by providing its URL or data string. |
set | Image | Sets an action that executes when the object is clicked. |
set | Image | Sets an action that opens a URL in a tab when the object is clicked. |
set | Image | Sets a URL to be opened when the object is clicked. |
set | Widget | Sets the visibility of the widget. |
Detailed documentation
addEventAction(eventAction)
Adds the event action that can be performed on the widget.
Parameters
| Name | Type | Description |
|---|---|---|
event | Event | The Event to be added. |
Return
Widget — The Object, for chaining.
setAltText(altText)
Sets the alternative text of the image for accessibility. Required.
Parameters
| Name | Type | Description |
|---|---|---|
alt | String | The alternative text to assign to this image. |
Return
Image — This object, for chaining.
setAuthorizationAction(action)
Sets an authorization action that opens a URL to the authorization flow when the object is clicked. This opens the URL in a new window. When the user finishes the authorization flow and returns to the application, the add-on reloads.
A UI object can only have one of set, set, set, set, or set set.
// ... const action = CardService.newAuthorizationAction().setAuthorizationUrl('url'); CardService.newTextButton().setText('Authorize').setAuthorizationAction(action);
Parameters
| Name | Type | Description |
|---|---|---|
action | Authorization | The object that specifies the authorization action to take when this element is clicked. |
Return
Image — This object, for chaining.
setComposeAction(action, composedEmailType)
Sets an action that composes a draft email when the object is clicked. A UI object can only
have one of set, set, set,
set, or set set.
The Action parameter must specify a callback function that returns a Compose object configured using Compose.
// ... const action = CardService.newAction().setFunctionName('composeEmailCallback'); CardService.newTextButton() .setText('Compose Email') .setComposeAction(action, CardService.ComposedEmailType.REPLY_AS_DRAFT); // ... function composeEmailCallback(e) { const thread = GmailApp.getThreadById(e.threadId); const draft = thread.createDraftReply('This is a reply'); return CardService.newComposeActionResponseBuilder() .setGmailDraft(draft) .build(); }
Parameters
| Name | Type | Description |
|---|---|---|
action | Action | The object that specifies the compose action to take when this element is clicked. |
composed | Composed | An enum value that specifies whether the composed draft is a standalone or reply draft. |
Return
Image — This object, for chaining.
setId(id)
Sets the unique ID assigned that's used to identify the widget to be mutated. Widget mutation is only supported in Add-Ons.
Parameters
| Name | Type | Description |
|---|---|---|
id | String | The id of the widget, with a limit of 64 characters and in format of `[a-zA-Z0-9-]+`. |
Return
Widget — This object, for chaining.
setImageUrl(url)
Sets the image to use by providing its URL or data string. Required.
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 set. 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 // Image.setImageUrl(url).
Parameters
| Name | Type | Description |
|---|---|---|
url | String | The URL address of a hosted image to use, or an encoded image string. |
Return
Image — This object, for chaining.
setOnClickAction(action)
Sets an action that executes when the object is clicked. A UI object can only have one of
set, set, set, set, or set set.
The Action parameter must specify a callback function that returns a Action object.
// ... const action = CardService.newAction().setFunctionName('notificationCallback'); CardService.newTextButton() .setText('Create notification') .setOnClickAction(action); // ... function notificationCallback() { return CardService.newActionResponseBuilder() .setNotification( CardService.newNotification().setText('Some info to display to user'), ) .build(); }
Parameters
| Name | Type | Description |
|---|---|---|
action | Action | The action to take when this element is clicked. |
Return
Image — This object, for chaining.
setOnClickOpenLinkAction(action)
Sets an action that opens a URL in a tab when the object is clicked. Use this function when the
URL needs to be built or when you need to take other actions in addition to creating the Open object. A UI object can only have one of set, set, set, set, or
set set.
The Action parameter must specify a callback function that returns a Action object configured using Action.
// ... const action = CardService.newAction().setFunctionName('openLinkCallback'); CardService.newTextButton() .setText('Open Link') .setOnClickOpenLinkAction(action); // ... function openLinkCallback() { return CardService.newActionResponseBuilder() .setOpenLink(CardService.newOpenLink().setUrl('https://www.google.com')) .build(); }
Parameters
| Name | Type | Description |
|---|---|---|
action | Action | The object that specifies the open link action to take when this element is clicked. |
Return
Image — This object, for chaining.
setOpenLink(openLink)
Sets a URL to be opened when the object is clicked. Use this function when the URL is already
known and only needs to be opened. A UI object can only have one of set,
set, set, set,
or set set.
Parameters
| Name | Type | Description |
|---|---|---|
open | Open | An Open object describing the URL to open. |
Return
Image — This object, for chaining.
setVisibility(visibility)
Sets the visibility of the widget. The default value is `VISIBLE`.
Parameters
| Name | Type | Description |
|---|---|---|
visibility | Visibility | The Visibility of the widget. |
Return
Widget — The Object, for chaining.