An input field that allows choosing between a set of predefined options.
Available for Google Workspace Add-ons and Google Chat apps.
var 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")); var 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 |
---|---|---|
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
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
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
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. |
startIconUri | Object | For multiselect menus, the URL for the icon displayed next to the item's text field. Supports PNG and JPEG files. |
bottomText | Object | For 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
Name | Type | Description |
---|---|---|
action | Action | 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
Name | Type | Description |
---|---|---|
fieldName | String | The 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
Name | Type | Description |
---|---|---|
maxSelectedItems | Integer | The 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
Name | Type | Description |
---|---|---|
queryLength | Integer | The number of text characters. |
Return
SelectionInput
— This object, for chaining.
setOnChangeAction(action)
Sets an Action
to be performed whenever the selection input changes.
Parameters
Name | Type | Description |
---|---|---|
action | Action | 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.
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 |
---|---|---|
platformDataSource | PlatformDataSource | The data source. |
Return
SelectionInput
— This object, for chaining.
setTitle(title)
Sets the title to be shown ahead of the input field.
Parameters
Name | Type | Description |
---|---|---|
title | String | The input field title. |
Return
SelectionInput
— This object, for chaining.
setType(type)
Sets the type of this input. Defaults to CHECKBOX
.
Parameters
Name | Type | Description |
---|---|---|
type | SelectionInputType | The selection type. |
Return
SelectionInput
— This object, for chaining.