Class SelectionInput

SelectionInput

事前定義されたオプションのセットから選択できる入力フィールド。

SelectionInputType.DROP_DOWN メニューと SelectionInputType.MULTI_SELECT メニューのフォーム送信検証のみをサポートします。Action.setAllWidgetsAreRequired(allWidgetsAreRequired) が true に設定されている場合、またはこのウィジェットが Action.addRequiredWidget(requiredWidget) で指定されている場合、値が選択されない限り送信アクションはブロックされます。

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

メソッド

メソッド戻り値の型概要
addDataSourceConfig(dataSourceConfig)SelectionInput選択コントロールのデータソース構成を設定します。
addEventAction(eventAction)Widgetウィジェットで実行できるイベント アクションを追加します。
addItem(text, value, selected)SelectionInput選択可能な新しいアイテムを追加します。
addMultiSelectItem(text, value, selected, startIconUri, bottomText)SelectionInput複数選択メニューで選択できる新しい項目を追加します。
setExternalDataSource(action)SelectionInputリレーショナル データベースなどの外部データソースを設定します。
setFieldName(fieldName)SelectionInputUI 操作が発生したときに生成されるイベント オブジェクトで、この選択入力の識別に使用されるキーを設定します。
setId(id)Widget変更するウィジェットの識別に使用される一意の ID を設定します。
setMultiSelectMaxSelectedItems(maxSelectedItems)SelectionInputユーザーが選択できるアイテムの最大数を設定します。
setMultiSelectMinQueryLength(queryLength)SelectionInputアプリが予測入力をクエリして、カードに候補アイテムを表示する前にユーザーが入力するテキスト文字数を設定します。
setOnChangeAction(action)SelectionInput選択入力が変更されるたびに実行される Action を設定します。
setPlatformDataSource(platformDataSource)SelectionInputGoogle Workspace のデータソースを設定します。
setTitle(title)SelectionInput入力フィールドの前に表示するタイトルを設定します。
setType(type)SelectionInputこの入力のタイプを設定します。
setVisibility(visibility)Widgetウィジェットの可視性を設定します。

詳細なドキュメント

addDataSourceConfig(dataSourceConfig)

選択コントロールのデータソース構成を設定します。このフィールドを使用すると、データソースをよりきめ細かく制御できます。このフィールドは省略可能です。

const multiSelect =
    CardService.newSelectionInput()
        .setType(CardService.SelectionInputType.MULTI_SELECT)
        .setFieldName('contacts')
        .setTitle('Selected contacts')
        .setDataSourceConfig(
            CardService.newDataSourceConfig().setPlatformDataSource(
                CardService.newPlatformDataSource().setCommonDataSource(
                    CardService.CommonDataSource.USER,
                )
            )
        );

パラメータ

名前型説明
dataSourceConfigDataSourceConfig選択入力に適用するデータソースの構成。

戻る

SelectionInput - チェーン用のこのオブジェクト。

addEventAction(eventAction)

ウィジェットで実行できるイベント アクションを追加します。

パラメータ

名前型説明
eventActionEventAction追加する EventAction。

戻る

Widget - チェーン用の Object。

addItem(text, value, selected)

選択可能な新しいアイテムを追加します。

パラメータ

名前型説明
textObjectこの項目に表示するテキスト。文字列以外のプリミティブ引数は、自動的に文字列に変換されます。
valueObjectコールバック経由で送信されるフォーム入力値。文字列以外のプリミティブ引数は自動的に文字列に変換されます。
selectedBooleanアイテムがデフォルトで選択されているかどうか。選択入力で 1 つの値のみを受け入れる場合（ラジオボタンやプルダウン メニューなど）、このフィールドは 1 つのアイテムに対してのみ設定します。

戻る

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アイテムがデフォルトで選択されているかどうか。選択入力で 1 つの値のみを受け入れる場合（ラジオボタンやプルダウン メニューなど）、このフィールドは 1 つのアイテムに対してのみ設定します。
startIconUriObject複数選択メニューの場合、アイテムのテキスト フィールドの横に表示されるアイコンの URL。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)

UI 操作が発生したときに生成されるイベント オブジェクトで、この選択入力の識別に使用されるキーを設定します。ユーザーには表示されません。必須。一意である必要があります。

パラメータ

名前型説明
fieldNameStringこの入力に割り当てる名前。

戻る

SelectionInput - チェーン用のこのオブジェクト。

setId(id)

変更するウィジェットの識別に使用される一意の ID を設定します。ウィジェットの変更はアドオンでのみサポートされています。

パラメータ

名前型説明
idStringウィジェットの ID。64 文字以内で、`[a-zA-Z0-9-]+` の形式で指定します。

戻る

Widget - チェーン用のこのオブジェクト。

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 - チェーン用のこのオブジェクト。

setVisibility(visibility)

ウィジェットの可視性を設定します。デフォルト値は `VISIBLE` です。

パラメータ

名前型説明
visibilityVisibilityウィジェットの Visibility。

戻る

Widget - チェーン用の Object。