本頁面由 Cloud Translation API 翻譯而成。

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`	設定事件物件中可識別此選取輸入內容的鍵，該事件物件是在發生 UI 互動時產生。
`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)`

新增可選取的新項目。

參數

名稱	類型	說明
`text`	`Object`	這個項目要顯示的文字。非字串原始引數會自動轉換為字串。
`value`	`Object`	透過回呼傳送的表單輸入值。非字串原始引數會自動轉換為字串。
`selected`	`Boolean`	該項目是否預設為選取狀態。如果選取輸入內容只接受一個值 (例如圓形按鈕或下拉式選單)，請只為一個項目設定這個欄位。

回攻員

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

參數

名稱	類型	說明
`text`	`Object`	這個項目要顯示的文字。非字串原始引數會自動轉換為字串。
`value`	`Object`	透過回呼傳送的表單輸入值。非字串原始引數會自動轉換為字串。
`selected`	`Boolean`	該項目是否預設為選取狀態。如果選取輸入內容只接受一個值 (例如圓形按鈕或下拉式選單)，請只為一個項目設定這個欄位。
`startIconUri`	`Object`	對於多重選取選單，則是項目文字欄位旁顯示的圖示網址。支援 PNG 和 JPEG 檔案。
`bottomText`	`Object`	對於多重選取選單，則是顯示在項目文字欄位下方的文字說明或標籤。

回攻員

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

參數

名稱	類型	說明
`action`	`Action`	外部資料來源。

回攻員

SelectionInput：這個物件用於鏈結。

`setFieldName(fieldName)`

設定事件物件中用於識別此選取輸入內容的鍵，該事件物件是在發生 UI 互動時產生。使用者看不到。必要欄位，不得重複。

參數

名稱	類型	說明
`fieldName`	`String`	要指派給此輸入來源的名稱。

回攻員

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

參數

名稱	類型	說明
`maxSelectedItems`	`Integer`	項目數量上限。

回攻員

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

參數

名稱	類型	說明
`queryLength`	`Integer`	文字字元的數量。

回攻員

SelectionInput：這個物件用於鏈結。

`setOnChangeAction(action)`

設定 Action，以便在選取輸入內容變更時執行。

參數

名稱	類型	說明
`action`	`Action`	要採取的動作。

回攻員

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 外掛程式。

參數

名稱	類型	說明
`platformDataSource`	`PlatformDataSource`	資料來源。

回攻員

SelectionInput：這個物件用於鏈結。

`setTitle(title)`

設定要在輸入欄位前顯示的標題。

參數

名稱	類型	說明
`title`	`String`	輸入欄位標題。

回攻員

SelectionInput：這個物件用於鏈結。

`setType(type)`

設定此輸入內容的類型。預設值為 CHECKBOX。

參數

名稱	類型	說明
`type`	`SelectionInputType`	選取類型。

回攻員

SelectionInput：這個物件用於鏈結。