Class 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)SelectionInput設定在發生 UI 互動時產生的事件物件中，用於識別這個選取輸入內容的鍵。
setId(id)Widget設定指派的專屬 ID，用於識別要變動的小工具。
setMultiSelectMaxSelectedItems(maxSelectedItems)SelectionInput設定使用者可選取的項目數量上限。
setMultiSelectMinQueryLength(queryLength)SelectionInput設定使用者輸入的文字字元數，達到這個下限後，應用程式就會查詢自動完成功能，並在資訊卡上顯示建議項目。
setOnChangeAction(action)SelectionInput設定在選取輸入內容變更時執行的 Action。
setPlatformDataSource(platformDataSource)SelectionInput設定 Google 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 - 物件，用於鏈結。

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)

設定在發生 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 - 鏈結用的物件。