Class SelectionInput

  • SelectionInput is an input field for choosing from predefined options.

  • It supports form submission validation for DROP_DOWN and MULTI_SELECT menu types.

  • It is available for Google Workspace add-ons and Google Chat apps.

  • Methods like addItem, addMultiSelectItem, setTitle, and setType are available to customize the SelectionInput.
SelectionInput

An input field that allows choosing between a set of predefined options.

Supports form submission validation for SelectionInputType.DROP_DOWN and SelectionInputType.MULTI_SELECT menus only. When Action.setAllWidgetsAreRequired(allWidgetsAreRequired) is set to true or this widget is specified through Action.addRequiredWidget(requiredWidget), the submission action is blocked unless a value is selected.

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

const checkboxGroup =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.CHECK_BOX)
        .setTitle('A group of checkboxes. Multiple selections are allowed.')
        .setFieldName('checkbox_field')
        .addItem('checkbox one title', 'checkbox_one_value', false)
        .addItem('checkbox two title', 'checkbox_two_value', true)
        .addItem('checkbox three title', 'checkbox_three_value', true)
        .setOnChangeAction(
            CardService.newAction().setFunctionName('handleCheckboxChange'),
        );

const radioGroup =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.RADIO_BUTTON)
        .setTitle(
            'A group of radio buttons. Only a single selection is allowed.')
        .setFieldName('checkbox_field')
        .addItem('radio button one title', 'radio_one_value', true)
        .addItem('radio button two title', 'radio_two_value', false)
        .addItem('radio button three title', 'radio_three_value', false);

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('multiselect')
        .setTitle('A multi select input example.')
        .addMultiSelectItem(
            'Contact 1',
            'contact-1',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact one description',
            )
        .addMultiSelectItem(
            'Contact 2',
            'contact-2',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact two description',
            )
        .addMultiSelectItem(
            'Contact 3',
            'contact-3',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact three description',
            )
        .addMultiSelectItem(
            'Contact 4',
            'contact-4',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact four description',
            )
        .addMultiSelectItem(
            'Contact 5',
            'contact-5',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact five description',
            )
        .setMultiSelectMaxSelectedItems(3)
        .setMultiSelectMinQueryLength(1);

Methods

MethodReturn typeBrief description
addItem(text, value, selected)SelectionInputAdds a new item that can be selected.
addMultiSelectItem(text, value, selected, startIconUri, bottomText)SelectionInputAdds a new item that can be selected, for multi-select menus.
setExternalDataSource(action)SelectionInputSets external data source, such as a relational data base.
setFieldName(fieldName)SelectionInputSets the key that identifies this selection input in the event object that is generated when there is a UI interaction.
setMultiSelectMaxSelectedItems(maxSelectedItems)SelectionInputSets the maximum number of items that a user can select.
setMultiSelectMinQueryLength(queryLength)SelectionInputSets the number of text characters that a user inputs before the app queries autocomplete and displays suggested items on the card.
setOnChangeAction(action)SelectionInputSets an Action to be performed whenever the selection input changes.
setPlatformDataSource(platformDataSource)SelectionInputSets a data source from Google Workspace.
setTitle(title)SelectionInputSets the title to be shown ahead of the input field.
setType(type)SelectionInputSets the type of this input.

Detailed documentation

addItem(text, value, selected)

Adds a new item that can be selected.

Parameters

NameTypeDescription
textObjectThe text to be shown for this item. Non-string primitive arguments are converted to strings automatically.
valueObjectThe form input value that is sent via the callback. Non-string primitive arguments are converted to strings automatically.
selectedBooleanWhether the item is selected by default. If the selection input only accepts one value (such as for radio buttons or a dropdown menu), only set this field for one item.

Return

SelectionInput — This object, for chaining.

addMultiSelectItem(text, value, selected, startIconUri, bottomText)

Adds a new item that can be selected, for multi-select menus. 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('multiselect')
        .setTitle('A multi select input example.')
        .addMultiSelectItem(
            'Contact 1',
            'contact-1',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact one description',
            )
        .addMultiSelectItem(
            'Contact 2',
            'contact-2',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact two description',
            )
        .addMultiSelectItem(
            'Contact 3',
            'contact-3',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact three description',
            )
        .addMultiSelectItem(
            'Contact 4',
            'contact-4',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact four description',
            )
        .addMultiSelectItem(
            'Contact 5',
            'contact-5',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact five description',
        );

