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. 

constcheckboxGroup=
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'),
);
constradioGroup=
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);
constmultiSelect=
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) SelectionInput Adds a new item that can be selected.
addMultiSelectItem(text, value, selected, startIconUri, bottomText) SelectionInput Adds a new item that can be selected, for multi-select menus.
setExternalDataSource(action) SelectionInput Sets external data source, such as a relational data base.
setFieldName(fieldName) SelectionInput Sets the key that identifies this selection input in the event object that is generated when there is a UI interaction.
setMultiSelectMaxSelectedItems(maxSelectedItems) SelectionInput Sets the maximum number of items that a user can select.
setMultiSelectMinQueryLength(queryLength) SelectionInput Sets the number of text characters that a user inputs before the app queries autocomplete and displays suggested items on the card.
setOnChangeAction(action) SelectionInput Sets an Action to be performed whenever the selection input changes.
setPlatformDataSource(platformDataSource) SelectionInput Sets a data source from Google Workspace.
setTitle(title) SelectionInput Sets the title to be shown ahead of the input field.
setType(type) SelectionInput Sets 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. 

constmultiSelect=
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. 

constmultiSelect=
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
actionAction The 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. 

constmultiSelect=
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. 

constmultiSelect=
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
actionAction The 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. 

constmultiSelect=
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
platformDataSourcePlatformDataSource The 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
typeSelectionInputType The selection type.

Return

SelectionInput — This object, for chaining.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025年01月30日 UTC.