Class SelectionInput

选择输入

一个输入字段,可让用户从一组预定义选项中进行选择。

适用于 Google Workspace 插件和 Google Chat 应用。

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);

方法

方法返回类型简介
addItem(text, value, selected)SelectionInput添加了可供选择的新项。
addMultiSelectItem(text, value, selected, startIconUri, bottomText)SelectionInput为多选菜单添加可供选择的新项。
setExternalDataSource(action)SelectionInput设置外部数据源,例如关系型数据库。
setFieldName(fieldName)SelectionInput设置在发生界面互动时生成的事件对象中用于标识此选择输入的键。
setMultiSelectMaxSelectedItems(maxSelectedItems)SelectionInput设置用户可以选择的项数上限。
setMultiSelectMinQueryLength(queryLength)SelectionInput设置用户在应用查询自动补全功能并在卡片上显示建议内容之前输入的文本字符数。
setOnChangeAction(action)SelectionInput设置在选择输入发生变化时执行的 Action
setPlatformDataSource(platformDataSource)SelectionInput设置 Google Workspace 中的数据源。
setTitle(title)SelectionInput设置要在输入字段前面显示的标题。
setType(type)SelectionInput设置此输入的类型。

详细文档

addItem(text, value, selected)

添加了可供选择的新项。

参数

名称类型说明
textObject要显示的此项的文本。非字符串基元参数会自动转换为字符串。
valueObject通过回调发送的表单输入值。非字符串基元参数会自动转换为字符串。
selectedBoolean相应项是否默认处于选中状态。如果选择输入项仅接受一个值(例如单选按钮或下拉菜单),请仅为一个项设置此字段。

返回

SelectionInput - 此对象,用于链式调用。


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

为多选菜单添加可供选择的新项。

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',
        );

参数

名称类型说明
textObject要显示的此项的文本。非字符串基元参数会自动转换为字符串。
valueObject通过回调发送的表单输入值。非字符串基元参数会自动转换为字符串。
selectedBoolean相应项是否默认处于选中状态。如果选择输入项仅接受一个值(例如单选按钮或下拉菜单),请仅为一个项设置此字段。
startIconUriObject对于多选菜单,是显示在项文本字段旁边的图标的网址。支持 PNG 和 JPEG 文件。
bottomTextObject对于多选菜单,是显示在项的文本字段下方的文本说明或标签。

返回

SelectionInput - 此对象,用于链式调用。


setExternalDataSource(action)

设置外部数据源,例如关系型数据库。

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'),
        );

参数

名称类型说明
actionAction外部数据源。

返回

SelectionInput - 此对象,用于链式调用。


setFieldName(fieldName)

在发生界面互动时生成的事件对象中设置用于标识此选择输入的键。对用户不可见。必填,必须是唯一的。

参数

名称类型说明
fieldNameString要分配给此输入的名称。

返回

SelectionInput - 此对象,用于链式调用。


setMultiSelectMaxSelectedItems(maxSelectedItems)

设置用户可选择的项数上限。

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',
        );

参数

名称类型说明
maxSelectedItemsInteger项的数量上限。

返回

SelectionInput - 此对象,用于链式调用。


setMultiSelectMinQueryLength(queryLength)

设置用户在应用查询自动补全功能并在卡片上显示建议内容之前输入的文本字符数。

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',
        );

参数

名称类型说明
queryLengthInteger文本字符数。

返回

SelectionInput - 此对象,用于链式调用。


setOnChangeAction(action)

设置在选择输入发生变化时执行的 Action

参数

名称类型说明
actionAction要执行的操作。

返回

SelectionInput - 此对象,用于链式调用。


setPlatformDataSource(platformDataSource)

设置 Google Workspace 中的数据源。用于填充多选菜单中的项。

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('contacts')
        .setTitle('Selected contacts')
        .setPlatformDataSource(
            CardService.newPlatformDataSource().setCommonDataSource(
                CardService.CommonDataSource.USER,
                ),
        );
仅适用于 Google Chat 应用。不适用于 Google Workspace 插件。

参数

名称类型说明
platformDataSourcePlatformDataSource数据源。

返回

SelectionInput - 此对象,用于链式调用。


setTitle(title)

设置要在输入字段前面显示的标题。

参数

名称类型说明
titleString输入字段标题。

返回

SelectionInput - 此对象,用于链式调用。


setType(type)

设置此输入的类型。默认为 CHECKBOX

参数

名称类型说明
typeSelectionInputType选择类型。

返回

SelectionInput - 此对象,用于链式调用。