Parameters

NameTypeDescription
textObjectThe text to be shown for this item. Non-string primitive arguments are converted to strings automatically.
valueObjectThe form input value that is sent via the callback. Non-string primitive arguments are converted to strings automatically.
selectedBooleanWhether the item is selected by default. If the selection input only accepts one value (such as for radio buttons or a dropdown menu), only set this field for one item.
startIconUriObjectFor multiselect menus, the URL for the icon displayed next to the item's text field. Supports PNG and JPEG files.
bottomTextObjectFor multiselect menus, a text description or label that's displayed below the item's text field.

Return

SelectionInput — This object, for chaining.

setExternalDataSource(action)

Sets external data source, such as a relational data base. 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('contacts')
        .setTitle('Selected contacts')
        .addMultiSelectItem(
            'Contact 3',
            'contact-3',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact three description',
            )
        .setMultiSelectMaxSelectedItems(5)
        .setMultiSelectMinQueryLength(2)
        .setExternalDataSource(
            CardService.newAction().setFunctionName('getContacts'),
        );

Parameters

NameTypeDescription
actionActionThe external data source.

Return

SelectionInput — This object, for chaining.

setFieldName(fieldName)

Sets the key that identifies this selection input in the event object that is generated when there is a UI interaction. Not visible to the user. Required, must be unique.

Parameters

NameTypeDescription
fieldNameStringThe name to assign to this input.

Return

SelectionInput — This object, for chaining.

setMultiSelectMaxSelectedItems(maxSelectedItems)

Sets the maximum number of items that a user can select. 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('multiselect')
        .setTitle('A multi select input example.')
        .setMultiSelectMaxSelectedItems(3)
        .addMultiSelectItem(
            'Contact 1',
            'contact-1',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact one description',
            )
        .addMultiSelectItem(
            'Contact 2',
            'contact-2',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact two description',
            )
        .addMultiSelectItem(
            'Contact 3',
            'contact-3',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact three description',
            )
        .addMultiSelectItem(
            'Contact 4',
            'contact-4',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact four description',
            )
        .addMultiSelectItem(
            'Contact 5',
            'contact-5',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact five description',
        );

Parameters

NameTypeDescription
maxSelectedItemsIntegerThe maximum number of items.

Return

SelectionInput — This object, for chaining.

setMultiSelectMinQueryLength(queryLength)

Sets the number of text characters that a user inputs before the app queries autocomplete and displays suggested items on the card. 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('multiselect')
        .setTitle('A multi select input example.')
        .setMultiSelectMinQueryLength(1)
        .addMultiSelectItem(
            'Contact 1',
            'contact-1',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact one description',
            )
        .addMultiSelectItem(
            'Contact 2',
            'contact-2',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact two description',
            )
        .addMultiSelectItem(
            'Contact 3',
            'contact-3',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact three description',
            )
        .addMultiSelectItem(
            'Contact 4',
            'contact-4',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact four description',
            )
        .addMultiSelectItem(
            'Contact 5',
            'contact-5',
            false,
            'https://www.gstatic.com/images/branding/product/2x/contacts_48dp.png',
            'Contact five description',
        );

Parameters

NameTypeDescription
queryLengthIntegerThe number of text characters.

Return

SelectionInput — This object, for chaining.

setOnChangeAction(action)

Sets an Action to be performed whenever the selection input changes.

Parameters

NameTypeDescription
actionActionThe action to take.

Return

SelectionInput — This object, for chaining.

setPlatformDataSource(platformDataSource)

Sets a data source from Google Workspace. Used to populate items in a multiselect menu. 

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('contacts')
        .setTitle('Selected contacts')
        .setPlatformDataSource(
            CardService.newPlatformDataSource().setCommonDataSource(
                CardService.CommonDataSource.USER,
                ),
        );
 Only available for Google Chat apps. Not available for Google Workspace add-ons.

Parameters

NameTypeDescription
platformDataSourcePlatformDataSourceThe data source.

Return

SelectionInput — This object, for chaining.

setTitle(title)

Sets the title to be shown ahead of the input field.

Parameters

NameTypeDescription
titleStringThe input field title.

Return

SelectionInput — This object, for chaining.

setType(type)

Sets the type of this input. Defaults to CHECKBOX.

Parameters

NameTypeDescription
typeSelectionInputTypeThe selection type.

Return

SelectionInput — This object, for chaining.