An input field that allows choosing between a set of predefined options.
Supports form submission validation for Selection
and Selection
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
Method | Return type | Brief description |
---|---|---|
Selection
|
Adds a new item that can be selected. | |
Selection
|
Adds a new item that can be selected, for multi-select menus. | |
Selection
|
Sets external data source, such as a relational data base. | |
Selection
|
Sets the key that identifies this selection input in the event object that is generated when there is a UI interaction. | |
Selection
|
Sets the maximum number of items that a user can select. | |
Selection
|
Sets the number of text characters that a user inputs before the app queries autocomplete and displays suggested items on the card. | |
Selection
|
Sets an Action
to be performed whenever the selection input changes. |
|
Selection
|
Sets a data source from Google Workspace. | |
Selection
|
Sets the title to be shown ahead of the input field. | |
Selection
|
Sets the type of this input. |
Detailed documentation
add
Item(text, value, selected)
Adds a new item that can be selected.
Parameters
Name | Type | Description |
---|---|---|
text
|
Object
|
The text to be shown for this item. Non-string primitive arguments are converted to strings automatically. |
value
|
Object
|
The form input value that is sent via the callback. Non-string primitive arguments are converted to strings automatically. |
selected
|
Boolean
|
Whether 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
Selection
— This object, for chaining.
add
Multi
Select
Item(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
Name | Type | Description |
---|---|---|
text
|
Object
|
The text to be shown for this item. Non-string primitive arguments are converted to strings automatically. |
value
|
Object
|
The form input value that is sent via the callback. Non-string primitive arguments are converted to strings automatically. |
selected
|
Boolean
|
Whether 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. |
start
|
Object
|
For multiselect menus, the URL for the icon displayed next to the item's text field. Supports PNG and JPEG files. |
bottom
|
Object
|
For multiselect menus, a text description or label that's displayed below the item's text field. |
Return
Selection
— This object, for chaining.
set
External
Data
Source(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
Name | Type | Description |
---|---|---|
action
|
Action
|
The external data source. |
Return
Selection
— This object, for chaining.
set
Field
Name(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
Name | Type | Description |
---|---|---|
field
|
String
|
The name to assign to this input. |
Return
Selection
— This object, for chaining.
set
Multi
Select
Max
Selected
Items(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
Name | Type | Description |
---|---|---|
max
|
Integer
|
The maximum number of items. |
Return
Selection
— This object, for chaining.
set
Multi
Select
Min
Query
Length(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
Name | Type | Description |
---|---|---|
query
|
Integer
|
The number of text characters. |
Return
Selection
— This object, for chaining.
set
On
Change
Action(action)
Sets an Action
to be performed whenever the selection input changes.
Parameters
Name | Type | Description |
---|---|---|
action
|
Action
|
The action to take. |
Return
Selection
— This object, for chaining.
set
Platform
Data
Source(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 , ), );
Parameters
Name | Type | Description |
---|---|---|
platform
|
Platform
|
The data source. |
Return
Selection
— This object, for chaining.
set
Title(title)
Sets the title to be shown ahead of the input field.
Parameters
Name | Type | Description |
---|---|---|
title
|
String
|
The input field title. |
Return
Selection
— This object, for chaining.
set
Type(type)
Sets the type of this input. Defaults to CHECKBOX
.
Parameters
Name | Type | Description |
---|---|---|
type
|
Selection
|
The selection type. |
Return
Selection
— This object, for chaining.