Using CardService with HtmlService

Question

Using CardService with HtmlService

3.5k Views Asked by Ezra Bell At 19 April 2025 at 05:07

Google Add-Ons has pivoted towards using CardService widgets. I am trying to create a drop-down menu but the ListBox class is deprecated. The docs forwarded me to HTML services but there's no documentation anywhere about how to use them in the context of CardServices. Here is my code:

GetContextualAddOn.gs

function createReply(e) {
  var accessToken = e.messageMetadata.accessToken;
    GmailApp.setCurrentMessageAccessToken(accessToken);

  var messageId = e.messageMetadata.messageId;
    var message = GmailApp.getMessageById(messageId);
    var draft = message.createDraftReply("Got your message");

    return CardService.newComposeActionResponseBuilder()
        .setGmailDraft(draft).build();
}



function getContextualAddOn() {
  var card = CardService.newCardBuilder();
  card.setHeader(CardService.newCardHeader().setTitle('Respond to Email'));
  var section = CardService.newCardSection();
  var action = CardService.newAction().setFunctionName('createReply');

  function doGet() {
    return HtmlService.createHtmlOutputFromFile('dropdown');
  }

  section.addWidget(CardService
                    .newTextButton()
                    .setText('Respond')
                    .setComposeAction(action, CardService.ComposedEmailType.REPLY_AS_DRAFT));

  card.addSection(section);

  return [card.build()];
}

the doGet() method shown above is trying to access a dropdown.html file that I created:

**dropdown.html**
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <p>test</p>
  </body>
</html>

How would I integrate the HTML into my current card.build? Should I be approaching it differently, and if so, can someone provide a code sample?

Original Q&A

There are 2 best solutions below

**Amit Agarwal** · Answer 1

Amit Agarwal On 15 May 2018 at 18:11

The CardService service can only be used with Google Workspace add-ons. They are not available in Google Docs add-ons or web apps built with Apps Script.

**Suhail Ansari** · Answer 2

In my opinion you can't yet use a custom HTML in Gmail Add-ons yet. You can though use them in Google Docs/Sheets Add-on using HTML Service.

In Gmail Add-ons you can use the correct Selection Input in the Card Service to create a Dropdown field. Official Doc Here: https://developers.google.com/apps-script/reference/card-service/selection-input

Use the Selection Input Type as CardService.SelectionInputType.DROPDOWN

Here is a code sample to get you started:

var card = CardService.newCardBuilder();
card.setHeader(CardService.newCardHeader().setTitle('Dropdown Sample Card'));
var dropdownSection = CardService.newCardSection();
var dropdown = CardService.newSelectionInput()
   .setType(CardService.SelectionInputType.DROPDOWN)
   .setTitle("A Dropdown. Only a single selection is allowed.")
   .setFieldName("dropdown_field")
   .addItem("option one title", "option_one_value", true)
   .addItem("option  two title", "option_two_value", false)
   .addItem("option  three title", "option_three_value", false);

dropdownSection.addWidget(dropdown);
card.addSection(dropdownSection);
return [card.build()];

Using CardService with HtmlService

There are 2 best solutions below

Related Questions in GOOGLE-APPS-SCRIPT

Related Questions in GMAIL-ADDONS

Related Questions in GSUITE-ADDONS

Trending Questions

Popular # Hahtags

Popular Questions