Class Image

Image

A widget that shows a single image. For information about cropping images, see ImageCropStyle.

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

const image = CardService.newImage()
                  .setAltText('A nice image')
                  .setImageUrl('https://image.png');

Methods

MethodReturn typeBrief description
setAltText(altText)ImageSets the alternative text of the image for accessibility.
setAuthorizationAction(action)ImageSets an authorization action that opens a URL to the authorization flow when the object is clicked.
setComposeAction(action, composedEmailType)ImageSets an action that composes a draft email when the object is clicked.
setImageUrl(url)ImageSets the image to use by providing its URL or data string.
setOnClickAction(action)ImageSets an action that executes when the object is clicked.
setOnClickOpenLinkAction(action)ImageSets an action that opens a URL in a tab when the object is clicked.
setOpenLink(openLink)ImageSets a URL to be opened when the object is clicked.

Detailed documentation

setAltText(altText)

Sets the alternative text of the image for accessibility. Required.

Parameters

NameTypeDescription
altTextStringThe 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 setOpenLink(openLink), setOnClickAction(action), setOnClickOpenLinkAction(action), setAuthorizationAction(action), or setComposeAction(action, composedEmailType) set.

// ...

const action = CardService.newAuthorizationAction().setAuthorizationUrl('url');
CardService.newTextButton().setText('Authorize').setAuthorizationAction(action);

Parameters

NameTypeDescription
actionAuthorizationActionThe 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 setOpenLink(openLink), setOnClickAction(action), setOnClickOpenLinkAction(action), setAuthorizationAction(action), or setComposeAction(action, composedEmailType) set.

The Action parameter must specify a callback function that returns a ComposeActionResponse object configured using ComposeActionResponseBuilder.setGmailDraft(draft).

// ...

const action = CardService.newAction().setFunctionName('composeEmailCallback');
CardService.newTextButton()
    .setText('Compose Email')
    .setComposeAction(action, CardService.ComposedEmailType.REPLY_AS_DRAFT);

// ...

function composeEmailCallback() {
  const thread = GmailApp.getThreadById(e.threadId);
  const draft = thread.createDraftReply('This is a reply');
  return CardService.newComposeActionResponseBuilder()
      .setGmailDraft(draft)
      .build();
}

Parameters

NameTypeDescription
actionActionThe object that specifies the compose action to take when this element is clicked.
composedEmailTypeComposedEmailTypeAn enum value that specifies whether the composed draft is a standalone or reply draft.

Return

Image — 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 setImageUrl(url). 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(imageID).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

NameTypeDescription
urlStringThe 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 setOpenLink(openLink), setOnClickAction(action), setOnClickOpenLinkAction(action), setAuthorizationAction(action), or setComposeAction(action, composedEmailType) set.

The Action parameter must specify a callback function that returns a ActionResponse 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

NameTypeDescription
actionActionThe 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 OpenLink object. A UI object can only have one of setOpenLink(openLink), setOnClickAction(action), setOnClickOpenLinkAction(action), setAuthorizationAction(action), or setComposeAction(action, composedEmailType) set.

The Action parameter must specify a callback function that returns a ActionResponse object configured using ActionResponseBuilder.setOpenLink(openLink).

// ...

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

NameTypeDescription
actionActionThe object that specifies the open link action to take when this element is clicked.

Return

Image — This object, for chaining.


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 setOpenLink(openLink), setOnClickAction(action), setOnClickOpenLinkAction(action), setAuthorizationAction(action), or setComposeAction(action, composedEmailType) set.

Parameters

NameTypeDescription
openLinkOpenLinkAn OpenLink object describing the URL to open.

Return

Image — This object, for chaining.