Gmail Add-on Create Radio Group with Text Input

Question

I am working on a Gmail Add-on with a dynamically created radio group, something like:

How can I insert an input text box as one of the radio options?

This is what I have so far:

var urlGroup = CardService.newSelectionInput()
      .setType(CardService.SelectionInputType.RADIO_BUTTON)
      .setTitle("Please select a link")
      .setFieldName("radio_group")


      //How do I get a text input field here as one of the radio options
      // This is the line I cannot figure out
      urlGroup.addItem(** insert input textbox here **)

      for (var g = 0; (g < getURLsection.length); g++) {
        //shorten long links to fit in card
        if (getURLsection[g].length > 21) {
          var URLname =  getURLsection[g].slice(0, 22) + "..." + getURLsection[g].slice(-5);
        } else {
          var URLname =  getURLsection[g]
          }

        urlGroup.addItem(URLname, getURLsection[g], false)
      }

      // create radio button group
      var section = CardService.newCardSection()
      .addWidget(urlGroup)

Any ideas on how to do this?
Preferably I would like to remove the word Other: and just have it as a .setTitle("enter link here") within the textbook.

score 0 · Accepted Answer · answered Mar 24 '20 at 10:44

To generate a text input element in Google's Add-ons you need to create a TextInput widget object which you need to add to the given section later.

As stated in the documentation for the addItem method, it receives the text and value parameters as strings so you can't use a TextInput object there.

As a workaround for what you want to achieve, you can create a radio group option with the 'otherLink' value:

  urlGroup.addItem('Enter link below:', 'otherLink', false);

And a text input widget which you insert into the radio button group section:

   var textInput = CardService.newTextInput()
    .setFieldName("text_input_form_input_key")
    .setTitle("enter link here")

  // create radio button group section with text input
  var section = CardService.newCardSection()
  .addWidget(urlGroup)
  .addWidget(textInput)

This way, the text input will appear below of the radio buttons and you could work with the value (link) entered in the input text if the selected value from the radio buttons group is 'otherLink'.

Darn I thought it would be possible. Your work around is good however I am worried the user will forget to click the 'other link' radio button. Unless I make it the default selected. — utphx, Mar 24 '20 at 15:16

Gmail Add-on Create Radio Group with Text Input

1 Answers1